Fixing the playground and renaming route to shorten it

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

@@ -27,6 +27,6 @@
     </div>
 
     <!-- Input Area -->
-    <x-sidekick-form url="/sidekick/playground/audio" />
+    <x-sidekick-form url="/sidekick/audio" />
 
 @endsection

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

@@ -19,32 +19,23 @@
     </div>
 
     <!-- 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>
+    <x-sidekick-form url="/sidekick/chat">
+        <select name="config" class="text-black">
+            <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\OpenAi", "model": "gpt-3.5-turbo"}'>Open AI : GPT 3.5 Turbo</option>
+            <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\OpenAi", "model": "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>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\\\Mistral", "model": "mistral-small-latest"}'>Mistral : Small</option>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\\\Mistral", "model": "mistral-medium-latest"}'>Mistral : Medium</option>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\\\Mistral", "model": "mistral-large-latest"}'>Mistral : Large</option>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\\\Mistral", "model": "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>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\Claude", "model": "claude-3-opus-20240229"}'>Claude : Opus</option>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\Claude", "model": "claude-3-sonnet-20240229"}'>Claude: Sonnet</option>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\Claude", "model": "claude-3-haiku-20240307"}'>Claude: Haiku</option>
             @endif
             @if(getenv('SIDEKICK_CLAUDE_TOKEN'))
-                <option value="\PapaRascalDev\Sidekick\Drivers\Cohere|">Cohere : Auto-Select</option>
+                <option value='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\Cohere", "model": ""}'>Cohere : Auto-Select</option>
             @endif
         </select>
     </x-sidekick-form>

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

@@ -7,11 +7,11 @@
 @section('content')
     <!-- Header -->
     <header class="bg-slate-900 shadow p-4 flex justify-between items-center text-white">
-        <h1 class="text-xl text-white font-semibold">Conversation <small class="text-sm">(id: {{$conversationId}}) - Engine: {{($options != '') ? $options : 'Auto-Select'}}</small></h1>
+        <h1 class="text-xl text-white font-semibold">Conversation <small class="text-sm">(id: {{$conversationId}}) - Engine: {{($config->model != '') ? $config->model : 'Auto-Select'}}</small></h1>
 
         <div>
-            <a href="/sidekick/playground/chat" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">New Chat</a>
-            <a href="/sidekick/playground/chat/delete/{{$conversationId}}" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">X</a>
+            <a href="/sidekick/chat" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">New Chat</a>
+            <a href="/sidekick/chat/delete/{{$conversationId}}" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">X</a>
         </div>
     </header>
 
@@ -38,9 +38,9 @@
         </div>
     </div>
 
-    <x-sidekick-form url="/sidekick/playground/chat/update">
+    <x-sidekick-form url="/sidekick/chat/update">
         <input id="conversation_id" type="hidden" name="conversation_id" value="{{$conversationId}}" />
-        <input id="engine" type="hidden" name="engine" value="{{$options}}" />
+        <input id="engine" type="hidden" name="engine" value="{{$config->model}}" />
         <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>
