Merge pull request #39 from video-db/release

design changes
video-db · Dec 4, 2024 · 1e4e947 · 1e4e947
2 parents 67b8432 + 88e6358
commit 1e4e947
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 130 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+### [0.0.16]() - 2024-12-04
+
+### Changed 
+- Director Icon Replaced with Beta
+- Delete Modal as seperate component
+- Default Screen Improvements for mobile
+- Sidebar Issues in mobile
+- Query card improvements
+
 ### [0.0.15]() - 2024-12-03
 
 ### Fixed

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@videodb/chat-vue",
 	"description": "Chat component for Director",
-	"version": "0.0.15",
+	"version": "0.0.16",
 	"author": "VideoDB",
 	"license": "Apache-2.0",
 	"private": false,

diff --git a/src/components/chat/ChatInterface.vue b/src/components/chat/ChatInterface.vue
@@ -167,58 +167,22 @@
     </div>
 
     <!-- Delete Session Dialog -->
-    <div
-      v-if="showDeleteDialog"
-      class="vdb-c-fixed vdb-c-inset-0 vdb-c-z-50 vdb-c-flex vdb-c-items-center vdb-c-justify-center vdb-c-bg-black vdb-c-bg-opacity-50"
-      @click="cancelDeleteSession"
-    >
-      <div
-        class="vdb-c-shadow-xl vdb-c-overflow-hidden vdb-c-rounded-lg vdb-c-bg-white"
-        @click.stop
-      >
-        <div
-          class="vdb-c-flex vdb-c-gap-16 vdb-c-px-24 vdb-c-py-16 vdb-c-pt-24"
-        >
-          <div
-            class="vdb-c-flex vdb-c-h-40 vdb-c-w-40 vdb-c-items-center vdb-c-justify-center vdb-c-rounded-full vdb-c-bg-red-100"
-          >
-            <warning-exclamation />
-          </div>
-          <div class="vdb-c-flex vdb-c-flex-col vdb-c-gap-8">
-            <h2 class="vdb-c-text-lg vdb-c-font-medium vdb-c-text-gray-950">
-              Delete Session
-            </h2>
-            <p class="vdb-c-text-sm vdb-c-font-normal vdb-c-text-[#6B7280]">
-              Are you sure you want to delete this session?
-            </p>
-          </div>
-        </div>
-        <div
-          class="vdb-c-flex vdb-c-w-full vdb-c-justify-end vdb-c-gap-12 vdb-c-bg-gray-50 vdb-c-px-24 vdb-c-py-12"
-        >
-          <button
-            @click="cancelDeleteSession"
-            class="vdb-c-shadow-sm vdb-c-rounded-md vdb-c-border vdb-c-border-gray-300 vdb-c-bg-white vdb-c-px-16 vdb-c-py-8 vdb-c-text-sm vdb-c-font-medium vdb-c-text-gray-700 hover:vdb-c-bg-gray-300"
-          >
-            Cancel
-          </button>
-          <button
-            @click="confirmDeleteSession"
-            class="vdb-c-shadow-sm vdb-c-rounded-md vdb-c-bg-[#DC2626] vdb-c-px-16 vdb-c-py-8 vdb-c-text-sm vdb-c-font-medium vdb-c-text-white hover:vdb-c-bg-[#B91C1C]"
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
+    <DeleteSessionDialog
+      :show-dialog="showDeleteDialog"
+      @cancel-delete="
+        showDeleteDialog = false;
+        sessionToDelete = null;
+      "
+      @confirm-delete="confirmDeleteSession"
+    ></DeleteSessionDialog>
 
     <!-- Upload Dialog -->
     <UploadModal
       :show-upload-dialog="showUploadDialog"
-      :collections="collections"
       :default-selected-collection-id="activeCollectionData?.id"
-      @cancel-upload="showUploadDialog = false"
+      :collections="collections"
       @upload="handleUpload"
+      @cancel-upload="showUploadDialog = false"
     />
   </section>
 </template>
@@ -239,7 +203,7 @@ import UploadNotifications from "./elements/UploadNotifications.vue";
 import UploadVideoQueryCard from "./elements/UploadVideoQueryCard.vue";
 
 import UploadModal from "../modals/UploadModal.vue";
-
+import DeleteSessionDialog from "../modals/DeleteSessionModal.vue";
 import ChatSearchResults from "../message-handlers/ChatSearchResults.vue";
 import ChatVideo from "../message-handlers/ChatVideo.vue";
 import ImageHandler from "../message-handlers/ImageHandler.vue";
