minor fixes

alnutile · Jun 10, 2023 · 71ead8d · 71ead8d
1 parent 78d1e92
commit 71ead8d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/app/Http/Controllers/ProjectController.php b/app/Http/Controllers/ProjectController.php
@@ -93,9 +93,17 @@ public function show(Project $project)
         $sourceTypes = SourceEnum::toArray();
         $transformerTypes = TransformerEnum::toArray('transformers');
         $outboundTypes = OutboundEnum::toArray('outbounds');
+        $messages = Message::query()
+            ->select('id', 'content', 'created_at', 'user_id', 'project_id', 'role as type')
+            ->where('project_id', $project->id)
+            ->where('user_id', auth()->user()->id)
+            ->where('role', '!=', 'system')
+            ->orderBy('id', 'ASC')
+            ->get();
 
         return Inertia::render('Projects/Show', [
             'source_types' => $sourceTypes,
+            'messages' => $messages,
             'transformer_types' => $transformerTypes,
             'outbound_types' => $outboundTypes,
             'project' => $project->load('documents', 'sources', 'transformers', 'outbounds')

diff --git a/artisan b/artisan
diff --git a/resources/js/Pages/Projects/Show.vue b/resources/js/Pages/Projects/Show.vue
@@ -55,12 +55,15 @@
                         </div>
                     </div>
 
-                    <div class="max-w-7xl mt-8 bg-slate-800 text-gray-200 p-4 overflow-auto flex-col  mx-auto text-xl min-h-[200px] ring ring-slate-600">
+                    <div 
+                    ref="scrollingDiv"
+                    class="max-w-7xl mt-8 bg-slate-800 text-gray-200 p-4 overflow-auto flex-col  mx-auto text-xl min-h-[200px] ring ring-slate-600 first-letter:first-line:#header
+                    max-h-[600px]">
                         <div v-if="response.length === 0" class="text-xl text-gray-400">
                             Responses will show here
                         </div>
                         <span v-else v-for="(message, index) in response" :key="index" class="flex items-center gap-4 w-full">
-                            <span v-if="message.type === 'system'" class="flex w-full justify-start mb-1 mt-2" >
+                            <span v-if="message.type === 'system' || message.type === 'assistant'" class="flex w-full justify-start mb-1 mt-2" >
                                 {{ message.content }}
                             </span>
                             <span v-else class="flex w-full justify-end mt-1 mb-1 ">
@@ -102,7 +105,7 @@ import PrimaryButton from "@/Components/PrimaryButton.vue";
 const toast = useToast();
 import pickBy from 'lodash/pickBy'
 import { MagnifyingGlassIcon} from "@heroicons/vue/24/outline";
-import {computed, onMounted, ref} from "vue";
+import {computed, nextTick, onMounted, ref} from "vue";
 import SourcesToChooseFrom from "./Components/SourcesToChooseFrom.vue";
 import TransformersToChooseFrom from "@/Pages/Transformers/Partials/TransformersToChooseFrom.vue";
 import OutboundsToChooseFrom from "@/Pages/Outbounds/Partials/OutboundsToChooseFrom.vue";
@@ -112,6 +115,7 @@ import { CheckCircleIcon } from '@heroicons/vue/20/solid'
 const props = defineProps({
     project: Object,
     outbound_types: Object,
+    messages: Array,
     source_types: Object,
     transformer_types: Object,
 })
@@ -127,14 +131,22 @@ const response = ref([]);
 
 const sourceFilters = ref(new Set())
 
+const scrollingDiv = ref(null)
+
 onMounted(() => {
     Echo.private(`projects.${props.project.id}`)
         .listen('.chat', (e) => {
             response.value.push({
                 type: "system",
                 content: e.response
             })
+            scrollToBottom()
         });
+
+    if(props.messages.length > 0) {
+        response.value = props.messages
+        scrollToBottom()
+    }
 })
 
 const toggleFilter = (source) => {
@@ -146,6 +158,12 @@ const toggleFilter = (source) => {
         }
 }
 
+const scrollToBottom = () => {
+      nextTick(() => {
+        scrollingDiv.value.scrollTop = scrollingDiv.value.scrollHeight;
+      });
+    }
+
 const submit = () => {
     form.processing = true;
     form.filters = {