add metadata to the ui

alnutile · Aug 20, 2023 · 40e4065 · 40e4065
1 parent 151d4e8
commit 40e4065
Show file tree

Hide file tree

Showing 27 changed files with 518 additions and 24 deletions.
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
@@ -2,12 +2,18 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Resources\MessageResource;
+use App\Models\Message;
+
 class HomeController extends Controller
 {
     public function __invoke()
     {
         return inertia('Dashboard/Show', [
-            'messages' => [],
+            'messages' => MessageResource::collection(Message::query()
+                ->where('user_id', auth()->user()->id)
+                ->latest()
+                ->get()),
         ]);
     }
 }
diff --git a/app/Http/Controllers/MetaDataController.php b/app/Http/Controllers/MetaDataController.php
@@ -2,14 +2,54 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Resources\MetaDataResource;
+use App\Models\MetaData;
 use Illuminate\Http\Request;
 
 class MetaDataController extends Controller
 {
 
     public function index() {
         return inertia("MetaData/Index", [
-            'meta_data' => auth()->user()->meta_data
+            'meta_data' => MetaDataResource::collection(auth()->user()->meta_data)
         ]);
     }
+
+    public function store() {
+        $validated = request()->validate([
+            'label' => ['required'],
+            'content' => ['required'],
+        ]);
+
+        $validated['user_id'] = auth()->user()->id;
+
+        MetaData::create($validated);
+
+        request()->session()->flash('flash.banner', 'Created 🏄');
+        return to_route("meta_data.index");
+    }
+
+    public function edit(MetaData $meta_data) {
+        return inertia("MetaData/Edit", [
+            'meta_data' => new MetaDataResource($meta_data)
+        ]);
+    }
+
+    public function update(MetaData $meta_data) {
+        $validated = request()->validate([
+            'label' => ['required'],
+            'content' => ['required'],
+        ]);
+
+        $validated['user_id'] = auth()->user()->id;
+
+        $meta_data->update($validated);
+
+        request()->session()->flash('flash.banner', 'Updated 🌮');
+        return to_route("meta_data.index");
+    }
+
+    public function create() {
+        return inertia("MetaData/Create");
+    }
 }
diff --git a/app/Http/Resources/MetaDataResource.php b/app/Http/Resources/MetaDataResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class MetaDataResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}
diff --git a/app/Models/MedaData.php → app/Models/MetaData.php b/app/Models/MedaData.php → app/Models/MetaData.php
@@ -13,7 +13,7 @@
  * @property bool $active
  * @property User $user
  */