@@ -112,7 +112,7 @@
                     `;
 
                     // Make fetch request to server
-                    fetch('/sidekick/playground/chat/update', {
+                    fetch('/sidekick/chat/update', {
                         method: 'POST',
                         headers: {
                             'Content-Type': 'application/json',
@@ -138,12 +138,16 @@
                             if(done) break;
 
                             const chunk = decoder.decode(value, {stream: true});
-                            console.log(chunk);
 
-                            responseBox.innerText += chunk;
+                            // Needs to be fixed once I have some time.
+                            if(responseBox.innerText != chunk)
+                                responseBox.innerText += chunk;
+
                             container.scrollTop = container.scrollHeight;
                         }
 
+
+
                         const loader = document.getElementById('loader');
                         loader.remove();
 
@@ -157,7 +161,7 @@
                 function handleCallback() {
                     let r = (Math.random() + 1).toString(36).substring(7);
 
-                    fetch('/sidekick/playground/chat/update', {
+                    fetch('/sidekick/chat/update', {
                         method: 'POST',
                         headers: {
                             'Content-Type': 'application/json',

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

@@ -26,7 +26,7 @@
     </div>
 
     <!-- Input Area -->
-    <x-sidekick-form url="/sidekick/playground/completion" />
+    <x-sidekick-form url="/sidekick/completion" />
 
 @endsection
 
@@ -47,7 +47,7 @@
                 responseContainer.style.display = 'none';
                 responseText.textContent = '';
 
-                fetch('/sidekick/playground/completion', {
+                fetch('/sidekick/completion', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',

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

@@ -28,6 +28,6 @@
     </div>
 
     <!-- Input Area -->
-    <x-sidekick-form url="/sidekick/playground/embedding" />
+    <x-sidekick-form url="/sidekick/embedding" />
 
 @endsection

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

@@ -22,6 +22,6 @@
     </div>
 
     <!-- Input Area -->
-    <x-sidekick-form url="/sidekick/playground/image" />
+    <x-sidekick-form url="/sidekick/image" />
 
 @endsection

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

@@ -38,7 +38,7 @@
     </div>
 
     <!-- Input Area -->
-    <x-sidekick-form url="/sidekick/playground/moderate" />
+    <x-sidekick-form url="/sidekick/moderate" />
 
 @endsection
 

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

@@ -29,7 +29,7 @@
     </div>
 
     <!-- Input Area -->
-    <x-sidekick-form url="/sidekick/playground/transcribe" value="http://english.voiceoversamples.com/ENG_UK_M_PeterB.mp3" />
+    <x-sidekick-form url="/sidekick/transcribe" value="http://english.voiceoversamples.com/ENG_UK_M_PeterB.mp3" />
 
 @endsection
 

stubs/default/resources/views/Shared/layout.blade.php

@@ -24,13 +24,13 @@
             </div>
         </div>
         <nav class="space-y-4">
-            <a href="/sidekick/playground/chat" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Chats</a>
-            <a href="/sidekick/playground/completion" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Completion</a>
-            <a href="/sidekick/playground/image" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Image Generation</a>
-            <a href="/sidekick/playground/audio" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Audio Generation</a>
-            <a href="/sidekick/playground/moderate" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Moderation</a>
-            <a href="/sidekick/playground/transcribe" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Transcription</a>
-            <a href="/sidekick/playground/embedding" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Embedding</a>
+            <a href="/sidekick/chat" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Chats</a>
+            <a href="/sidekick/completion" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Completion</a>
+            <a href="/sidekick/image" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Image Generation</a>
+            <a href="/sidekick/audio" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Audio Generation</a>
+            <a href="/sidekick/moderate" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Moderation</a>
+            <a href="/sidekick/transcribe" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Transcription</a>
+            <a href="/sidekick/embedding" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Embedding</a>
         </nav>
     </aside>
 

stubs/default/routes/web.sidekick.php

@@ -4,38 +4,38 @@
 use Illuminate\Support\Facades\Route;
 use \PapaRascalDev\Sidekick\Drivers\OpenAi;
 
-Route::post('/sidekick/playground/chat', function (Request $request) {
+Route::post('/sidekick/chat', function (Request $request) {
 
     // These are the settings from the drop down on the front end.
-    $options = explode("|", $request->get('engine'));
+    $config = json_decode($request->get('config'));
 
     // This is the system prompt the user wants the AI to use
     $systemPrompt = $request->get('prompt');
 
     // Call sidekick and send the first message
     $conversation = sidekickConversation()->begin(
-        driver: new $options[0](),
-        model: $options[1],
+        driver: new $config->engine(),
+        model: $config->model,
         systemPrompt: $systemPrompt
     );
 
     // Redirect the user to the main page for the conversation
     return view('Pages.chatroom', [
         'conversationId' => $conversation->model->id,
-        'options' => $options[0],
+        'config' => $config,
         'conversations' => sidekickConversation()->database()->all('id', 'model')
     ]);
 });
 
-Route::post('/sidekick/playground/chat/update', function (Request $request) {
+Route::post('/sidekick/chat/update', function (Request $request) {
 
     // Load the instance of Sidekick Conversations and sendMessage
     return sidekickConversation()
             ->resume( $request->get('conversation_id') )
             ->sendMessage($request->get('message'), $request->get('stream'));
 });
 
-Route::get('/sidekick/playground/chat/{id}', function (string $id) {
+Route::get('/sidekick/chat/{id}', function (string $id) {
     // load the conversation
     $conversation = sidekickConversation()->resume($id);
 
@@ -47,19 +47,19 @@
     ]);
 });
 
-Route::get('/sidekick/playground/chat/delete/{id}', function (string $id) {
+Route::get('/sidekick/chat/delete/{id}', function (string $id) {
     // Find and delete the conversation in the database
     sidekickConversation()->delete($id);
 
     // Redirect to the main chat page.
-    return redirect('/sidekick/playground/chat');
+    return redirect('/sidekick/chat');
 });
 
-Route::get('/sidekick/playground/completion', function () {
+Route::get('/sidekick/completion', function () {
     return view('Pages.completion');
 });
 
-Route::post('/sidekick/playground/completion', function (Request $request) {
+Route::post('/sidekick/completion', function (Request $request) {
 
     // Send message for a response
     return sidekick(new OpenAi)->complete(
@@ -69,11 +69,11 @@
     );
 });
 
-Route::get('/sidekick/playground/audio', function () {
+Route::get('/sidekick/audio', function () {
     return view('Pages.audio');
 });
 
-Route::post('/sidekick/playground/audio', function (Request $request) {
+Route::post('/sidekick/audio', function (Request $request) {
 
     // Send text to be converted by Sidekick to audio
     $audio = sidekick(new OpenAi)->audio()->fromText(
@@ -87,7 +87,7 @@
     return view('Pages.audio', ['audio' => base64_encode($audio), 'savedFile' => $savedFile]);
 });
 
-Route::post('/sidekick/playground/image', function (Request $request) {
+Route::post('/sidekick/image', function (Request $request) {
     $image =  sidekick(new OpenAi)->image()->make(
         model:'dall-e-3',
         prompt: $request->get('prompt'),
@@ -100,51 +100,51 @@
     return view('Pages.image', ['image' => $image['data'][0]['url'], 'savedFile' => $savedFile]);
 });
 
-Route::post('/sidekick/playground/transcribe', function (Request $request) {
+Route::post('/sidekick/transcribe', function (Request $request) {
     $response =  sidekick(new OpenAi)->transcribe()->audioFile(
         model:'whisper-1',
         filePath:$request->get('prompt')
     );
     return view('Pages.transcribe', ['response' => $response]);
 });
 
-Route::post('/sidekick/playground/embedding', function (Request $request) {
+Route::post('/sidekick/embedding', function (Request $request) {
     $response = sidekick(new OpenAi)->embedding()->make(
         model:'text-embedding-3-large',
         input: $request->get('prompt'),
     );
     return view('Pages.embedding', ['response' => $response]);
 });
 
-Route::get('/sidekick/playground/moderate', function () {
+Route::get('/sidekick/moderate', function () {
     return view('Pages.moderate');
 });
 
-Route::post('/sidekick/playground/moderate', function (Request $request) {
+Route::post('/sidekick/moderate', function (Request $request) {
     $response = sidekick(new OpenAi)->moderate()->text(
         model:'text-moderation-latest',
         content: $request->get('prompt')
     );
     return view('Pages.moderate', ['response' => $response]);
 });
 
-Route::get('/sidekick/playground/image', function () {
+Route::get('/sidekick/image', function () {
     return view('Pages.image');
 });
 
-Route::get('/sidekick/playground/transcribe', function () {
+Route::get('/sidekick/transcribe', function () {
     return view('Pages.transcribe');
 });
 
-Route::get('/sidekick/playground/embedding', function () {
+Route::get('/sidekick/embedding', function () {
     return view('Pages.embedding');
 });
 
-Route::get('/sidekick/playground/chat', function () {
+Route::get('/sidekick/chat', function () {
     return view('Pages.chat');
 });
 
-Route::get('/sidekick/playground', function () {
+Route::get('/sidekick', function () {
     return view('Pages.index');
 });