edit and change driver easily

app/Http/Controllers/CollectionController.php

@@ -45,6 +45,26 @@ public function store()
         return to_route('collections.show', $collection);
     }
 
+    public function update(Collection $collection)
+    {
+
+        $validated = request()->validate([
+            'name' => 'required',
+            'description' => 'required',
+            'driver' => 'required',
+            'embedding_driver' => 'required',
+        ]);
+
+        $collection->update($validated);
+        /**
+         * Make and then reditect to the view page
+         */
+        request()->session()->flash('flash.banner', 'Collection updated successfully!');
+
+        return to_route('collections.show', $collection);
+    }
+
+
     public function show(Collection $collection)
     {
         $chatResource = $collection->chats()->where('user_id', auth()->user()->id)

resources/js/Components/Labels.vue

@@ -0,0 +1,10 @@
+<template>
+    <span class="rounded-md bg-indigo-500 text-indigo-200 px-2 py-2 ">
+        <span class="font-bold"><slot name="title"></slot>: </span>
+        <slot></slot>
+    </span>
+</template>
+<script setup>
+
+
+</script>

resources/js/Pages/Collection/Components/EmbeddingType.vue

@@ -55,8 +55,15 @@
     { active: false, key: "mock", title: 'Gemini', description: 'This will work with the Gemini Api', current: false },
     { active: true, key: "mock", title: 'Claude using Vonage', description: 'This will work with the Claude Api', current: false },
   ]