@@ -250,7 +214,6 @@ import DirectorIcon from "../icons/Director.vue";
 import ExternalLink from "../icons/ExternalLink.vue";
 import FileUploadIcon from "../icons/FileUpload.vue";
 import SearchIcon from "../icons/SearchIcon.vue";
-import WarningExclamation from "../icons/WarningExclamation.vue";
 
 const props = defineProps({
   chatInputPlaceholder: {
@@ -484,11 +447,6 @@ const showDeleteSessionDialog = (_sessionId) => {
   showDeleteDialog.value = true;
 };
 
-const cancelDeleteSession = () => {
-  showDeleteDialog.value = false;
-  sessionToDelete.value = null;
-};
-
 const confirmDeleteSession = () => {
   if (sessionToDelete.value === sessionId.value) {
     createNewSession();

diff --git a/src/components/chat/elements/DefaultScreen.vue b/src/components/chat/elements/DefaultScreen.vue
@@ -1,7 +1,8 @@
 <template>
   <div
-    class="vdb-c-flex vdb-c-h-full vdb-c-w-5/6 vdb-c-flex-col vdb-c-gap-32 vdb-c-p-32"
+    class="vdb-c-flex vdb-c-h-full vdb-c-w-5/6 vdb-c-flex-col vdb-c-gap-32 vdb-c-p-16 md:vdb-c-p-32"
   >
+    <!-- Collection Header -->
     <div class="vdb-c-flex vdb-c-flex-col vdb-c-gap-8">
       <h1
         class="vdb-c-flex vdb-c-items-center vdb-c-gap-4 vdb-c-text-xl vdb-c-leading-tight sm:vdb-c-text-3xl md:vdb-c-text-5xl"
@@ -12,7 +13,7 @@
           class="vdb-c-flex vdb-c-w-full vdb-c-items-center vdb-c-justify-between"
         >
           <span
-            class="vdb-c-inline-block vdb-c-max-w-[80%] vdb-c-truncate vdb-c-font-extrabold"
+            class="vdb-c-line-clamp-2 vdb-c-inline-block vdb-c-max-w-[60%] vdb-c-font-bold md:vdb-c-line-clamp-none md:vdb-c-max-w-[80%] md:vdb-c-font-extrabold"
             style="
               background-image: radial-gradient(circle, #ff7e32, #ff5b0a);
               -webkit-background-clip: text;
@@ -33,9 +34,8 @@
               <UploadIcon
                 class="vdb-c-hidden vdb-c-h-20 vdb-c-w-20 md:vdb-c-block"
               />
-              <span class="vdb-c-flex vdb-c-flex-row vdb-c-gap-4"
-                ><span> Upload</span>
-                <span class="vdb-c-hidden md:vdb-c-block"> Video </span>
+              <span class="vdb-c-flex vdb-c-flex-row vdb-c-gap-4">
+                Upload Video
               </span>
             </div>
           </Button>
@@ -46,25 +46,30 @@
         ></span>
       </h1>
     </div>
+
     <!-- Action Cards -->
     <div
       class="fade-in-anim vdb-c-flex vdb-c-grow vdb-c-items-start vdb-c-justify-center vdb-c-pt-4"
     >
       <div
-        class="vdb-c-grid vdb-c-grid-cols-2 vdb-c-gap-16 md:vdb-c-grid-cols-3 2xl:vdb-c-grid-cols-3"
+        class="vdb-c-grid vdb-c-grid-cols-2 vdb-c-gap-12 md:vdb-c-grid-cols-3 md:vdb-c-gap-16 2xl:vdb-c-grid-cols-3"
       >
         <div
           v-for="(query, index) in actionCardQueries"
           :key="index"
           :class="[
-            'action-card-shadow vdb-c-w-160 vdb-c-h-120 vdb-c-relative vdb-c-flex vdb-c-cursor-pointer vdb-c-flex-col vdb-c-gap-24 vdb-c-rounded-lg vdb-c-border vdb-c-px-16 vdb-c-py-20 vdb-c-transition-all vdb-c-duration-300 vdb-c-ease-in-out md:vdb-c-h-240',
+            'action-card-shadow vdb-c-w-160 vdb-c-h-120 vdb-c-relative vdb-c-flex vdb-c-cursor-pointer vdb-c-flex-col vdb-c-gap-24 vdb-c-rounded-lg vdb-c-border vdb-c-px-12 vdb-c-py-12 vdb-c-transition-all vdb-c-duration-300 vdb-c-ease-in-out md:vdb-c-h-240 md:vdb-c-px-16 md:vdb-c-py-20',
             {
               'vdb-c-border-orange-100 vdb-c-bg-orange-50 hover:vdb-c-border hover:vdb-c-border-[#FFCFA5] hover:vdb-c-bg-[#FFE9D3]':
                 query.type === 'primary',
               'vdb-c-border-roy vdb-c-bg-vdb-lightgrey hover:vdb-c-bg-roy':
                 query.type === 'muted',
               'vdb-c-bg-vdb-orange hover:vdb-c-bg-[#D45214]':
                 query.type === 'cta',
+              'vdb-c-col-span-2 md:vdb-c-col-span-1':
+                actionCardQueries?.length % 2 === 1
+                  ? index === actionCardQueries.length - 1
+                  : index === actionCardQueries.length - 2,
             },
           ]"
           @click="$emit('query-card-click', query)"
@@ -104,7 +109,7 @@
             />
           </div>
           <p
-            class="vdb-c-flex-grow vdb-c-text-left vdb-c-text-xs vdb-c-font-semibold md:vdb-c-text-sm lg:vdb-c-text-base"
+            class="vdb-c-flex-grow vdb-c-text-left vdb-c-text-xs vdb-c-font-medium md:vdb-c-text-sm md:vdb-c-font-semibold lg:vdb-c-text-base"
             :class="[
               {
                 'vdb-c-text-pam': query.type === 'muted',
@@ -120,24 +125,28 @@
       </div>
     </div>
 
+    <!-- Demo/Preview Videos -->
     <div class="vdb-c-flex vdb-c-flex-col vdb-c-gap-12">
-      <div
-        class="vdb-c-mt-12 vdb-c-h-1 vdb-c-w-full vdb-c-bg-[#EFEFEF]"
-        v-if="!showDemoVideos"
-      ></div>
+      <!-- Divider -->
+      <div class="vdb-c-mt-12 vdb-c-h-1 vdb-c-w-full vdb-c-bg-[#EFEFEF]"></div>
+
+      <!-- Headers -->
       <div
         class="vdb-c-text-base vdb-c-font-normal vdb-c-text-vdb-darkishgrey md:vdb-c-text-xl"
       >
+        <!-- Demo Videos Header -->
         <div v-if="showDemoVideos">
           <div
-            class="vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-4"
+            class="vdb-c-mb-12 vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-4 md:vdb-c-mb-16"
           >
-            <span class="vdb-c-font-semibold">
-              Here's how you can use Director:
+            <span
+              class="vdb-c-w-1/2 vdb-c-text-sm vdb-c-font-semibold md:vdb-c-text-lg"
+            >
+              See agents in action:
             </span>
 
             <div class="vdb-c-flex vdb-c-items-center vdb-c-gap-16">
-              <Button variant="secondary" class="vdb-c-hidden md:vdb-c-block">
+              <Button variant="secondary">
                 <div
                   class="vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-6"
                   @click="
@@ -147,32 +156,47 @@
                     )
                   "
                 >
-                  <div class="vdb-c-text-sm vdb-c-font-medium">
-                    Watch more demos
+                  <div
+                    class="vdb-c-text-sm vdb-c-font-medium"
+                  >
+                    <span class="vdb-c-hidden md:vdb-c-block">
+                      Watch more demos</span
+                    >
+                    <span class="vdb-c-block md:vdb-c-hidden">
+                      More Demos
+                    </span>
                   </div>
                   <ExternalLinkIcon />
                 </div>
               </Button>
             </div>
           </div>
         </div>
+
+        <!-- Preview Videos Header -->
         <div v-else>
           <div
             v-if="collectionName"
             class="vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-4"
           >
-            <span> <b> Videos </b> in {{ collectionName }} </span>
+            <span class="vdb-c-w-4/6 vdb-c-text-sm md:vdb-c-text-xl">
+              <b> Videos </b> in {{ collectionName }}
+            </span>
             <div class="vdb-c-flex vdb-c-items-center vdb-c-gap-16">
               <Button
                 variant="secondary"
                 @click="$emit('view-all-videos-click')"
-                class="vdb-c-hidden !vdb-c-px-8 !vdb-c-py-10 md:vdb-c-block"
+                class="!vdb-c-px-8 !vdb-c-py-10"
               >
                 <div
                   class="vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-6"
                 >
-                  <div class="vdb-c-text-sm vdb-c-font-medium">View all</div>
-                  <ChevronRightCircled />
+                  <div
+                    class="vdb-c-text-sm vdb-c-font-medium"
+                  >
+                    View all
+                  </div>
+                  <ChevronRightCircled class="vdb-c-hidden md:vdb-c-block" />
                 </div>
               </Button>
             </div>
@@ -184,6 +208,8 @@
           </div>
         </div>
       </div>
+
+      <!-- Videos -->
       <div
         v-if="previewVideos"
         class="vdb-c-mb-24 vdb-c-grid vdb-c-grid-cols-12 vdb-c-gap-24 sm:vdb-c-mb-32 sm:vdb-c-gap-32"
@@ -202,36 +228,9 @@
             @video-click="$emit('video-click', item)"
           />
         </div>
-        <div
-          class="vdb-c-col-span-12 vdb-c-block sm:vdb-c-col-span-6 md:vdb-c-col-span-4 md:vdb-c-hidden lg:vdb-c-col-span-3"
-        >
-          <Button variant="secondary" class="vdb-c-block">
-            <div
-              v-if="showDemoVideos"
-              class="vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-6"
-              @click="
-                $emit(
-                  'view-all-videos-click',
-                  'https://www.youtube.com/playlist?list=PLhxAMFLSSK039xl1UgcZmoFLnb-qNRYQw',
-                )
-              "
-            >
-              <div class="vdb-c-text-sm vdb-c-font-medium">
-                Watch more demos
-              </div>
-              <ExternalLinkIcon />
-            </div>
-            <div
-              v-else
-              class="vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-6"
-              @click="$emit('view-all-videos-click')"
-            >
-              <div class="vdb-c-text-sm vdb-c-font-medium">View all</div>
-              <ChevronRightCircled />
-            </div>
-          </Button>
-        </div>
       </div>
+
+      <!-- Videos Loader -->
       <div
         v-else
         class="vdb-c-mb-24 vdb-c-grid vdb-c-grid-cols-12 vdb-c-gap-24 sm:vdb-c-mb-32 sm:vdb-c-gap-32"
@@ -260,7 +259,6 @@ import QuestionMark from "../../icons/QuestionMark.vue";
 import UploadIcon from "../../icons/FileUpload.vue";
 import ChevronRightCircled from "../../icons/ChevronRightCircled.vue";
 import ExternalLinkIcon from "../../icons/ExternalLink.vue";
-import CrossIcon from "../../icons/Cross.vue";
 import StarIcon from "../../icons/Star.vue";
 
 const props = defineProps({
@@ -305,10 +303,6 @@ watch(
   { immediate: true },
 );
 
-const hideOnboardingMessage = () => {
-  isOnboardingMessageVisible.value = false;
-};
-
 defineEmits([
   "query-card-click",
   "agent-click",
@@ -342,6 +336,6 @@ defineEmits([
   }
 }
 .action-card-shadow {
-  box-shadow: 0px 2px 5px 0px #0000001a;
+  box-shadow: 0px 15px 29px 0px #0000004d;
 }
 </style>
diff --git a/src/components/chat/elements/Sidebar.vue b/src/components/chat/elements/Sidebar.vue
@@ -4,7 +4,7 @@
       'vdb-c-flex vdb-c-h-full vdb-c-flex-col vdb-c-gap-16 vdb-c-border-l vdb-c-bg-white vdb-c-p-16 vdb-c-pl-12 vdb-c-pr-20 vdb-c-text-black',
       {
         'vdb-c-w-1/5': !isMobile,
-        'vdb-c-fixed vdb-c-left-0 vdb-c-top-0 vdb-c-z-50 vdb-c-h-full vdb-c-w-4/5 vdb-c-transform vdb-c-shadow-lg vdb-c-transition-transform vdb-c-duration-300 vdb-c-ease-in-out md:vdb-c-w-2/5':
+        'vdb-c-fixed vdb-c-left-0 vdb-c-top-0 vdb-c-z-50 vdb-c-h-full vdb-c-w-4/5 vdb-c-transform vdb-c-transition-transform vdb-c-duration-300 vdb-c-ease-in-out md:vdb-c-w-2/5':
           isMobile,
         'vdb-c--translate-x-full': isMobile && !isOpen,
       },
@@ -49,7 +49,7 @@
     >
       <!-- Collections -->
       <div
-        class="vdb-c-flex vdb-c-max-h-[38%] vdb-c-flex-col vdb-c-overflow-hidden"
+        class="vdb-c-flex vdb-c-max-h-[160px] vdb-c-flex-col vdb-c-overflow-hidden"
       >
         <button
           @click="toggleCollections()"
@@ -99,7 +99,7 @@
 
       <!-- Explore Agents -->
       <div
-        class="vdb-c-flex vdb-c-max-h-[25%] vdb-c-flex-col vdb-c-gap-4 vdb-c-rounded-lg vdb-c-border vdb-c-border-transparent"
+        class="vdb-c-flex vdb-c-max-h-[160px] vdb-c-flex-col vdb-c-gap-4 vdb-c-rounded-lg vdb-c-border vdb-c-border-transparent"
         :class="{ 'vdb-c-explore-agents-animation': isExploreAgentsFocused }"
       >
         <button