design changes

video-db · Dec 3, 2024 · 175950e · 175950e
1 parent 6149426
commit 175950e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+### [0.0.13]() - 2024-12-03
+
+### Added
+- Chat Input UX improvements
+    - Context Icon
+    - Query card copy changes
+    - Sidebar design changes
+
 ### [0.0.12]() - 2024-12-03
 
 ### Added

diff --git a/src/components/chat/ChatInput.vue b/src/components/chat/ChatInput.vue
@@ -37,7 +37,7 @@
           <div>
             <div
               :class="[
-                'vdb-c-ml-6 vdb-c-hidden vdb-c-items-center vdb-c-gap-24 vdb-c-rounded-[42px] vdb-c-border vdb-c-border-orange-200 vdb-c-bg-orange-50 vdb-c-px-12 vdb-c-py-12 vdb-c-pr-16 vdb-c-text-black md:vdb-c-flex',
+                'vdb-c-ml-6 vdb-c-hidden vdb-c-items-center vdb-c-gap-24 vdb-c-rounded-[42px] vdb-c-border vdb-c-border-[#BAE7BC] vdb-c-bg-[#E6F6E7] vdb-c-px-12 vdb-c-py-12 vdb-c-pr-16 vdb-c-text-black md:vdb-c-flex',
 
                 { 'vdb-c-animate-pulse': !contextData?.name },
               ]"
@@ -273,7 +273,7 @@ defineExpose({
 }
 
 .context-icon {
-  background: radial-gradient(circle, #ff7f40 0%, #f55100 100%);
-  box-shadow: 0 0 6px 4px rgba(255, 90, 10, 0.6);
+  background: radial-gradient(circle, #5BC25F 0%, #0AA910 100%);
+  box-shadow: 0 0 6px 4px #0AA910;
 }
 </style>
diff --git a/src/components/chat/ChatInterface.vue b/src/components/chat/ChatInterface.vue
@@ -393,15 +393,15 @@ const chatLoading = computed(() =>
 );
 const dynamicActionCards = computed(() => {
   return props.defaultScreenConfig.actionCardQueries ||
-    (!isFreshUser &&
+    (!isFreshUser.value &&
       activeCollectionData.value &&
       activeCollectionVideos.value.length > 0)
     ? [
         {
           component: UploadVideoQueryCard,
           isDemo: isFreshUser.value,
           content:
-            "Upload [this video](https://www.youtube.com/watch?v=FgrO9ADPZSA) and generate a bullet point summary.",
+            "Upload <a href='https://www.youtube.com/watch?v=FgrO9ADPZSA' target='_blank'>https://youtu.be/FgrO9ADPZSA</a> and generate a bullet point summary.",
           type: "primary",
           action: "chat",
           icon: FileUploadIcon,

diff --git a/src/components/chat/elements/DefaultScreen.vue b/src/components/chat/elements/DefaultScreen.vue
@@ -172,20 +172,6 @@
           >
             <span> <b> Videos </b> in {{ collectionName }} </span>
             <div class="vdb-c-flex vdb-c-items-center vdb-c-gap-16">
-              <Button
-                variant="secondary"
-                @click="$emit('upload-button-click')"
-                class="vdb-c-hidden !vdb-c-px-8 !vdb-c-py-10 md:vdb-c-block"
-              >
-                <div
-                  class="vdb-c-flex vdb-c-items-center vdb-c-justify-between vdb-c-gap-6"
-                >
-                  <UploadIcon class="vdb-c-h-20 vdb-c-w-20" fill="#000000" />
-                  <div class="vdb-c-text-sm vdb-c-font-medium">
-                    Upload Video
-                  </div>
-                </div>
-              </Button>
               <Button
                 variant="secondary"
                 @click="$emit('view-all-videos-click')"

diff --git a/src/components/chat/elements/Sidebar.vue b/src/components/chat/elements/Sidebar.vue
@@ -50,7 +50,7 @@
 
       <!-- Collections -->
       <div
-        class="vdb-c-flex vdb-c-max-h-[34%] vdb-c-flex-col vdb-c-overflow-hidden"
+        class="vdb-c-flex vdb-c-max-h-[38%] vdb-c-flex-col vdb-c-overflow-hidden"
       >
         <button
           @click="toggleCollections()"
@@ -105,7 +105,7 @@
 
       <!-- Explore Agents -->
       <div
-        class="vdb-c-flex vdb-c-max-h-[34%] 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-[25%] 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
@@ -150,7 +150,7 @@
 
       <!-- Sessions -->
       <div
-        class="vdb-c-flex vdb-c-max-h-[34%] vdb-c-flex-col vdb-c-overflow-hidden"
+        class="vdb-c-flex vdb-c-max-h-[38%] vdb-c-flex-col vdb-c-overflow-hidden"
       >
         <button
           @click="toggleSessions()"