From 1aac40bf0e173634aa7aafe5ce887813ff38fcc1 Mon Sep 17 00:00:00 2001
From: Ashley Johnson <61059402+PapaRascal2020@users.noreply.github.com>
Date: Wed, 2 Oct 2024 19:48:44 +0100
Subject: [PATCH] Draft(SK): Livewire scaffolding - coming soon

---
 src/Drivers/OpenAi.php                        |  2 +-
 src/Utilities/Utilities.php                   |  2 +-
 .../app/Livewire/Sidekick/AudioGeneration.php | 43 +++++++++
 stubs/livewire/app/Livewire/Sidekick/Chat.php | 47 +++++++++
 .../app/Livewire/Sidekick/ChatRoom.php        | 93 ++++++++++++++++++
 .../app/Livewire/Sidekick/Completion.php      | 36 +++++++
 .../app/Livewire/Sidekick/Embeddding.php      | 36 +++++++
 .../app/Livewire/Sidekick/ImageGeneration.php | 47 +++++++++
 .../livewire/app/Livewire/Sidekick/Index.php  | 16 ++++
 .../app/Livewire/Sidekick/Moderation.php      | 28 ++++++
 .../app/Livewire/Sidekick/Transcription.php   | 33 +++++++
 .../views/Components/layouts/app.blade.php    | 57 +++++++++++
 .../Components/sidekick-bot-message.blade.php | 17 ++++
 .../sidekick-user-message.blade.php           | 10 ++
 .../views/livewire/audio-generation.blade.php | 53 ++++++++++
 .../views/livewire/chat-room.blade.php        | 96 +++++++++++++++++++
 .../resources/views/livewire/chat.blade.php   | 46 +++++++++
 .../views/livewire/completion.blade.php       | 46 +++++++++
 .../views/livewire/embeddding.blade.php       | 46 +++++++++
 .../views/livewire/image-generation.blade.php | 55 +++++++++++
 .../resources/views/livewire/index.blade.php  | 13 +++
 .../views/livewire/moderation.blade.php       | 58 +++++++++++
 .../views/livewire/transcription.blade.php    | 47 +++++++++
 stubs/livewire/routes/web.sidekick.php        | 32 +++++++
 24 files changed, 957 insertions(+), 2 deletions(-)
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/AudioGeneration.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/Chat.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/ChatRoom.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/Completion.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/Embeddding.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/ImageGeneration.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/Index.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/Moderation.php
 create mode 100644 stubs/livewire/app/Livewire/Sidekick/Transcription.php
 create mode 100644 stubs/livewire/resources/views/Components/layouts/app.blade.php
 create mode 100644 stubs/livewire/resources/views/Components/sidekick-bot-message.blade.php
 create mode 100644 stubs/livewire/resources/views/Components/sidekick-user-message.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/audio-generation.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/chat-room.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/chat.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/completion.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/embeddding.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/image-generation.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/index.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/moderation.blade.php
 create mode 100644 stubs/livewire/resources/views/livewire/transcription.blade.php
 create mode 100644 stubs/livewire/routes/web.sidekick.php

diff --git a/src/Drivers/OpenAi.php b/src/Drivers/OpenAi.php
index a7b593e..c2fffcd 100644
--- a/src/Drivers/OpenAi.php
+++ b/src/Drivers/OpenAi.php
@@ -186,7 +186,7 @@ public function embedding(): Embedding
     public function moderate(): Moderate
     {
         return new Moderate(
-            url: "{$this->baseUrl}/moderation's",
+            url: "{$this->baseUrl}/moderations",
             headers: $this->headers
         );
     }
diff --git a/src/Utilities/Utilities.php b/src/Utilities/Utilities.php
index 05fad64..caa8eb4 100644
--- a/src/Utilities/Utilities.php
+++ b/src/Utilities/Utilities.php
@@ -129,7 +129,7 @@ public function store(string $data, string $mimeType = null): string
         file_put_contents($filePath, $data);
 
         // Return the local path of the stored file
