Merge pull request #3 from ploca14/feat/file-processing

Feat/file processing

app/.env.example

@@ -0,0 +1,3 @@
+SUPABASE_URL=
+SUPABASE_KEY=
+OPENAI_API_KEY=

app/app.vue

@@ -2,6 +2,8 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
+
+  <UNotifications />
 </template>
 
 <style>

app/assets/css/tailwind.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer utilities {
+  .p-container {
+    @apply px-4 sm:px-6 lg:px-8;
+  }
+}

app/components/FileGrid.vue

@@ -0,0 +1,34 @@
+<template>
+  <h3 class="p-container sticky top-0 z-40 bg-white pb-4 font-medium">Files</h3>
+
+  <ul
+    role="list"
+    class="p-container grid grid-cols-2 gap-4 pb-16 pt-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+    ref="parent"
+  >
+    <li v-for="file in files" :key="file.name">
+      <FileGridItemUploading v-if="file.status === 'uploading'" :file="file" />
+      <FileGridItemProcessing
+        v-else-if="file.status === 'processing'"
+        :file="file"
+      />
+      <FileGridItemUploaded
+        v-else-if="file.status === 'uploaded'"
+        :file="file"
+      />
+      <FileGridItemFailed v-else-if="file.status === 'failed'" :file="file" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { UploadedFile, PendingFile } from "#imports";
+
+defineProps<{
+  files: (UploadedFile | PendingFile)[];
+}>();
+
+const [parent] = useAutoAnimate({
+  duration: 300,
+});
+</script>

app/components/FileGridItemFailed.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="relative">
+    <div
+      class="group grid aspect-[10/7] w-full overflow-hidden rounded-lg bg-red-100 focus-within:ring-2 focus-within:ring-red-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"
+    >
+      <Icon
+        name="i-heroicons-exclamation-circle"
+        class="h-12 w-12 place-self-center text-red-400"
+      />
+
+      <button type="button" class="absolute inset-0 focus:outline-none">
+        <span class="sr-only">View details for {{ file.name }}</span>
+      </button>
+    </div>
+    <div class="mt-2 flex">
+      <div class="w-full">
+        <p
+          class="pointer-events-none block truncate text-sm font-medium text-gray-900"
+        >
+          {{ file.name }}
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-gray-500">
+          Failed to upload
+        </p>
+      </div>
+      <div class="flex items-center">
+        <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+          <UButton
+            color="gray"
+            variant="ghost"
+            square
+            size="lg"
+            icon="i-heroicons-ellipsis-vertical"
+          />
+        </UDropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PendingFile } from "#imports";
+
+defineProps<{
+  file: PendingFile;
+}>();
+
+const items = [
+  [
+    {
+      label: "Retry",
+      icon: "i-heroicons-arrow-path",
+    },
+    {
+      label: "Delete",
+      icon: "i-heroicons-trash-20-solid",
+    },
+  ],
+];
+</script>

app/components/FileGridItemProcessing.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="relative">
+    <div
+      class="group grid aspect-[10/7] w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"
+    >
+      <Icon
+        name="bi:file-earmark-pdf"
+        class="col-start-1 row-start-1 h-12 w-12 place-self-center text-gray-500"
+      />
+      <button
+        type="button"
+        class="absolute inset-0 cursor-wait focus:outline-none"
+        disabled
+      >
+        <span class="sr-only">View details for {{ file.name }}</span>
+      </button>
+      <UProgress
+        class="col-start-1 row-start-1 place-self-end"
+        size="sm"
+        color="blue"
+        :ui="{
+          progress: {
+            rounded: 'rounded-none',
+          },
+        }"
+      />
+    </div>
+    <div class="mt-2 flex">
+      <div class="w-full min-w-0">
+        <p
+          class="pointer-events-none block truncate text-sm font-medium text-gray-900"
+        >
+          {{ file.name }}
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-gray-500">
+          Processing...
+        </p>
+      </div>
+      <div class="flex items-center">
+        <div class="p-2.5">
+          <UIcon
+            name="i-heroicons-ellipsis-vertical"
+            class="h-5 w-5 cursor-wait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PendingFile } from "#imports";
+
+defineProps<{
+  file: PendingFile;
+}>();
+</script>

app/components/FileGridItemSkeleton.vue

@@ -0,0 +1,10 @@
+<template>
+  <USkeleton
+    class="aspect-[10/7] w-full"
+    :ui="{
+      rounded: 'rounded-lg',
+    }"
+  />
+  <USkeleton class="my-1.5 mt-2 h-3.5 w-48" />
+  <USkeleton class="my-1.5 h-3.5 w-32" />
+</template>

