Merge pull request #52 from video-db/release-0-0-25

feat: add DefaultScreen & Sidebar, support header slot, and fix prop …
video-db · Dec 17, 2024 · 1e64c1d · 1e64c1d
2 parents cede96a + ad210eb
commit 1e64c1d
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## [0.0.25]() - 2024-12-18
+
+### Added
+- Explore `DefaultScreen` & `Sidebar` component
+- Allow `DefultScreen` to accept header in slot
+
+### Fixed
+- remove unsued props from `<DefaultScreen/>` 
+- change `vdb-orange` to `orange` in tailwind config to avoid confusions while themeconfig 
+
+
 ## [0.0.24]() - 2024-12-16
 
 ### Added 

diff --git a/src/components/buttons/Button.vue b/src/components/buttons/Button.vue
@@ -7,7 +7,7 @@
           variant === 'primary',
         'vdb-c-border-pam hover:vdb-c-border-pam hover:vdb-c-bg-pam vdb-c-border vdb-c-bg-white vdb-c-text-black hover:vdb-c-text-white':
           variant === 'secondary',
-        'vdb-c-bg-vdb-orange vdb-c-text-white hover:vdb-c-bg-orange-400':
+        'vdb-c-bg-orange vdb-c-text-white hover:vdb-c-bg-orange-400':
           variant === 'tertiary',
       },
     ]"

diff --git a/src/components/chat/ChatInput.vue b/src/components/chat/ChatInput.vue
@@ -16,7 +16,7 @@
           ]"
           @click="selectAgent(agent)"
         >
-          <span class="vdb-c-text-vdb-orange"> @ </span>
+          <span class="vdb-c-text-orange"> @ </span>
           <span> {{ agent.name }} </span>
         </div>
       </div>
@@ -70,7 +70,7 @@
           <div class="vdb-c-flex vdb-c-items-center vdb-c-justify-end">
             <button
               :disabled="isInputDisabled"
-              class="vdb-c-font-sans vdb-c-mx-8 vdb-c-hidden vdb-c-h-40 vdb-c-cursor-pointer vdb-c-items-center vdb-c-justify-center vdb-c-rounded-full vdb-c-bg-vdb-orange vdb-c-px-12 vdb-c-py-8 vdb-c-text-sm vdb-c-font-bold vdb-c-uppercase vdb-c-text-white vdb-c-transition hover:vdb-c-bg-orange-400 md:vdb-c-flex"
+              class="vdb-c-font-sans vdb-c-mx-8 vdb-c-hidden vdb-c-h-40 vdb-c-cursor-pointer vdb-c-items-center vdb-c-justify-center vdb-c-rounded-full vdb-c-bg-orange vdb-c-px-12 vdb-c-py-8 vdb-c-text-sm vdb-c-font-bold vdb-c-uppercase vdb-c-text-white vdb-c-transition hover:vdb-c-bg-orange-400 md:vdb-c-flex"
               :class="{
                 'vdb-c-cursor-not-allowed vdb-c-bg-kilvish-400 hover:vdb-c-bg-kilvish-400':
                   charCount.value < 1,