-        return $filePath;
+        return asset('uploads/' . $filename);
     }
 
     /**
diff --git a/stubs/livewire/app/Livewire/Sidekick/AudioGeneration.php b/stubs/livewire/app/Livewire/Sidekick/AudioGeneration.php
new file mode 100644
index 0000000..d8c3123
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/AudioGeneration.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+use PapaRascalDev\Sidekick\Drivers\OpenAi;
+
+class AudioGeneration extends Component
+{
+    public $errors = null;
+
+    public $prompt = '';
+    public $audio = null;
+    public $savedFile = null;
+
+    public $model = 'tts-1';
+
+    public function submit()
+    {
+        $response = sidekick(new OpenAi)->audio()->fromText(
+            model: 'tts-1',
+            text: $this->prompt);
+
+        $response_json = json_decode($response, true);
+
+        if(isset($response_json['error'])) {
+            $this->errors = $response_json['error']['message'];
+        } else {
+            $this->audio = base64_encode($response);
+            $this->savedFile = sidekick(new OpenAi)->utilities()->store($response, 'audio/mpeg');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.audio-generation')
+            ->layout('Components.layouts.app', [
+                    'title' => 'Audio Generation',
+                    'conversations' => sidekickConversation()->database()->all('id', 'model')
+                ]
+            );
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/Chat.php b/stubs/livewire/app/Livewire/Sidekick/Chat.php
new file mode 100644
index 0000000..c17c34f
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/Chat.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+
+class Chat extends Component
+{
+
+    public $prompt = '';
+    public $config = '';
+
+
+    public function submit()
+    {
+
+        $config = json_decode($this->config, true);
+
+        if(!$config)
+        {
+            $config = [
+                "engine" => "\PapaRascalDev\Sidekick\Drivers\OpenAi",
+                "model" => "gpt-3.5-turbo"
+            ];
+        }
+
+        // This is the system prompt the user wants the AI to use
+        $systemPrompt = $this->prompt;
+
+
+        $conversation = sidekickConversation()->begin(
+            driver: new $config['engine'](),
+            model: $config['model'],
+            systemPrompt: $systemPrompt
+        );
+
+        return redirect()->to('/sidekick/chat/' . $conversation->id);
+    }
+
+    public function render()
+    {
+        return view('livewire.chat')->layout('Components.layouts.app', [
+            'title' => 'Chat',
+            'conversations' => sidekickConversation()->database()->all('id', 'model')
+        ]);
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/ChatRoom.php b/stubs/livewire/app/Livewire/Sidekick/ChatRoom.php
new file mode 100644
index 0000000..44b2c65
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/ChatRoom.php
@@ -0,0 +1,93 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+use Livewire\Attributes\On;
+use Illuminate\Support\Collection;
+
+class ChatRoom extends Component
+{
+    public $conversationId;
+    public $config;
+    public Collection $messages;
+    public $newMessage;
+    public $isStreaming = false;
+    public $streamingResponse = '';
+
+    public function mount($id = null)
+    {
+        $this->messages = collect();
+        if ($id) {
+            $this->loadConversation($id);
+        }
+    }
+
+    public function loadConversation($id)
+    {
+        $conversation = sidekickConversation()->resume($id);
+        $this->conversationId = $conversation->model->id;
+        $this->config = [
+            'engine' => $conversation->model->class,
+            'model' => $conversation->model->model,
+        ];
+        $this->messages = collect($conversation->model->messages)->map(function ($message) {
+            return (object) $message;
+        });
+    }
+
+    public function sendMessage()
+    {
+        $this->messages->push((object) [
+            'role' => 'user',
+            'content' => $this->newMessage
+        ]);
+
+        if ($this->isStreaming) {
+            $this->streamingResponse = '';
+            $this->dispatch('startStreaming');
+        } else {
+            $response = sidekickConversation()
+                ->resume($this->conversationId)
+                ->sendMessage($this->newMessage, false);
+
+            $this->messages->push((object) [
+                'role' => 'assistant',
+                'content' => $response
+            ]);
+        }
+
+        $this->newMessage = '';
+        $this->dispatch('messageAdded');
+    }
+
+    #[On('streamChunk')]
+    public function handleStreamChunk($chunk)
+    {
+        $this->streamingResponse .= $chunk;
+    }
+
+    #[On('endStreaming')]
+    public function endStreaming()
+    {
+        $this->messages->push((object) [
+            'role' => 'assistant',
+            'content' => $this->streamingResponse
+        ]);
+        $this->streamingResponse = '';
+    }
+
+    public function delete($id)
+    {
+        sidekickConversation()->delete($id);
+        return redirect()->to('/sidekick/chat');
+    }
+
+    public function render()
+    {
+        return view('livewire.chat-room')->layout('Components.layouts.app', [
+            'title' => 'Chat',
+            'conversations' => sidekickConversation()->database()->all('id', 'model')
+        ]);
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/Completion.php b/stubs/livewire/app/Livewire/Sidekick/Completion.php
new file mode 100644
index 0000000..53e6aee
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/Completion.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+use PapaRascalDev\Sidekick\Drivers\OpenAi;
+
+class Completion extends Component
+{
+    public $errors = null;
+
+    public $prompt = '';
+    public $response = null;
+
+    public function submit()
+    {
+
+        $this->response = sidekick(new OpenAi)->complete(
+            model: 'gpt-3.5-turbo',
+            systemPrompt: 'You are a knowledge base, please answer there questions',
+            message: $this->prompt
+        );
+
+
+        $this->prompt = '';
+
+    }
+
+    public function render()
+    {
+        return view('livewire.completion')->layout('Components.layouts.app', [
+            'title' => 'Completion',
+            'conversations' => sidekickConversation()->database()->all('id', 'model')
+        ]);
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/Embeddding.php b/stubs/livewire/app/Livewire/Sidekick/Embeddding.php
new file mode 100644
index 0000000..9e1742d
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/Embeddding.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+use PapaRascalDev\Sidekick\Drivers\OpenAi;
+
+class Embeddding extends Component
+{
+
+    public $errors = null;
+
+    public $prompt = '';
+    public $response = null;
+
+    public function submit()
+    {
+
+        $this->response = sidekick(new OpenAi)->embedding()->make(
+            model:'text-embedding-3-large',
+            input: $this->prompt,
+        );
+
+
+        $this->prompt = '';
+
+    }
+
+    public function render()
+    {
+        return view('livewire.embeddding')->layout('Components.layouts.app', [
+            'title' => 'Embedding',
+            'conversations' => sidekickConversation()->database()->all('id', 'model')
+        ]);
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/ImageGeneration.php b/stubs/livewire/app/Livewire/Sidekick/ImageGeneration.php
new file mode 100644
index 0000000..fcdbf3b
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/ImageGeneration.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+use PapaRascalDev\Sidekick\Drivers\OpenAi;
+
+class ImageGeneration extends Component
+{
+
+    public $prompt = '';
+    public $image = null;
+    public $savedFile = null;
+
+    public $errors = null;
+
+    public $model = 'dall-e-3';
+
+    public function submit()
+    {
+        $response = sidekick(new OpenAi)->image()->make(
+            model:$this->model,
+            prompt: $this->prompt,
+            width:'1024',
+            height:'1024'
+        );
+
+        $this->prompt = '';
+
+        if(isset($response['data'][0]['url'])) {
+            $this->image = $response['data'][0]['url'];
+            $this->savedFile = sidekick(new OpenAi)->utilities()->store($response['data'][0]['url'], 'image/png');
+        } else {
+            $this->errors = $response['error']['message'];
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.image-generation')
+            ->layout('Components.layouts.app', [
+                    'title' => 'Image Generation',
+                    'conversations' => sidekickConversation()->database()->all('id', 'model')
+                ]
+            );
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/Index.php b/stubs/livewire/app/Livewire/Sidekick/Index.php
new file mode 100644
index 0000000..8a3374e
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/Index.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+
+class Index extends Component
+{
+    public function render()
+    {
+        return view('livewire.index')->layout('Components.layouts.app', [
+            'title' => '',
+            'conversations' => sidekickConversation()->database()->all('id', 'model')
+        ]);
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/Moderation.php b/stubs/livewire/app/Livewire/Sidekick/Moderation.php
new file mode 100644
index 0000000..ba98c18
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/Moderation.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+use PapaRascalDev\Sidekick\Drivers\OpenAi;
+
+class Moderation extends Component
+{
+    public $response = null;
+    public $prompt = '';
+
+    public function submit()
+    {
+        $this->response = sidekick(new OpenAi)->moderate()->text(
+            model:'text-moderation-latest',
+            content: $this->prompt
+        );
+    }
+
+    public function render()
+    {
+        return view('livewire.moderation')->layout('Components.layouts.app', [
+            'title' => 'Moderation',
+            'conversations' => sidekickConversation()->database()->all('id', 'model')
+        ]);
+    }
+}
diff --git a/stubs/livewire/app/Livewire/Sidekick/Transcription.php b/stubs/livewire/app/Livewire/Sidekick/Transcription.php
new file mode 100644
index 0000000..1d3907a
--- /dev/null
+++ b/stubs/livewire/app/Livewire/Sidekick/Transcription.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Livewire\Sidekick;
+
+use Livewire\Component;
+use PapaRascalDev\Sidekick\Drivers\OpenAi;
+
+class Transcription extends Component
+{
+
+    public $errors = null;
+
+    public $prompt = 'http://english.voiceoversamples.com/ENG_UK_M_PeterB.mp3';
+    public $response = null;
+
+    public function submit()
+    {
+
+        $this->response =  sidekick(new OpenAi)->transcribe()->audioFile(
+            model:'whisper-1',
+            filePath:$this->prompt
+        );
+
+    }
+
+    public function render()
+    {
+        return view('livewire.transcription')->layout('Components.layouts.app', [
+            'title' => 'Transcription',
+            'conversations' => sidekickConversation()->database()->all('id', 'model')
+        ]);
+    }
+}
diff --git a/stubs/livewire/resources/views/Components/layouts/app.blade.php b/stubs/livewire/resources/views/Components/layouts/app.blade.php
new file mode 100644
index 0000000..97332f4
--- /dev/null
+++ b/stubs/livewire/resources/views/Components/layouts/app.blade.php
@@ -0,0 +1,57 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ $title ? "$title - Sidekick Playground" : "Sidekick Playground" }}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-slate-900 text-white">
+
+<!-- Main Container -->
+<div class="flex h-screen">
+
+    <!-- Sidebar Section -->
+    <aside class="w-64 p-6 border-r border-gray-700">
+        <div class="flex items-center px-2 h-20 pb-10">
+            <a wire:navigate href="/sidekick">
+                <img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e3449a7-44de-4ce2-b384-cea763c0901e_500x500.heic" class="h-14 w-14" alt="Sidekick Robot" />
+            </a>
+            <div class="ml-1">
+                <p class="ml-1 text-2xl font-medium tracking-wide truncate text-gray-100 font-sans">Sidekick!</p>
+                <div class="badge">
+                    <span class="px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-blue-800 bg-blue-100 rounded-full">Playground</span>
+                </div>
+            </div>
+        </div>
+        <nav class="space-y-4">
+            <a wire:navigate href="/sidekick/chat" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Chats</a>
+            @if($conversations)
+                @foreach($conversations as $conversation)
+                    <a wire:navigate href="/sidekick/chat/{{$conversation->id}}"
+                       class="block text-white text-xs hover:bg-gray-600 px-6 py-2 rounded">
+                        {{($conversation->model != '') ? $conversation->model : 'Auto-Select'}} : {{explode('-', $conversation->id)[0]}}
+                    </a>
+                @endforeach
+            @endif
+            <a wire:navigate href="/sidekick/completion" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Completion</a>
+            <a wire:navigate href="/sidekick/image" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Image Generation</a>
+            <a wire:navigate href="/sidekick/audio" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Audio Generation</a>
+            <a wire:navigate href="/sidekick/moderate" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Moderation</a>
+            <a wire:navigate href="/sidekick/transcribe" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Transcription</a>
+            <a wire:navigate href="/sidekick/embedding" class="block text-white hover:bg-gray-600 px-4 py-2 rounded">Embedding</a>
+        </nav>
+    </aside>
+
+    <!-- Chat Area Section -->
+    <main class="flex-1 flex flex-col">
+        {{ $slot }}
+    </main>
+</div>
+
+@stack('page-scripts')
+
+</body>
+</html>
+
diff --git a/stubs/livewire/resources/views/Components/sidekick-bot-message.blade.php b/stubs/livewire/resources/views/Components/sidekick-bot-message.blade.php
new file mode 100644
index 0000000..4f1fc99
--- /dev/null
+++ b/stubs/livewire/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>
diff --git a/stubs/livewire/resources/views/Components/sidekick-user-message.blade.php b/stubs/livewire/resources/views/Components/sidekick-user-message.blade.php
new file mode 100644
index 0000000..10dc6cd
--- /dev/null
+++ b/stubs/livewire/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>
diff --git a/stubs/livewire/resources/views/livewire/audio-generation.blade.php b/stubs/livewire/resources/views/livewire/audio-generation.blade.php
new file mode 100644
index 0000000..c3024d7
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/audio-generation.blade.php
@@ -0,0 +1,53 @@
+<div class="bg-slate-700 flex-1 flex flex-col">
+    <div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+        <div class="space-y-4">
+            <div class="flex items-start justify-center">
+                <div class="text-gray-300 w-3/4 text-center">
+                    <p class="font-bold text-3xl mb-20">&#129302; Audio Generation Sample</p>
+                    <p>Enter text below and click <b class="font-bold">Generate</b> to create an audio file.</p>
+
+                    @if($errors)
+                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-20"
+                             role="alert">
+                            <strong class="font-bold">Error!</strong>
+                            <span class="block sm:inline">{{ $errors }}</span>
+                        </div>
+                    @endif
+
+                    @if($audio)
+                        <div class="m-auto text-center w-1/3 pt-4">
+                            <audio id="audioPlayer" controls>
+                                <source src="data:audio/mpeg;base64,{{ $audio }}" type="audio/mpeg" />
+                            </audio>
+                        </div>
+
+                        <div class="m-auto text-center w-1/3 pt-4">
+                           <a href="{{ $savedFile }}"
+                              class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700"
+                              download>
+                               Download File
+                           </a>
+                        </div>
+                    @endif
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="submit">
+            <div class="flex gap-4">
+                @csrf
+                <input type="text"
+                       wire:model="prompt"
+                       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..."
+                       required>
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
+
diff --git a/stubs/livewire/resources/views/livewire/chat-room.blade.php b/stubs/livewire/resources/views/livewire/chat-room.blade.php
new file mode 100644
index 0000000..a600e86
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/chat-room.blade.php
@@ -0,0 +1,96 @@
+<div
+    x-data="{
+        startStreaming() {
+            this.streamResponse();
+        },
+        async streamResponse() {
+            const response = await fetch('/sidekick/chat/update', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                },
+                body: JSON.stringify({
+                    message: @js($this->newMessage),
+                    conversation_id: @js($this->conversationId),
+                    stream: true
+                })
+            });
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                const chunk = decoder.decode(value, { stream: true });
+                @this.dispatch('streamChunk', chunk);
+            }
+
+            @this.dispatch('endStreaming');
+        },
+        scrollToBottom() {
+            this.$nextTick(() => {
+                const scrollableDiv = this.$refs.scrollableDiv;
+                scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
+            });
+        },
+    }"
+    x-init="scrollToBottom()"
+    @start-streaming.window="startStreaming"
+    @message-added.window="$wire.$refresh().then(() => scrollToBottom())"
+    class="h-full flex flex-col"
+>
+    <!-- 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}}) -  Model: {{ $config['model'] ?? 'Auto-Select'}}</small></h1>
+
+        <div>
+            <a href="/sidekick/chat" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">New Chat</a>
+            <button wire:click="delete('{{$conversationId}}')" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">X</button>
+        </div>
+    </header>
+
+    <!-- Chat Messages Area -->
+    <div id="scrollableDiv" x-ref="scrollableDiv" class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+        <div id="response-container" class="space-y-4">
+            @if($messages->isEmpty())
+                <div class="bg-slate-700 text-center">
+                    <p class="text-gray-400">To start the conversation send a message</p>
+                </div>
+            @else
+                @foreach($messages as $message)
+                    @if(strtolower($message->role) === 'user')
+                        <x-sidekick-user-message>
+                            {!! $message->content !!}
+                        </x-sidekick-user-message>
+                    @else
+                        <x-sidekick-bot-message r="{{ $message->id ?? '' }}">
+                            {!! nl2br($message->content) !!}
+                        </x-sidekick-bot-message>
+                    @endif
+                @endforeach
+            @endif
+
+            @if($streamingResponse)
+                <div class="bg-slate-600 p-4 rounded-lg mb-4">
+                    <p class="text-white">{{ $streamingResponse }}</p>
+                </div>
+            @endif
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="sendMessage">
+            <div class="flex items-center justify-between gap-4">
+                <label class="inline-flex items-center cursor-pointer mt-2">
+                    <input wire:model="isStreaming" type="checkbox" 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 wire:model="newMessage" type="text" class="flex-1 rounded-l-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-600 text-black" placeholder="Type your message...">
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
diff --git a/stubs/livewire/resources/views/livewire/chat.blade.php b/stubs/livewire/resources/views/livewire/chat.blade.php
new file mode 100644
index 0000000..b692816
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/chat.blade.php
@@ -0,0 +1,46 @@
+<div class="bg-slate-700 flex-1 flex flex-col">
+    <div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+        <div class="space-y-4">
+            <div class="flex items-start justify-center">
+                <div class="text-gray-300 w-3/4 text-center">
+                    <p class="font-bold text-3xl mb-20">&#129302; Assistant</p>
+                    <p>To begin a conversation select a model and type a system prompt to start.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="submit">
+            <div class="flex gap-4">
+                @csrf
+                <select wire:model.change="config" 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='{"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='{"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='{"engine": "\\PapaRascalDev\\Sidekick\\Drivers\\Cohere", "model": ""}'>Cohere : Auto-Select</option>
+                    @endif
+                </select>
+                <input type="text"
+                       wire:model="prompt"
+                       id="prompt"
+                       name="prompt"
+                       class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600"
+                       value=""
+                       required>
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
diff --git a/stubs/livewire/resources/views/livewire/completion.blade.php b/stubs/livewire/resources/views/livewire/completion.blade.php
new file mode 100644
index 0000000..e04fec2
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/completion.blade.php
@@ -0,0 +1,46 @@
+<div class="bg-slate-700 flex-1 flex flex-col">
+    <div class="bg-slate-700 flex-1 p-6 overflow-y-auto" id="completion-form-container">
+        <div class="space-y-4">
+            <div class="flex items-start justify-center">
+                <div class="text-gray-300 w-3/4 text-center">
+                    <p class="font-bold text-3xl mb-20">&#129302; Completion Sample</p>
+                    <p>Type some text into the box below and click <strong class="font-bold">&#x23CE;</strong> to see the AI's response.</p>
+                </div>
+            </div>
+
+            <div class="flex items-start justify-center">
+                <div wire:loading>
+                    <div class="flex items-center justify-center bg-slate-700 text-center text-gray-400 mt-20">
+                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <div>Generating Response...</div>
+                    </div>
+                </div>
+                @if($response)
+                    <div id="response-container" class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4">
+                        <p class="text-gray-800 font-bold">Response</p>
+                        <p id="response-text" class="text-gray-800">{{ $response }}</p>
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="submit">
+            <div class="flex gap-4">
+                @csrf
+                <input type="text"
+                       wire:model="prompt"
+                       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..."
+                       required>
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
diff --git a/stubs/livewire/resources/views/livewire/embeddding.blade.php b/stubs/livewire/resources/views/livewire/embeddding.blade.php
new file mode 100644
index 0000000..bc71ae0
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/embeddding.blade.php
@@ -0,0 +1,46 @@
+<div class="bg-slate-700 flex-1 flex flex-col">
+    <div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+        <div class="space-y-4">
+            <div class="flex items-start justify-center">
+                <div class="text-gray-300 w-3/4 text-center">
+                    <p class="font-bold text-3xl mb-20">&#129302; Embedding Generation Sample</p>
+                    <p>Type some text into the box below and click <strong class="font-bold">&#x23CE;</strong> to see it's vector representation response.</p>
+                </div>
+            </div>
+
+            <div class="flex items-start justify-center">
+                <div wire:loading>
+                    <div class="flex items-center justify-center bg-slate-700 text-center text-gray-400 mt-20">
+                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <div>Generating Text...</div>
+                    </div>
+                </div>
+                @if(isset($response))
+                    <div class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4">
+                        <p class="text-gray-800 font-bold">Response</p>
+                        <textarea class="text-gray-800 bg-gray-200 w-full h-48">{{ json_encode($response['data'][0]['embedding']) }}</textarea>
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="submit">
+            <div class="flex gap-4">
+                @csrf
+                <input type="text"
+                       wire:model="prompt"
+                       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..."
+                       required>
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
diff --git a/stubs/livewire/resources/views/livewire/image-generation.blade.php b/stubs/livewire/resources/views/livewire/image-generation.blade.php
new file mode 100644
index 0000000..adfc0f4
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/image-generation.blade.php
@@ -0,0 +1,55 @@
+<div class="bg-slate-700 flex-1 flex flex-col">
+    <div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+        <div class="space-y-4">
+            <div class="flex items-start justify-center">
+                <div class="text-gray-300 w-3/4 text-center">
+                    <p class="font-bold text-3xl mb-20">&#129302; Image Generation Sample</p>
+                    <p>Describe the image you want in the text box below and click <b class="font-bold">&#x23CE;</b> to generate an image.</p>
+                    @if(isset($image))
+                        <img src="{!! $image !!}" alt="generated image" class="w-full pt-20"/>
+
+                        <div class="m-auto text-center w-1/3 pt-4">
+                            <a href="{{ $savedFile }}"
+                               class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700"
+                               download>
+                                Download File
+                            </a>
+                        </div>
+                    @endif
+                    @if($errors)
+                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-20"
+                             role="alert">
+                            <strong class="font-bold">Error!</strong>
+                            <span class="block sm:inline">{{ $errors }}</span>
+                        </div>
+                    @endif
+                    <div wire:loading>
+                        <div class="flex items-center justify-center bg-slate-700 text-center text-gray-400 mt-20">
+                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            <div>Generating Image...</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="submit">
+            <div class="flex gap-4">
+                @csrf
+                <input type="text"
+                       wire:model="prompt"
+                       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..."
+                       required>
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
diff --git a/stubs/livewire/resources/views/livewire/index.blade.php b/stubs/livewire/resources/views/livewire/index.blade.php
new file mode 100644
index 0000000..33c8aa2
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/index.blade.php
@@ -0,0 +1,13 @@
+<div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+    <div class="space-y-4">
+        <div class="flex items-start justify-center">
+            <div class="text-gray-300 w-3/4 text-center">
+                <h1 class="font-bold text-3xl">Hello!</h1>
+                <img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e3449a7-44de-4ce2-b384-cea763c0901e_500x500.heic"
+                     class="pt-20 m-auto"
+                     alt="Sidekick Robot" />
+                <p class="pt-20"><strong class="font-bold">Note:</strong> To use this playground you must have configured the .env with your <i>SIDEKICK_OPENAI_TOKEN</i>.</p>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/stubs/livewire/resources/views/livewire/moderation.blade.php b/stubs/livewire/resources/views/livewire/moderation.blade.php
new file mode 100644
index 0000000..601c693
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/moderation.blade.php
@@ -0,0 +1,58 @@
+<div class="bg-slate-700 flex-1 flex flex-col">
+    <div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+        <div class="space-y-4">
+            <div class="flex items-start justify-center">
+                <div class="text-gray-300 w-3/4 text-center">
+                    <p class="font-bold text-3xl mb-20">&#129302; Moderate Sample</p>
+                    <p>Type a dummy comment or post into the text box below and hit <strong class="font-bold">&#x23CE;</strong>. The AI will then review the content and send back a moderation response.</p>
+                </div>
+            </div>
+
+            <div class="flex items-start justify-center">
+                <div wire:loading>
+                    <div class="flex items-center justify-center bg-slate-700 text-center text-gray-400 mt-20">
+                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <div>Moderating Content...</div>
+                    </div>
+                </div>
+                @if(isset($response))
+                    <div class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4 text-black">
+                        @if (isset($response['error']))
+                            <p>An error occurred: {{ $response['error']['message'] }}</p>
+                        @elseif (!$response['results'][0]['flagged'])
+                            <p>The content is fine</p>
+                        @else
+                            <p>This content has been flagged due to the following categories:</p>
+                            <ul>
+                                @foreach($response['results'][0]['categories'] as $category => $value)
+                                    @if($value)
+                                        <li class="font-bold">{{ $category }}</li>
+                                    @endif
+                                @endforeach
+                            </ul>
+                        @endif
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="submit">
+            <div class="flex gap-4">
+                @csrf
+                <input type="text"
+                       wire:model="prompt"
+                       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..."
+                       required>
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
diff --git a/stubs/livewire/resources/views/livewire/transcription.blade.php b/stubs/livewire/resources/views/livewire/transcription.blade.php
new file mode 100644
index 0000000..d3964d5
--- /dev/null
+++ b/stubs/livewire/resources/views/livewire/transcription.blade.php
@@ -0,0 +1,47 @@
+<div class="bg-slate-700 flex-1 flex flex-col">
+    <div class="bg-slate-700 flex-1 p-6 overflow-y-auto">
+        <div class="space-y-4">
+            <div class="flex items-start justify-center">
+                <div class="text-gray-300 w-3/4 text-center">
+                    <p class="font-bold text-3xl mb-20">&#129302; Transcription Generation Sample</p>
+                    <p>Enter a URL to an audio file and click <b class="font-bold">&#x23CE;</b> to generate the transcription (audio to text).
+                        For convenience, Sidekick has added an example URL in case you don't know where to find one.</p>
+                </div>
+            </div>
+
+            <div class="flex items-start justify-center">
+                <div wire:loading>
+                    <div class="flex items-center justify-center bg-slate-700 text-center text-gray-400 mt-20">
+                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <div>Generating Text...</div>
+                    </div>
+                </div>
+                @if(isset($response))
+                    <div class="bg-gray-200 p-4 mt-20 rounded-lg w-3/4">
+                        <p class="text-gray-800 font-bold">Response</p>
+                        <p class="text-gray-800">{!! $response['text'] !!}</p>
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-slate-900 p-4">
+        <form wire:submit.prevent="submit">
+            <div class="flex gap-4">
+                @csrf
+                <input type="text"
+                       wire:model="prompt"
+                       id="prompt"
+                       name="prompt"
+                       class="flex-1 text-black border border-gray-300 rounded-md p-2 focus:outline-none focus:border-blue-600"
+                       value=""
+                       required>
+                <button type="submit" class="bg-blue-600 text-white px-4 py-2 ml-2 rounded-md hover:bg-blue-700">&#x23CE;</button>
+            </div>
+        </form>
+    </footer>
+</div>
diff --git a/stubs/livewire/routes/web.sidekick.php b/stubs/livewire/routes/web.sidekick.php
new file mode 100644
index 0000000..c48ae44
--- /dev/null
+++ b/stubs/livewire/routes/web.sidekick.php
@@ -0,0 +1,32 @@
+<?php
+
+use App\Livewire\Sidekick\AudioGeneration;
+use App\Livewire\Sidekick\Chat;
+use App\Livewire\Sidekick\ChatRoom;
+use App\Livewire\Sidekick\Completion;
+use App\Livewire\Sidekick\Embeddding;
+use App\Livewire\Sidekick\ImageGeneration;
+use App\Livewire\Sidekick\Index;
+use App\Livewire\Sidekick\Moderation;
+use App\Livewire\Sidekick\Transcription;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
+
+Route::get('/sidekick', Index::class);
+Route::get('/sidekick/chat', Chat::class);
+Route::get('/sidekick/completion', Completion::class);
+Route::get('/sidekick/audio', AudioGeneration::class);
+Route::get('/sidekick/image', ImageGeneration::class);
+Route::get('/sidekick/embedding', Embeddding::class);
+Route::get('/sidekick/moderate', Moderation::class);
+Route::get('/sidekick/transcribe', Transcription::class);
+
+Route::post('/sidekick/chat/update', function (Request $request) {
+    return sidekickConversation()
+        ->resume($request->get('conversation_id'))
+        ->sendMessage($request->get('message'), $request->get('stream'));
+});
+
+Route::get('/sidekick/chat/{id}', ChatRoom::class);
+
+