From 118e1414ceac6abcd74a65f0e8d7c20f18b4a503 Mon Sep 17 00:00:00 2001
From: Ashley Johnson <61059402+PapaRascal2020@users.noreply.github.com>
Date: Fri, 27 Sep 2024 15:40:19 +0100
Subject: [PATCH] Split form of Sidekick Playground into its own component

---
 .../views/Components/sidekick-form.blade.php  | 16 +++++
 .../resources/views/Pages/audio.blade.php     | 10 +--
 .../resources/views/Pages/chat.blade.php      | 69 ++++++++-----------
 .../resources/views/Pages/chatroom.blade.php  | 29 +++-----
 .../views/Pages/completion.blade.php          | 15 ++--
 .../resources/views/Pages/embedding.blade.php | 10 +--
 .../resources/views/Pages/image.blade.php     | 10 +--
 .../resources/views/Pages/moderate.blade.php  | 18 ++---
 .../views/Pages/transcribe.blade.php          | 10 +--
 stubs/default/routes/web.sidekick.php         | 15 ++--
 10 files changed, 76 insertions(+), 126 deletions(-)
 create mode 100644 stubs/default/resources/views/Components/sidekick-form.blade.php

diff --git a/stubs/default/resources/views/Components/sidekick-form.blade.php b/stubs/default/resources/views/Components/sidekick-form.blade.php
new file mode 100644
index 0000000..c8f5f91
--- /dev/null
+++ b/stubs/default/resources/views/Components/sidekick-form.blade.php
@@ -0,0 +1,16 @@
+<footer class="bg-slate-900 p-4">
+    <form method="POST" id="sidekick-form" action="{{ $url }}">
+        <div class="flex gap-4">
+            @csrf
+            {{ $slot }}
+            <input type="text"
+                   id="prompt"
+                   name="prompt"
+                   class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600"
+                   placeholder="Type your message..."
+                   value="{{ $value  ?? ''}}"
+                   required>
+            <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+        </div>
+    </form>
+</footer>
diff --git a/stubs/default/resources/views/Pages/audio.blade.php b/stubs/default/resources/views/Pages/audio.blade.php
index 41cd10c..38a0232 100644
--- a/stubs/default/resources/views/Pages/audio.blade.php
+++ b/stubs/default/resources/views/Pages/audio.blade.php
@@ -27,14 +27,6 @@
     </div>
 
     <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form method="POST" action="/sidekick/playground/audio">
-            <div class="flex">
-                @csrf
-                <input type="text" name="text_to_convert" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type your message...">
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
-            </div>
-        </form>
-    </footer>
+    <x-sidekick-form url="/sidekick/playground/audio" />
 
 @endsection
diff --git a/stubs/default/resources/views/Pages/chat.blade.php b/stubs/default/resources/views/Pages/chat.blade.php
index 75e0abe..a712c0c 100644
--- a/stubs/default/resources/views/Pages/chat.blade.php
+++ b/stubs/default/resources/views/Pages/chat.blade.php
@@ -18,44 +18,35 @@
         </div>
     </div>
 