-class MedaData extends Model
+class MetaData extends Model
 {
     use HasFactory;
 

diff --git a/app/Models/User.php b/app/Models/User.php
@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
@@ -19,6 +20,7 @@
  * @property string $name
  * @property string $password
  * @property string $email
+ * @property Collection $meta_data
  */
 class User extends Authenticatable
 {

diff --git a/config/copy.php b/config/copy.php
@@ -4,4 +4,7 @@
     'messages' => [
         'create_info' => 'Start your thread. Then when you click save the LLM will start to reply to you.',
     ],
+    'meta_data' => [
+        'create_info' => 'Here you can add data about yourself, social links, sites etc that you want to add to messages you send the LLM assistant',
+    ],
 ];
diff --git a/database/factories/MedaDataFactory.php → database/factories/MetaDataFactory.php b/database/factories/MedaDataFactory.php → database/factories/MetaDataFactory.php
@@ -6,9 +6,9 @@
 use Illuminate\Database\Eloquent\Factories\Factory;
 
 /**
- * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\MedaData>
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\MetaData>
  */
-class MedaDataFactory extends Factory
+class MetaDataFactory extends Factory
 {
     /**
      * Define the model's default state.

diff --git a/database/migrations/2023_08_20_134523_create_meda_data_table.php b/database/migrations/2023_08_20_134523_create_meda_data_table.php
@@ -12,7 +12,7 @@
      */
     public function up(): void
     {
-        Schema::create('meda_data', function (Blueprint $table) {
+        Schema::create('meta_data', function (Blueprint $table) {
             $table->id();
             $table->foreignIdFor(User::class);
             $table->string("label");
@@ -28,6 +28,6 @@ public function up(): void
      */
     public function down(): void
     {
-        Schema::dropIfExists('meda_data');
+        Schema::dropIfExists('meta_data');
     }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
         "@headlessui/vue": "^1.7.13",
         "@heroicons/vue": "^2.0.17",
         "daisyui": "^2.51.4",
+        "lodash": "^4.17.21",
         "vue-media-upload": "^2.1.1",
         "vue-toastification": "^2.0.0-rc.5"
     }

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -5,3 +5,7 @@
 [x-cloak] {
     display: none;
 }
+
+::selection {
+    @apply bg-pink-500 text-white;
+}
diff --git a/resources/js/Components/SecondaryButton.vue b/resources/js/Components/SecondaryButton.vue
@@ -8,7 +8,8 @@ defineProps({
 </script>
 
 <template>
-    <button :type="type" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150">
+    <button :type="type"
+            class="inline-flex items-center px-4 py-2 bg-pink-500 border border-pink-900 font-semibold text-xs text-white uppercase tracking-widest shadow-sm hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150">
         <slot />
     </button>
 </template>
diff --git a/resources/js/Components/SecondaryButtonLink.vue b/resources/js/Components/SecondaryButtonLink.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { Link } from "@inertiajs/vue3"
+defineProps({
+    href: {
+        type: String,
+    },
+});
+</script>
+
+<template>
+    <Link :href="href"
+            class="inline-flex items-center px-4 py-2 bg-pink-500 border border-pink-900 font-semibold text-xs text-white uppercase tracking-widest shadow-sm hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150">
+        <slot />
+    </Link>
+</template>
diff --git a/resources/js/Components/Select.vue b/resources/js/Components/Select.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps({
+    label: {
+      type: String,
+      default: "Choose One"
+    },
+    modelValue: String,
+    options: Object
+});
+
+defineEmits(['update:modelValue']);
+
+
+</script>
+
+<template>
+
+    <select
+        class="bg-input focus:border-ring ring-1 ring-ring"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+    >
+        <option disabled value="">{{label}}</option>
+        <option v-for="option in options"
+                :key="option.id"
+        :value="option.id">{{option.name}}</option>
+    </select>
+
+
+</template>
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
@@ -21,7 +21,12 @@ defineExpose({ focus: () => input.value.focus() });
 <template>
     <input
         ref="input"
-        class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
+        class="border-gray-700
+        text-black
+        dark:border-gray-200 dark:bg-gray-300
+        dark:text-gray-800 focus:border-indigo-500
+        dark:focus:border-indigo-600 focus:ring-indigo-500
+        dark:focus:ring-indigo-600 rounded-md shadow-sm"
         :value="modelValue"
         @input="$emit('update:modelValue', $event.target.value)"
     >

diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
@@ -51,6 +51,9 @@ const logout = () => {
                                 <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
                                     Dashboard
                                 </NavLink>
+                                <NavLink :href="route('meta_data.index')" :active="route().current('meta_data.index')">
+                                    MetaData
+                                </NavLink>
                             </div>
                         </div>
 
@@ -196,6 +199,9 @@ const logout = () => {
                         <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
                             Dashboard
                         </ResponsiveNavLink>
+                        <ResponsiveNavLink :href="route('meta_data.index')" :active="route().current('meta_data.index')">
+                            MetaData
+                        </ResponsiveNavLink>
                     </div>
 
                     <!-- Responsive Settings Options -->

diff --git a/resources/js/Pages/Dashboard/Show.vue b/resources/js/Pages/Dashboard/Show.vue
@@ -24,7 +24,7 @@
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
                             </svg>
 
-                            <h3 class="mt-2 text-sm font-semibold text-gray-900">No projects</h3>
+                            <h3 class="mt-2 text-sm font-semibold text-gray-900">No Messages</h3>
                             <p class="mt-1 text-sm text-gray-500">Start a new topic/thread with the assistant </p>
                             <div class="mt-6">
                                 <Link :href="route('messages.create')" type="button" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
@@ -34,8 +34,10 @@
                             </div>
                         </div>
                     </div>
-                    <div v-else>
-                        Your messages
+                    <div class="mt-4" v-else>
+                        <div v-for="message in messages.data" :key="message.id">
+                            <Card :message="message" truncate="true"></Card>
+                        </div>
                     </div>
                 </div>
 
@@ -50,6 +52,7 @@
 
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
+import Card from "@/Pages/Messages/Components/Card.vue"
 const props = defineProps({
     messages: Object
 })

diff --git a/resources/js/Pages/Messages/Components/Card.vue b/resources/js/Pages/Messages/Components/Card.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="dark:border-gray-600 border-gray-400 border p-4 rounded">
+        <div class="mb-4">
+            {{ messageContent }}
+        </div>
+
+        <div class="flex justify-end gap-2 items-center">
+            <div>{{ message.created_at}}</div>
+            <SecondaryButton :href="route('messages.show', {
+                message: message.id
+            })">view</SecondaryButton>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import SecondaryButton from "@/Components/SecondaryButtonLink.vue";
+import {computed} from "vue";
+
+const props = defineProps({
+    message: Object,
+    truncate: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const messageContent = computed(() => {
+    if(props.truncate) {
+        return _.truncate(props.message.content, {
+            length: 350
+        })
+    }
+    return props.message.content;
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/Pages/Messages/Show.vue b/resources/js/Pages/Messages/Show.vue
@@ -13,15 +13,7 @@
                     <Copy section="messages" copy="create_info"/>
                 </div>
                 <div class="-mx-4 px-4 py-2 shadow-sm ring-1 ring-gray-900/5 sm:mx-0 sm:rounded-lg sm:px-8 sm:pb-14 lg:col-span-2 lg:row-span-2 lg:row-end-2 xl:px-16 xl:pb-20 xl:pt-2">
-                    <div class="dark:border-gray-600 border-gray-400 border p-4 rounded">
-                        <div>
-                            {{ message.data.content }}
-                        </div>
-
-                        <div class="flex justify-end gap-2 items-center">
-                            <div>{{ message.data.created_at}}</div>
-                        </div>
-                    </div>
+                    <Card :message="message.data"/>
                 </div>
             </div>
         </div>
@@ -37,6 +29,7 @@ import InputLabel from "@/Components/InputLabel.vue";
 import TextArea from "@/Components/TextArea.vue";
 import {useForm} from "@inertiajs/vue3";
 import InputError from "@/Components/InputError.vue";
+import Card from "./Components/Card.vue";
 
 const props = defineProps({
     message: Object