ok now to try and show the chat ui

LlmLaraHub · Mar 27, 2024 · 665fff4 · 665fff4
1 parent dcb0d8e
commit 665fff4
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 8 deletions.
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
@@ -2,12 +2,35 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Resources\ChatResource;
+use App\Http\Resources\CollectionResource;
+use App\Models\Chat;
 use App\Models\Collection;
 use Illuminate\Http\Request;
 
 class ChatController extends Controller
 {
-    public function store(Collection $collection) {
-
+    public function storeCollectionChat(Collection $collection) {
+        $chat = new Chat();
+        $chat->chatable_id = $collection->id;
+        $chat->chatable_type = Collection::class;
+        $chat->user_id = auth()->user()->id;
+        $chat->save();
+
+        request()->session()->flash('flash.banner', 'Chat created successfully!');
+
+        return to_route('chats.collection.show', [
+            'collection' => $collection->id,
+            'chat' => $chat->id,
+        ]);
+    }
+
+    public function showCollectionChat(Collection $collection, Chat $chat) {
+
+        return inertia('Collection/Chat', [
+            'collection' => new CollectionResource($collection),
+            'chat' => new ChatResource($chat),
+        ]);
+
     }
 }
diff --git a/app/Http/Controllers/CollectionController.php b/app/Http/Controllers/CollectionController.php
@@ -46,9 +46,7 @@ public function store()
 
     public function show(Collection $collection)
     {
-        $chatResource = Chat::query()
-            ->where('collection_id', $collection->id)
-            ->where("user_id", auth()->user()->id)
+        $chatResource = $collection->chats()->where("user_id", auth()->user()->id)
             ->latest('id')
             ->first();
 

diff --git a/app/Models/Collection.php b/app/Models/Collection.php
@@ -6,6 +6,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\MorphMany;
 
 /**
  * Class Project
@@ -37,4 +38,10 @@ public function documents(): HasMany
     {
         return $this->hasMany(Document::class);
     }
+
+
+    public function chats(): MorphMany
+    {
+        return $this->morphMany(Chat::class, 'chatable');
+    }
 }
diff --git a/resources/js/Pages/Collection/Chat.vue b/resources/js/Pages/Collection/Chat.vue
@@ -0,0 +1,58 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue';
+import Welcome from '@/Components/Welcome.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { computed, onMounted, ref } from 'vue';
+
+import { useDropzone } from "vue3-dropzone";
+import { router, useForm } from '@inertiajs/vue3';
+import FileUploader from './Components/FileUploader.vue';
+
+const props = defineProps({
+    collection: {
+        type: Object,
+        required: true,
+    },
+    chat: {
+        type: Object,
+    },
+});
+
+
+
+
+</script>
+
+<template>
+    <AppLayout title="Dashboard">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                Chat with {{ collection.data.name }}
+            </h2>
+        </template>
+
+        <div class="py-12">
+
+
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+
+
+                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+
+
+                    <!-- Top area -->
+
+                    <div class="border-b pb-5 px-3 py-4">
+                        <h3 class="text-base font-semibold leading-6 text-gray-900">{{ collection.data.name }}</h3>
+                        <p class="mt-2 max-w-4xl text-sm text-gray-500">
+                            {{ collection.data.description }}
+                        </p>
+                    </div>
+                    <div class="p-10">
+                        Chat widget here
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/Pages/Collection/Components/CreateChat.vue b/resources/js/Pages/Collection/Components/CreateChat.vue
@@ -0,0 +1,37 @@
+<template>
+    <SecondaryButton 
+    type="button"
+    @click="start"
+    class="flex justify-between items-center gap-4">
+        <ChatBubbleLeftIcon class="h-5 w-5"></ChatBubbleLeftIcon>
+        start a new chat</SecondaryButton>
+</template>
+
+<script setup>
+import { useForm } from '@inertiajs/vue3';
+import { useToast } from 'vue-toastification';
+import SecondaryButton from "@/Components/SecondaryButton.vue";
+import { ChatBubbleLeftIcon } from '@heroicons/vue/24/outline';
+
+const toast = useToast();
+
+const props = defineProps({
+    collection: {
+        type: Object,
+        required: true,
+    },
+})
+
+const form = useForm({});
+
+
+const start = () => {
+    form.post(route('chats.collection.store', {
+        collection: props.collection.id
+    }), {
+        onError: () => {
+            toast.error('Failed to start chat :(');
+        },
+    });
+}
+</script>
diff --git a/resources/js/Pages/Collection/Show.vue b/resources/js/Pages/Collection/Show.vue
@@ -7,6 +7,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useDropzone } from "vue3-dropzone";
 import { router, useForm } from '@inertiajs/vue3';
 import FileUploader from './Components/FileUploader.vue';
+import CreateChat from './Components/CreateChat.vue';
 
 const props = defineProps({
     collection: {
@@ -16,6 +17,9 @@ const props = defineProps({
     documents: {
         type: Object,
     },
+    chat: {
+        type: Object,
+    },
 });
 
 
@@ -43,7 +47,12 @@ const props = defineProps({
                     <!-- Top area -->
 
                     <div class="border-b pb-5 px-3 py-4">
-                        <h3 class="text-base font-semibold leading-6 text-gray-900">{{ collection.data.name }}</h3>
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-base font-semibold leading-6 text-gray-900">{{ collection.data.name }}</h3>
+                            <CreateChat 
+                            v-if="!chat?.data?.id"
+                            :collection="collection.data" />
+                        </div>
                         <p class="mt-2 max-w-4xl text-sm text-gray-500">
                             {{ collection.data.description }}
                         </p>

diff --git a/routes/web.php b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\ChatController;
 use App\Http\Controllers\CollectionController;
 use App\Http\Controllers\ExampleChatBotController;
 use App\Http\Controllers\ExampleController;
@@ -38,6 +39,11 @@
         Route::any('/collections/{collection}/upload', 'filesUpload')->name('collections.upload');
     });
 
+    Route::controller(ChatController::class)->group(function () {
+        Route::post('/collections/{collection}/chats', 'storeCollectionChat')->name('chats.collection.store');
+        Route::get('/collections/{collection}/chats/{chat}', 'showCollectionChat')->name('chats.collection.show');
+    });
+
 });
 Route::controller(ExampleController::class)->group(function () {
     Route::get('/examples/charts', 'charts')->name('example.charts');

diff --git a/tests/Feature/Http/Controllers/ChatControllerTest.php b/tests/Feature/Http/Controllers/ChatControllerTest.php
@@ -2,6 +2,8 @@
 
 namespace Tests\Feature\Http\Controllers;
 
+use App\Models\Collection;
+use App\Models\User;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Foundation\Testing\WithFaker;
 use Tests\TestCase;
@@ -13,6 +15,13 @@ class ChatControllerTest extends TestCase
      */
     public function test_can_create_chat_and_redirect(): void
     {
-
+        $user = User::factory()->create();
+
+        $collection = Collection::factory()->create();
+        $this->assertDatabaseCount('chats', 0);
+        $this->actingAs($user)->post(route('chats.collection.store', [
+            'collection' => $collection->id,
+            ]))->assertRedirect();
+        $this->assertDatabaseCount('chats', 1);
     }
 }
diff --git a/tests/Feature/Models/ChatTest.php b/tests/Feature/Models/ChatTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Feature\Models;
 
 use App\Models\Chat;
+use App\Models\Collection;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Tests\TestCase;
 
@@ -15,10 +16,14 @@ class ChatTest extends TestCase
      */
     public function test_factory(): void
     {
-        $model = Chat::factory()->create();
+        $collection = Collection::factory()->create();
+        $model = Chat::factory()->create([
+            'chatable_id' => $collection->id,
+        ]);
         $this->assertNotNull($model->user_id);
         $this->assertNotNull($model->user->id);
         $this->assertNotNull($model->chatable_id);
         $this->assertNotNull($model->chatable->id);
+        $this->assertNotNull($collection->chats()->first()->id);
     }
 }