-    <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form method="POST" action="/sidekick/playground/chat">
-            <div class="flex gap-2">
-                @csrf
-                <select name="engine" class="text-black">
-                    <option value="\PapaRascalDev\Sidekick\Drivers\OpenAi|gpt-3.5-turbo">Open AI : GPT 3.5 Turbo
-                    </option>
-                    <option value="\PapaRascalDev\Sidekick\Drivers\OpenAi|gpt-4">Open AI : GPT 4</option>
-                    @if(getenv('SIDEKICK_MISTRAL_TOKEN'))
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|mistral-small-latest">Mistral : Small
-                        </option>
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|mistral-medium-latest">Mistral : Medium
-                        </option>
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|mistral-large-latest">Mistral : Large
-                        </option>
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|open-mistral-7b">Mistral : Open Mistral
-                            7B
-                        </option>
-                    @endif
-                    @if(getenv('SIDEKICK_CLAUDE_TOKEN'))
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Claude|claude-3-opus-20240229">Claude : Opus
-                        </option>
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Claude|claude-3-sonnet-20240229">Claude: Sonnet
-                        </option>
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Claude|claude-3-haiku-20240307">Claude: Haiku
-                        </option>
-                    @endif
-                    @if(getenv('SIDEKICK_CLAUDE_TOKEN'))
-                        <option value="\PapaRascalDev\Sidekick\Drivers\Cohere|">Cohere : Auto-Select</option>
-                    @endif
-                </select>
-                <input type="text" name="prompt" required
-                       class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600"
-                       placeholder="Type a system prompt...">
-                <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
-            </div>
-        </form>
-    </footer>
+    <!-- Input form -->
+    <x-sidekick-form url="/sidekick/playground/chat">
+        <select name="engine" class="text-black">
+            <option value="\PapaRascalDev\Sidekick\Drivers\OpenAi|gpt-3.5-turbo">Open AI : GPT 3.5 Turbo
+            </option>
+            <option value="\PapaRascalDev\Sidekick\Drivers\OpenAi|gpt-4">Open AI : GPT 4</option>
+            @if(getenv('SIDEKICK_MISTRAL_TOKEN'))
+                <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|mistral-small-latest">Mistral : Small
+                </option>
+                <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|mistral-medium-latest">Mistral : Medium
+                </option>
+                <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|mistral-large-latest">Mistral : Large
+                </option>
+                <option value="\PapaRascalDev\Sidekick\Drivers\Mistral|open-mistral-7b">Mistral : Open Mistral
+                    7B
+                </option>
+            @endif
+            @if(getenv('SIDEKICK_CLAUDE_TOKEN'))
+                <option value="\PapaRascalDev\Sidekick\Drivers\Claude|claude-3-opus-20240229">Claude : Opus
+                </option>
+                <option value="\PapaRascalDev\Sidekick\Drivers\Claude|claude-3-sonnet-20240229">Claude: Sonnet
+                </option>
+                <option value="\PapaRascalDev\Sidekick\Drivers\Claude|claude-3-haiku-20240307">Claude: Haiku
+                </option>
+            @endif
+            @if(getenv('SIDEKICK_CLAUDE_TOKEN'))
+                <option value="\PapaRascalDev\Sidekick\Drivers\Cohere|">Cohere : Auto-Select</option>
+            @endif
+        </select>
+    </x-sidekick-form>
 @endsection
 
diff --git a/stubs/default/resources/views/Pages/chatroom.blade.php b/stubs/default/resources/views/Pages/chatroom.blade.php
index 7526990..db1e047 100644
--- a/stubs/default/resources/views/Pages/chatroom.blade.php
+++ b/stubs/default/resources/views/Pages/chatroom.blade.php
@@ -46,31 +46,24 @@
         </div>
     </div>
 
