fixed the npm test

Author: codejutsu1

resources/js/pages/chats/Details.vue

@@ -15,19 +15,17 @@ import {
   InputGroupButton,
   InputGroupTextarea,
 } from '@/components/ui/input-group';
-import { Badge } from '@/components/ui/badge'
 import AppLayout from '@/layouts/AppLayout.vue';
 import { dashboard, chat } from '@/routes';
 import { show } from '@/actions/App/Http/Controllers/FileController';
 import { type BreadcrumbItem } from '@/types';
-import { Check, Circle, Dot } from 'lucide-vue-next';
 import { Button } from '@/components/ui/button';
 import { Head, Form, Link } from '@inertiajs/vue3';
 import { Ellipsis, Trash, ArrowUpIcon } from "lucide-vue-next";
 import { ScrollArea } from '@/components/ui/scroll-area';
 import store from '@/actions/App/Http/Controllers/FileChatStoreController';
 import chatDetails from '@/actions/App/Http/Controllers/FileChatDetailsController';
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, onMounted, nextTick, watch } from 'vue';
 
 const props = defineProps<{
     file: any;
@@ -36,8 +34,6 @@ const props = defineProps<{
     conversations: any;
 }>();
 
-const emit = defineEmits(['addMessage']);
-
 const disabledButton = ref(false);
 
 const scrollAreaRef = ref<{ $el: HTMLElement } | null>(null);
@@ -50,6 +46,12 @@ if(props.messages.data.length > 0 && props.messages.data[props.messages.data.len
     disabledButton.value = true;
 }
 
+if(props.messages.data.length == 1 && props.messages.data[props.messages.data.length - 1].participant === 'user') {
+    isTyping.value = true;
+}
+
+const localMessages = ref(props.messages.data);
+
 const isReady = ref(true);
 
 const breadcrumbs: BreadcrumbItem[] = [
@@ -81,14 +83,16 @@ const handleError = () => {
     console.log('error');
 }
 
-
+const addNewMessage = (message: any) => {
+    localMessages.value.push(message);
+}
 
 onMounted(() => {
     window.Echo.private(`message-created.${props.conversation.data.id}`)
         .listen('MessageCreated', async (e) => {
             disabledButton.value = false;
             isTyping.value = false;
-            props.messages.data.push(e.message);
+            addNewMessage(e.message);
             await nextTick();
                 scrollToBottom();
         });
@@ -99,6 +103,14 @@ onMounted(async () => {
     await scrollToBottom();
 });
 
+watch(
+  () => props.messages.data,
+  (newMessagesData) => {
+    localMessages.value = newMessagesData;
+  },
+  { deep: true }
+);
+
 </script>
 
 
@@ -116,7 +128,7 @@ onMounted(async () => {
                             <ScrollArea v-show="isReady" ref="scrollAreaRef" class="w-full rounded-md h-[600px] md:h-[350px] p-2 mb-2">
                                 <div class="space-y-2">
                                     <div 
-                                        v-for="message in messages.data" 
+                                        v-for="message in localMessages" 
                                         :key="message.id" class="flex" 
                                         :class="message.participant === 'user' ? 'justify-end' : 'justify-start'"
                                     >
@@ -126,7 +138,7 @@ onMounted(async () => {
                                             </p>
                                         </div>
                                     </div>
-                                    <div v-if="isTyping" class="relative flex items-center space-x-2 px-2">
+                                    <div v-if="isTyping" class="relative flex items-center space-x-2 px-2 mb-4">
                                         <span class="flex h-3 w-3">
                                             <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-blue-400 opacity-75"></span>
                                             <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
@@ -146,8 +158,6 @@ onMounted(async () => {
                                 class="w-full px-1"
                                 #default="{
                                     processing,
-                                    errors,
-                                    reset
                                 }"
                             >
                                 <InputGroup class="w-full rounded-3xl">

resources/js/pages/chats/Index.vue

@@ -15,7 +15,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Badge } from '@/components/ui/badge'
 import AppLayout from '@/layouts/AppLayout.vue';
 import { dashboard } from '@/routes';
 import { show } from '@/actions/App/Http/Controllers/FileController';
@@ -84,8 +83,6 @@ const handleSuccess = () => {
                             resetOnSuccess
                             #default="{
                                 processing,
-                                errors,
-                                reset
                             }"
 
                             class="w-full h-full"

resources/js/pages/files/Index.vue

@@ -42,11 +42,8 @@ import { Button } from '@/components/ui/button';
 import { Form, Head, Link, router } from '@inertiajs/vue3';
 import { ref } from 'vue';
 import { toast } from 'vue-sonner';
-import { usePage } from '@inertiajs/vue3';
 import DialogHeader from "@/components/ui/dialog/DialogHeader.vue";
-import { Spinner } from "@/components/ui/spinner"
-
-const page = usePage();
+import { Spinner } from "@/components/ui/spinner";
 
 defineProps<{
     files: { data: any[] };
@@ -138,8 +135,7 @@ const handleError = (page: any) => {
                                     resetOnSuccess
                                     #default="{
                                         processing,
-                                        errors,
-                                        reset
+                                        errors
                                     }"
                                 >
                                     <DialogHeader>
@@ -208,7 +204,6 @@ const handleError = (page: any) => {
                             #default="{
                                 processing,
                                 errors,
-                                reset
                             }"
                         >
                             <DrawerHeader>
@@ -279,8 +274,7 @@ const handleError = (page: any) => {
                             resetOnSuccess
                             #default="{
                                 processing,
-                                errors,
-                                reset
+                                errors
                             }"
                         >
                             <DialogHeader>

resources/js/pages/files/Show.vue

@@ -6,7 +6,6 @@ import {
 import { Badge } from '@/components/ui/badge'
 import {
   Item,
-  ItemActions,
   ItemContent,
   ItemDescription,
   ItemFooter,
@@ -17,13 +16,12 @@ import { Spinner } from "@/components/ui/spinner"
 import { Progress } from "@/components/ui/progress";
 import AppLayout from '@/layouts/AppLayout.vue';
 import { dashboard, chat } from '@/routes';
-import { index, show } from '@/actions/App/Http/Controllers/FileController';
+import { index } from '@/actions/App/Http/Controllers/FileController';
 import { type BreadcrumbItem } from '@/types';
 import { BotMessageSquare } from 'lucide-vue-next';
 import { Button } from '@/components/ui/button';
 import { Head, Link } from '@inertiajs/vue3';
 import { onMounted, ref } from 'vue';
-import files from '@/routes/files';
 
 const props = defineProps<{
     file: any;
@@ -65,25 +63,6 @@ onMounted(() => {
         });
 });
 
-
-const steps = [
-    {
-        step: 1,
-        title: "Chunking",
-        description: "Splitting file into chunks",
-    },
-    {
-        step: 2,
-        title: "Embeddings",
-        description: "Generating embeddings",
-    },
-    {
-        step: 3,
-        title: "Storage",
-        description: "Saving embeddings to vector storage",
-    },
-]
-
 </script>