@@ -115,14 +115,6 @@ const props = defineProps({
     type: String,
     default: "Ask a question",
   },
-  isTablet: {
-    type: Boolean,
-    default: false,
-  },
-  isMobile: {
-    type: Boolean,
-    default: false,
-  },
   agents: {
     type: Array,
     default: [],

diff --git a/src/components/chat/ChatInterface.vue b/src/components/chat/ChatInterface.vue
@@ -99,19 +99,15 @@
 
                 <default-screen
                   v-else
-                  :agents="agents.slice(0, 2)"
-                  :active-collection-data="activeCollectionData"
-                  :show-onboarding-message="isFreshUser"
-                  :is-fresh-user="isFreshUser"
+                  class="vdb-c-transition-opacity vdb-c-duration-300 vdb-c-ease-in-out"
+                  :header-config="headerConfig"
+                  :collection-data="activeCollectionData"
                   :action-card-queries="dynamicActionCards"
                   :show-demo-videos="
                     isFreshUser ||
                     (activeCollectionData &&
                       activeCollectionVideos?.length === 0)
                   "
-                  :header-config="headerConfig"
-                  :collection-data="activeCollectionData"
-                  :collection-videos="activeCollectionVideos"
                   :preview-videos="
                     isFreshUser ||
                     (activeCollectionData &&
@@ -120,12 +116,9 @@
                       : activeCollectionVideos?.slice(0, 4)
                   "
                   @query-card-click="handleQueryCardClick"
-                  @agent-click="handleTagAgent"
                   @video-click="handleVideoClick"
                   @upload-button-click="showUploadDialog = true"
-                  @explore-agents-click="handleExploreAgentsClick"
                   @view-all-videos-click="handleViewAllVideosClick"
-                  class="vdb-c-transition-opacity vdb-c-duration-300 vdb-c-ease-in-out"
                 />
               </template>
 

diff --git a/src/components/chat/elements/DefaultScreen.vue b/src/components/chat/elements/DefaultScreen.vue
@@ -3,50 +3,47 @@
     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"
-        :style="{ lineHeight: '1.2' }"
-      >
-        <div
-          v-if="collectionName"
-          class="vdb-c-flex vdb-c-w-full vdb-c-items-center vdb-c-justify-between"
+    <slot name="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"
+          :style="{ lineHeight: '1.2' }"
         >
-          <span
-            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;
-              -webkit-text-fill-color: transparent;
-            "
-            :title="collectionName"
-          >
-            {{ collectionName }}
-          </span>
-          <Button
-            v-if="headerConfig.uploadButton"
-            @click="$emit('upload-button-click')"
-            variant="tertiary"
-            class="!vdb-c-px-8 !vdb-c-py-10"
+          <div
+            v-if="headerText"
+            class="vdb-c-flex vdb-c-w-full vdb-c-items-center vdb-c-justify-between"
           >
-            <div
-              class="vdb-c-flex vdb-c-items-center vdb-c-gap-6 vdb-c-text-sm vdb-c-font-medium"
+            <span
+              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 vdb-c-text-orange"
+              :title="headerText"
             >
-              <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">
-                Upload Video
-              </span>
-            </div>
-          </Button>
-        </div>
-        <span
-          v-else
-          class="vdb-c-inline-block vdb-c-h-[3rem] vdb-c-w-4/6 vdb-c-animate-pulse vdb-c-rounded vdb-c-bg-roy"
-        ></span>
-      </h1>
-    </div>
+              {{ headerText }}
+            </span>
+            <Button
+              v-if="headerConfig.uploadButton"
+              @click="$emit('upload-button-click')"
+              variant="tertiary"
+              class="!vdb-c-px-8 !vdb-c-py-10"
+            >
+              <div
+                class="vdb-c-flex vdb-c-items-center vdb-c-gap-6 vdb-c-text-sm vdb-c-font-medium"
+              >
+                <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">
+                  Upload Video
+                </span>
+              </div>
+            </Button>
+          </div>
+          <span
+            v-else
+            class="vdb-c-inline-block vdb-c-h-[3rem] vdb-c-w-4/6 vdb-c-animate-pulse vdb-c-rounded vdb-c-bg-roy"
+          ></span>
+        </h1>
+      </div>
+    </slot>
 
     <!-- Action Cards -->
     <div
@@ -65,7 +62,7 @@
                 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]':
+              'vdb-c-bg-orange hover:vdb-c-bg-orange-600':
                 query.type === 'cta',
               'vdb-c-col-span-2 md:vdb-c-col-span-1':
                 actionCardQueries?.length % 2 === 1
@@ -94,18 +91,19 @@
           >
             <div
               v-if="query.icon"
-              class="vdb-c-flex vdb-c-h-30 vdb-c-w-30 vdb-c-items-center vdb-c-justify-center vdb-c-rounded-full vdb-c-bg-[#C14103] vdb-c-p-4"
+              class="vdb-c-flex vdb-c-h-30 vdb-c-w-30 vdb-c-items-center vdb-c-justify-center vdb-c-rounded-full vdb-c-bg-orange vdb-c-p-4"
             >
               <component :is="query.icon"> </component>
             </div>
             <QuestionMark
               v-else
+              class="query-card-icon"
               :fill="
                 query.type === 'cta'
                   ? '#FFFFFF'
                   : query.type === 'muted'
                     ? '#2D2D2D'
-                    : '#C14103'
+                    : '#EC5B16'
               "
             />
           </div>
@@ -157,9 +155,7 @@
                     )
                   "
                 >
-                  <div
-                    class="vdb-c-text-sm vdb-c-font-medium"
-                  >
+                  <div class="vdb-c-text-sm vdb-c-font-medium">
                     <span class="vdb-c-hidden md:vdb-c-block">
                       Watch more demos</span
                     >
@@ -192,11 +188,7 @@
                 <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>
+                  <div class="vdb-c-text-sm vdb-c-font-medium">View all</div>
                   <ChevronRightCircled class="vdb-c-hidden md:vdb-c-block" />
                 </div>
               </Button>
@@ -263,10 +255,6 @@ import ExternalLinkIcon from "../../icons/ExternalLink.vue";
 import StarIcon from "../../icons/Star.vue";
 
 const props = defineProps({
-  agents: {
-    type: Array,
-    default: () => [],
-  },
   actionCardQueries: {
     type: Array,
     default: () => [],
@@ -275,10 +263,6 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
-  showOnboardingMessage: {
-    type: Boolean,
-    default: true,
-  },
   showDemoVideos: {
     type: Boolean,
     default: true,
@@ -291,27 +275,15 @@ const props = defineProps({
     type: Object,
     default: () => null,
   },
-  collectionVideos: {
-    type: Array,
-    default: null,
-  },
 });
 
 const collectionName = computed(() => props.collectionData?.name);
-const isOnboardingMessageVisible = ref(false);
-
-watch(
-  () => props.showOnboardingMessage,
-  (val) => {
-    isOnboardingMessageVisible.value = val;
-  },
-  { immediate: true },
+const headerText = computed(
+  () => props.headerConfig.headerText || props.collectionData?.name,
 );
 
 defineEmits([
   "query-card-click",
-  "agent-click",
-  "explore-agents-click",
   "video-click",
   "view-all-videos-click",
   "upload-button-click",

diff --git a/src/components/chat/elements/Sidebar.vue b/src/components/chat/elements/Sidebar.vue
@@ -139,7 +139,7 @@
                 'vdb-c-ml-18 vdb-c-cursor-pointer vdb-c-truncate vdb-c-rounded-lg vdb-c-border vdb-c-border-transparent vdb-c-bg-white vdb-c-p-8 vdb-c-text-sm vdb-c-font-medium vdb-c-text-black vdb-c-transition-all vdb-c-duration-75 hover:vdb-c-bg-[#FFF5EC]',
               ]"
             >
-              <span class="vdb-c-text-vdb-orange"> @ </span>
+              <span class="vdb-c-text-orange"> @ </span>
               <span> {{ agent.name }} </span>
             </div>
           </template>
@@ -377,7 +377,7 @@ const userClickedSessions = ref(false);
 const userClickedExploreAgents = ref(false);
 const userClickedCollections = ref(false);
 const hoveredSession = ref(null);
-const isMobile = ref(window.innerWidth < 1024);
+const isMobile = ref(window?.innerWidth < 1024);
 const isOpen = ref(false);
 
 const emit = defineEmits([
@@ -470,9 +470,6 @@ watch(showExploreAgents, (newValue) => {
   }
 });
 
-window.addEventListener("resize", () => {
-  isMobile.value = window.innerWidth < 1024;
-});
 
 defineExpose({
   toggleExploreAgents,

diff --git a/src/components/chat/elements/UploadNotifications.vue b/src/components/chat/elements/UploadNotifications.vue
@@ -21,7 +21,7 @@
             }"
           >
             <div v-if="upload.status === 'loading'" class="vdb-c-p-12">
-              <FileUpload class="vdb-c-text-vdb-orange" fill="#EC5B16" />
+              <FileUpload class="vdb-c-text-orange" fill="#EC5B16" />
             </div>
             <svg
               v-else-if="upload.status === 'success'"
@@ -70,7 +70,7 @@
             <span
               class="vdb-c-line-clamp-2 vdb-c-text-xs vdb-c-font-normal sm:vdb-c-text-sm"
               :class="{
-                'vdb-c-text-vdb-orange': upload.status === 'loading',
+                'vdb-c-text-orange': upload.status === 'loading',
                 'vdb-c-text-success-700': upload.status === 'success',
                 'vdb-c-text-danger-700': upload.status === 'error',
               }"

diff --git a/src/components/collection/PaginationButton.vue b/src/components/collection/PaginationButton.vue
@@ -2,7 +2,7 @@
   <button
     class="vdb-c-w-[80px] vdb-c-border-[1px] vdb-c-border-[#DADADA] vdb-c-px-4 vdb-c-py-6 vdb-c-text-center vdb-c-text-sm vdb-c-font-normal vdb-c-text-black"
     :class="{
-      'vdb-c-text-vdb-orange vdb-c-bg-orange-50': state === 'active',
+      'vdb-c-text-orange vdb-c-bg-orange-50': state === 'active',
       'vdb-c-cursor-not-allowed': state === 'disabled',
       'vdb-c-border-l-0': !isFirst,
       'vdb-c-rounded-l-lg vdb-c-border-l': isFirst,

diff --git a/src/index.ts b/src/index.ts
@@ -1,10 +1,12 @@
 import type { App } from "vue";
 import ChatInterface from "./components/chat/ChatInterface.vue";
+import DefaultScreen from "./components/chat/elements/DefaultScreen.vue";
+import Sidebar from "./components/chat/elements/Sidebar.vue";
 import { useVideoDBChat } from "./context";
 import "./style.css";
 
 function install(app: App) {
   app.component("ChatInterface", ChatInterface);
 }
 
-export { install, ChatInterface, useVideoDBChat };
+export { install, ChatInterface, DefaultScreen, Sidebar, useVideoDBChat };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -299,6 +299,9 @@ module.exports = {
           darkishgrey: "#1E1E1E",
           green: "#0AA910",
         },
+        orange:{
+          DEFAULT: "#EC5B16",
+        },
         black: {
           DEFAULT: "#000000",
           80: "rgba(0, 0, 0, 0.8)",