-    <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form method="POST" id="completion-form">
-            <div class="flex">
-                <input id="conversation_id" type="hidden" name="conversation_id" value="{{$conversationId}}" />
-                <input id="engine" type="hidden" name="engine" value="{{$options}}" />
-                <label class="inline-flex items-center cursor-pointer">
-                    <input type="checkbox" id="stream" name="stream" value="" class="sr-only peer">
-                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                    <span class="ms-3 text-sm font-medium text-gray-900 pr-4 dark:text-gray-300">Stream</span>
-                </label>
-                <input id="message-input" type="text" name="message" required class="flex-1 border border-gray-300 text-black rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type your message...">
-                <input type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700" value="&#x23CE;">
-            </div>
-        </form>
-    </footer>
+    <x-sidekick-form url="/sidekick/playground/chat/update">
+        <input id="conversation_id" type="hidden" name="conversation_id" value="{{$conversationId}}" />
+        <input id="engine" type="hidden" name="engine" value="{{$options}}" />
+        <label class="inline-flex items-center cursor-pointer">
+            <input type="checkbox" id="stream" name="stream" value="" class="sr-only peer">
+            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+            <span class="ms-3 text-sm font-medium text-gray-900 pr-4 dark:text-gray-300">Stream</span>
+        </label>
+    </x-sidekick-form>
 @endsection
 
 @prepend('page-scripts')
     <script type="text/javascript">
 
         document.addEventListener('DOMContentLoaded', function () {
-            const form = document.getElementById('completion-form');
+            const form = document.getElementById('sidekick-form');
             const container = document.getElementById('scrollableDiv');
-            const messageInput = document.getElementById('message-input');
+            const messageInput = document.getElementById('prompt');
             const engine = document.getElementById('engine');
             const stream = document.getElementById('stream');
             const conversationId = document.getElementById('conversation_id');
diff --git a/stubs/default/resources/views/Pages/completion.blade.php b/stubs/default/resources/views/Pages/completion.blade.php
index 7280414..f237620 100644
--- a/stubs/default/resources/views/Pages/completion.blade.php
+++ b/stubs/default/resources/views/Pages/completion.blade.php
@@ -26,22 +26,15 @@
     </div>
 
     <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form id="completion-form">
-            <div class="flex">
-                <input type="text" name="message" id="message-input" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type some text...">
-                <input type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700" value="&#x23CE;">
-            </div>
-        </form>
-    </footer>
+    <x-sidekick-form url="/sidekick/playground/completion" />
 
 @endsection
 
 @prepend('page-scripts')
     <script type="text/javascript">
         document.addEventListener('DOMContentLoaded', function () {
-            const form = document.getElementById('completion-form');
-            const messageInput = document.getElementById('message-input');
+            const form = document.getElementById('sidekick-form');
+            const messageInput = document.getElementById('prompt');
             const responseContainer = document.getElementById('response-container');
             const responseText = document.getElementById('response-text');
 
@@ -60,7 +53,7 @@
                         'Content-Type': 'application/json',
                         'X-CSRF-TOKEN': '{{ csrf_token() }}',
                     },
-                    body: JSON.stringify({ message: message })
+                    body: JSON.stringify({ prompt: message })
                 })
                     .then(response => response.text())
                     .then(data => {
diff --git a/stubs/default/resources/views/Pages/embedding.blade.php b/stubs/default/resources/views/Pages/embedding.blade.php
index c587845..9a1332d 100644
--- a/stubs/default/resources/views/Pages/embedding.blade.php
+++ b/stubs/default/resources/views/Pages/embedding.blade.php
@@ -28,14 +28,6 @@
     </div>
 
     <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form method="POST" action="/sidekick/playground/embedding">
-            <div class="flex">
-                @csrf
-                <input type="text" name="text" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type some text..." >
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
-            </div>
-        </form>
-    </footer>
+    <x-sidekick-form url="/sidekick/playground/embedding" />
 
 @endsection
diff --git a/stubs/default/resources/views/Pages/image.blade.php b/stubs/default/resources/views/Pages/image.blade.php
index 22f555a..b369178 100644
--- a/stubs/default/resources/views/Pages/image.blade.php
+++ b/stubs/default/resources/views/Pages/image.blade.php
@@ -22,14 +22,6 @@
     </div>
 
     <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form method="POST" action="/sidekick/playground/image">
-            <div class="flex">
-                @csrf
-                <input type="text" name="text_to_convert" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type your message...">
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
-            </div>
-        </form>
-    </footer>
+    <x-sidekick-form url="/sidekick/playground/image" />
 
 @endsection
diff --git a/stubs/default/resources/views/Pages/moderate.blade.php b/stubs/default/resources/views/Pages/moderate.blade.php
index 64fad8b..c2aa739 100644
--- a/stubs/default/resources/views/Pages/moderate.blade.php
+++ b/stubs/default/resources/views/Pages/moderate.blade.php
@@ -17,8 +17,8 @@
             </div>
 
             <div class="flex items-start justify-center">
-                <div class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4 text-black">
-                    @if(isset($response))
+                @if(isset($response))
+                    <div class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4 text-black">
                         @if (!$response['results'][0]['flagged'])
                             <p>The content is fine</p>
                         @else
@@ -31,22 +31,14 @@
                                 @endforeach
                             </ul>
                         @endif
-                    @endif
-                </div>
+                    </div>
+                @endif
             </div>
         </div>
     </div>
 
     <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form method="POST" action="/sidekick/playground/moderate">
-            <div class="flex">
-                @csrf
-                <input type="text" name="text" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="Type some text..." >
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
-            </div>
-        </form>
-    </footer>
+    <x-sidekick-form url="/sidekick/playground/moderate" />
 
 @endsection
 
diff --git a/stubs/default/resources/views/Pages/transcribe.blade.php b/stubs/default/resources/views/Pages/transcribe.blade.php
index b0e753a..75e628b 100644
--- a/stubs/default/resources/views/Pages/transcribe.blade.php
+++ b/stubs/default/resources/views/Pages/transcribe.blade.php
@@ -29,15 +29,7 @@
     </div>
 
     <!-- Input Area -->
-    <footer class="bg-slate-900 p-4">
-        <form method="POST" action="/sidekick/playground/transcribe">
-            <div class="flex">
-                @csrf
-                <input type="text" name="audio" class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600" placeholder="" value="http://english.voiceoversamples.com/ENG_UK_M_PeterB.mp3">
-                <button class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
-            </div>
-        </form>
-    </footer>
+    <x-sidekick-form url="/sidekick/playground/transcribe" value="http://english.voiceoversamples.com/ENG_UK_M_PeterB.mp3" />
 
 @endsection
 
diff --git a/stubs/default/routes/web.sidekick.php b/stubs/default/routes/web.sidekick.php
index cbb9334..fc99ca7 100644
--- a/stubs/default/routes/web.sidekick.php
+++ b/stubs/default/routes/web.sidekick.php
@@ -3,9 +3,6 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use \PapaRascalDev\Sidekick\Drivers\OpenAi;
-use PapaRascalDev\Sidekick\Models\Conversation;
-use PapaRascalDev\Sidekick\SidekickConversation;
-use PapaRascalDev\Sidekick\Facades\Sidekick;
 
 Route::post('/sidekick/playground/chat', function (Request $request) {
 
@@ -68,7 +65,7 @@
     return sidekick(new OpenAi)->complete(
         model: 'gpt-3.5-turbo',
         systemPrompt: 'You are a knowledge base, please answer there questions',
-        message: $request->get('message')
+        message: $request->get('prompt')
     );
 });
 
@@ -81,7 +78,7 @@
     // Send text to be converted by Sidekick to audio
     $audio = sidekick(new OpenAi)->audio()->fromText(
         model:'tts-1',
-        text: $request->get('text_to_convert')
+        text: $request->get('prompt')
     );
 
     $savedFile = sidekick(new OpenAi)->utilities()->store($audio, 'audio/mpeg');
@@ -93,7 +90,7 @@
 Route::post('/sidekick/playground/image', function (Request $request) {
     $image =  sidekick(new OpenAi)->image()->make(
         model:'dall-e-3',
-        prompt: $request->get('text_to_convert'),
+        prompt: $request->get('prompt'),
         width:'1024',
         height:'1024'
     );
@@ -106,7 +103,7 @@
 Route::post('/sidekick/playground/transcribe', function (Request $request) {
     $response =  sidekick(new OpenAi)->transcribe()->audioFile(
         model:'whisper-1',
-        filePath:$request->get('audio')
+        filePath:$request->get('prompt')
     );
     return view('Pages.transcribe', ['response' => $response]);
 });
@@ -114,7 +111,7 @@
 Route::post('/sidekick/playground/embedding', function (Request $request) {
     $response = sidekick(new OpenAi)->embedding()->make(
         model:'text-embedding-3-large',
-        input: $request->get('text'),
+        input: $request->get('prompt'),
     );
     return view('Pages.embedding', ['response' => $response]);
 });
@@ -126,7 +123,7 @@
 Route::post('/sidekick/playground/moderate', function (Request $request) {
     $response = sidekick(new OpenAi)->moderate()->text(
         model:'text-moderation-latest',
-        content: $request->get('text')
+        content: $request->get('prompt')
     );
     return view('Pages.moderate', ['response' => $response]);
 });