app/components/FileGridItemUploaded.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="relative">
+    <div
+      class="group grid aspect-[10/7] w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"
+    >
+      <Icon
+        name="bi:file-earmark-pdf"
+        class="h-12 w-12 place-self-center text-gray-500"
+      />
+      <button type="button" class="absolute inset-0 focus:outline-none">
+        <span class="sr-only">View details for {{ file.name }}</span>
+      </button>
+    </div>
+    <div class="mt-2 flex">
+      <div class="w-full min-w-0">
+        <p
+          class="pointer-events-none block truncate text-sm font-medium text-gray-900"
+        >
+          {{ file.name }}
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-gray-500">
+          {{ formatDate(file.created_at) }}
+        </p>
+      </div>
+      <div class="flex items-center">
+        <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+          <UButton
+            color="gray"
+            variant="ghost"
+            square
+            size="lg"
+            icon="i-heroicons-ellipsis-vertical"
+          />
+        </UDropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UploadedFile } from "#imports";
+
+const props = defineProps<{
+  file: UploadedFile;
+}>();
+
+const formatDate = (date: Date) => {
+  return new Intl.DateTimeFormat("en-UK", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
+};
+
+const { mutate: deleteFile } = useDeleteFileQuery();
+const toast = useToast();
+
+const items = [
+  [
+    {
+      label: "Start a conversation",
+      icon: "i-heroicons-chat-bubble-left-right",
+    },
+    {
+      label: "Generate flashcards",
+      icon: "i-heroicons-rectangle-stack",
+    },
+    {
+      label: "Generate a test",
+      icon: "i-heroicons-academic-cap",
+    },
+  ],
+  [
+    {
+      label: "Add to collection",
+      icon: "i-heroicons-folder-plus",
+    },
+  ],
+  [
+    {
+      label: "Delete",
+      icon: "i-heroicons-trash-20-solid",
+      click: () => {
+        deleteFile(props.file.id, {
+          onError: (error) => {
+            console.log(error.message);
+            toast.add({ title: error.message, color: "red" });
+          },
+        });
+      },
+    },
+  ],
+];
+</script>

app/components/FileGridItemUploading.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="relative">
+    <div
+      class="group grid aspect-[10/7] w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"
+    >
+      <Icon
+        name="bi:file-earmark-pdf"
+        class="col-start-1 row-start-1 h-12 w-12 place-self-center text-gray-500"
+      />
+      <button
+        type="button"
+        class="absolute inset-0 cursor-wait focus:outline-none"
+        disabled
+      >
+        <span class="sr-only">View details for {{ file.name }}</span>
+      </button>
+      <UProgress
+        class="col-start-1 row-start-1 place-self-end"
+        size="sm"
+        :value="file.progress"
+        :ui="{
+          progress: {
+            rounded: 'rounded-none',
+          },
+        }"
+      />
+    </div>
+    <div class="mt-2 flex">
+      <div class="w-full min-w-0">
+        <p
+          class="pointer-events-none block truncate text-sm font-medium text-gray-900"
+        >
+          {{ file.name }}
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-gray-500">
+          <span class="tabular-nums"> {{ file.progress }} % </span>
+          Uploading...
+        </p>
+      </div>
+      <div class="flex items-center">
+        <div class="p-2.5">
+          <UIcon
+            name="i-heroicons-ellipsis-vertical"
+            class="h-5 w-5 cursor-wait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PendingFile } from "#imports";
+
+defineProps<{
+  file: PendingFile;
+}>();
+</script>

app/components/FileGridSkeleton.vue

@@ -0,0 +1,14 @@
+<template>
+  <h3 class="p-container sticky top-0 z-40 bg-white pb-4 font-medium">Files</h3>
+
+  <ul
+    role="list"
+    class="p-container grid grid-cols-2 gap-4 pb-16 pt-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+  >
+    <li v-for="i in 10" :key="i" class="relative">
+      <FileGridItemSkeleton />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts"></script>

app/components/UserMenu.vue

@@ -27,10 +27,10 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ size: "sm" | "md" }>();
+defineProps<{ size?: "sm" | "md" }>();
 
 const user = useUser();
-const { logout } = useAuth();
+const { logout } = useAuthService();
 
 const items = computed(() => [
   [

app/composables/queries/useDeleteFileQuery.ts

@@ -0,0 +1,13 @@
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+
+export const useDeleteFileQuery = () => {
+  const queryClient = useQueryClient();
+  const { remove } = useFileService();
+
+  return useMutation({
+    mutationFn: remove,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["files"] });
+    },
+  });
+};

app/composables/queries/useFilesQuery.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/vue-query";
+
+export const useFilesQuery = () => {
+  const { fetchProcessed } = useFileService();
+
+  return useQuery({
+    queryKey: ["files"],
+    queryFn: fetchProcessed,
+  });
+};