-  
-  const selected = ref(publishingOptions[0])
+  const props = defineProps({
+    default: {
+      type: String,
+      default: 'mock'
+    }
+  })
+
+  const selected = ref(publishingOptions
+    .find(option => option.key === props.default) || publishingOptions[0])
 
   watch(selected, (value) => {
     console.log("emit " , value)

resources/js/Pages/Collection/Components/LlmType.vue

@@ -55,8 +55,16 @@
     { active: false, key: "mock", title: 'Gemini', description: 'This will work with the Gemini Api', current: false },
     
   ]
+
+  const props = defineProps({
+    default: {
+      type: String,
+      default: 'mock'
+    }
+  })
   
-  const selected = ref(publishingOptions[0])
+  const selected = ref(publishingOptions
+    .find(option => option.key === props.default) || publishingOptions[0])
 
   watch(selected, (value) => {
     console.log("emit " , value)

resources/js/Pages/Collection/Components/ResourceForm.vue

@@ -13,11 +13,16 @@
         </div>
         <div class="col-span-6 sm:col-span-6">
             <div>Choose the system to Interact with the data</div>
-            <LlmType @typeChosen="typeChosen" />
+            <LlmType
+            :default="modelValue.driver"
+            @typeChosen="typeChosen" />
         </div>
         <div class="col-span-6 sm:col-span-6">
             <div>Choose the system to Embed the data</div>
-            <EmbeddingType @embeddingTypeChosen="embeddingTypeChosen" />
+            <EmbeddingType 
+
+            :default="modelValue.embedding_driver"
+            @embeddingTypeChosen="embeddingTypeChosen" />
         </div>
     </div>
 </template>

resources/js/Pages/Collection/Edit.vue

@@ -0,0 +1,100 @@
+<template>
+    <TransitionRoot as="template" :show="open">
+      <Dialog as="div" class="relative z-10" @close="open = false">
+        <div class="fixed inset-0" />
+
+        <div class="fixed inset-0 overflow-hidden">
+          <div class="absolute inset-0 overflow-hidden">
+            <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+              <TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700" enter-from="translate-x-full" enter-to="translate-x-0" leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0" leave-to="translate-x-full">
+                <DialogPanel class="pointer-events-auto w-screen max-w-2xl">
+                  <div class="flex h-full flex-col overflow-y-scroll
+                  text-gray-200 dark:text-gray-400
+                  bg-white  border-b border-gray-100 dark:border-gray-700 py-6 shadow-xl">
+                    <div class="px-4 sm:px-6">
+                      <div class="flex items-start justify-between">
+                        <DialogTitle class="text-base font-semibold leading-6">Create your Collection so you can start adding data to it</DialogTitle>
+                        <div class="ml-3 flex h-7 items-center">
+                          <button 
+                          type="button" class="relative rounded-md bg-white   focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" 
+                          @click="closeSlideOut()">
+                            <span class="absolute -inset-2.5" />
+                            <span class="sr-only">Close panel</span>
+                            <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="relative mt-6 flex-1 px-4 sm:px-6">
+                      <form @submit.prevent="submit()">
+                        <ResourceForm v-model="form" />
+
+                        <div class="mt-8 flex justify-between">
+
+                          <PrimaryButton type="submit" class="ms-3">
+                            Save
+                          </PrimaryButton>
+                          <SecondaryButton type="button" @click="closeSlideOut()">
+                            Cancel
+                          </SecondaryButton>
+                        </div>
+                        </form>
+                    </div>
+                  </div>
+                </DialogPanel>
+              </TransitionChild>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </template>
+
+
+<script setup>
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import ResourceForm from './Components/ResourceForm.vue';
+
+const props = defineProps({
+    collection: Object,
+    open: Boolean,
+});
+
+const emit = defineEmits(['closing'])
+
+const closeSlideOut = () => {
+    emit('closing')
+}
+
+const form = useForm({
+  name: props.collection.name,
+  driver: props.collection.driver,
+  embedding_driver: props.collection.embedding_driver,
+  description: props.collection.description,
+})
+
+onMounted(() => {
+    form.reset()
+    console.log(props.collection)
+})
+
+
+const submit = () => {
+    form.put(route('collections.update', {
+        collection: props.collection.id
+    }), {
+        onSuccess: () => {
+            closeSlideOut()
+        }
+    })
+}
+
+</script>

resources/js/Pages/Collection/Index.vue

@@ -4,6 +4,7 @@ import Welcome from '@/Components/Welcome.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import CreateCollection from './Create.vue';
+import EditCollection from './Edit.vue';
 import { ref } from 'vue';
 import PrimaryButtonLink from '@/Components/PrimaryButtonLink.vue';
 
@@ -17,10 +18,23 @@ const props = defineProps({
 
 const showCreateCollection = ref(false);
 
+const showEditCollection = ref(false);
+
+const collectionToEdit = ref({});
+
 const closeCreateCollectionSlideOut = () => {
     showCreateCollection.value = false;
 };
 
+const showEditCollectionSlideOut = (collection) => {
+    collectionToEdit.value = collection;
+    showEditCollection.value = true;
+};
+const closeEditCollectionSlideOut = () => {
+    collectionToEdit.value = {};
+    showEditCollection.value = false;
+};
+
 
 </script>
 
@@ -55,7 +69,10 @@ const closeCreateCollectionSlideOut = () => {
                                                 </PrimaryButton>
                                             </div>
                                         </div>
-                                        <div v-else v-for="collectionItem in collections.data" :key="collectionItem.id">
+                                        <div 
+
+                                        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg p-4 bg-white mb-4"
+                                        v-else v-for="collectionItem in collections.data" :key="collectionItem.id">
                                             <div>
                                                <div class="font-bold text-lg text-gray-500">
                                                 {{  collectionItem.name }}
@@ -81,10 +98,16 @@ const closeCreateCollectionSlideOut = () => {
                                                     </span>
                                                </div>
                                             </div>
-                                            <div class="flex justify-end">
+                                            <div class="flex justify-end gap-2 mt-4">
                                                 <PrimaryButtonLink :href="route('collections.show', {
                                                     collection: collectionItem.id
                                                 })">view</PrimaryButtonLink>
+
+                                                <SecondaryButton
+                                                type="button"
+                                                @click="showEditCollectionSlideOut(collectionItem)">
+                                                    Edit
+                                                </SecondaryButton>
                                             </div>
                                         </div>
                                     </div>
@@ -96,5 +119,8 @@ const closeCreateCollectionSlideOut = () => {
             </div>
         </div>
         <CreateCollection :open="showCreateCollection" @closing="closeCreateCollectionSlideOut"/>
+        <EditCollection v-if="collectionToEdit?.id"
+        :collection="collectionToEdit"
+        :open="showEditCollection" @closing="closeEditCollectionSlideOut"/>
     </AppLayout>
 </template>

resources/js/Pages/Collection/Show.vue

@@ -3,11 +3,14 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import Welcome from '@/Components/Welcome.vue';
 import SecondaryLink from '@/Components/SecondaryLink.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { computed, onMounted, ref } from 'vue';
 
+import EditCollection from './Edit.vue';
 import { useDropzone } from "vue3-dropzone";
 import { router, useForm, Link } from '@inertiajs/vue3';
 import FileUploader from './Components/FileUploader.vue';
+import Label from '@/Components/Labels.vue';
 import CreateChat from './Components/CreateChat.vue';
 import { ChatBubbleLeftIcon } from '@heroicons/vue/24/outline';
 
@@ -24,6 +27,15 @@ const props = defineProps({
     },
 });
 
+const showEditCollection = ref(false);
+
+const showEditCollectionSlideOut = () => {
+    showEditCollection.value = true;
+};
+const closeEditCollectionSlideOut = () => {
+    showEditCollection.value = false;
+};
+
 
 onMounted(() => {
     Echo.private(`collection.${props.collection.data.id}`)
@@ -57,7 +69,8 @@ onMounted(() => {
                     <div class="border-b pb-5 px-3 py-4">
                         <div class="flex justify-between items-center">
                             <h3 class="text-base font-semibold leading-6 text-gray-900">{{ collection.data.name }}</h3>
-                            <CreateChat 
+                            <div class="flex justify-end gap-2 items-center">
+                                <CreateChat 
                             v-if="!chat?.data?.id"
                             :collection="collection.data" />
                             <div v-else>
@@ -69,11 +82,29 @@ onMounted(() => {
                                 })">
                                 <ChatBubbleLeftIcon class="h-5 w-5"></ChatBubbleLeftIcon>
                                 Continue Chatting</SecondaryLink>
+
                             </div>
+                            <PrimaryButton type="button" @click="showEditCollectionSlideOut">Edit</PrimaryButton>
+                            </div>
+
                         </div>
                         <p class="mt-2 max-w-4xl text-sm text-gray-500">
                             {{ collection.data.description }}
                         </p>
+                        <div class="flex justify-center gap-2 items-center">
+                            <Label>
+                                <template #title>
+                                    Chat LLm 
+                                </template>
+                                {{ collection.data.driver }}
+                            </Label>
+                            <Label>
+                                <template #title>
+                                    Embedding LLm 
+                                </template>
+                                {{ collection.data.embedding_driver }}
+                            </Label>
+                        </div>
                     </div>
                     <FileUploader :collection="collection" />
 
@@ -159,5 +190,8 @@ onMounted(() => {
                 </div>
             </div>
         </div>
+        <EditCollection
+        :collection="collection.data"
+        :open="showEditCollection" @closing="closeEditCollectionSlideOut"/>
     </AppLayout>
 </template>

routes/web.php

@@ -35,6 +35,7 @@
     Route::controller(CollectionController::class)->group(function () {
         Route::get('/collections', 'index')->name('collections.index');
         Route::post('/collections', 'store')->name('collections.store');
+        Route::put('/collections/{collection}', 'update')->name('collections.update');
         Route::get('/collections/{collection}', 'show')->name('collections.show');
         Route::any('/collections/{collection}/upload', 'filesUpload')->name('collections.upload');
     });

tests/Feature/Http/Controllers/CollectionControllerTest.php

@@ -53,6 +53,27 @@ public function test_store(): void
 
     }
 
+    public function test_update(): void
+    {
+        $user = $this->createUserWithCurrentTeam();
+        $this->actingAs($user);
+        $collection = Collection::factory()->create([
+            'team_id' => $user->currentTeam->id,
+        ]);
+
+        $this->assertDatabaseCount('collections', 1);
+        $response = $this->put(route('collections.update', $collection), [
+            'name' => 'Test',
+            'driver' => 'mock',
+            'embedding_driver' => DriversEnum::Claude->value,
+            'description' => 'Test Description',
+        ])->assertStatus(302);
+        $this->assertDatabaseCount('collections', 1);
+
+        $this->assertEquals(DriversEnum::Claude, $collection->refresh()->embedding_driver);
+
+    }
+
     public function test_file_upload()
     {
         Queue::fake();