AI-assistant UX improvements (baserow#4123)

Author: bram2w

enterprise/backend/src/baserow_enterprise/assistant/prompts.py

@@ -51,7 +51,7 @@
 
 ASSISTANT_SYSTEM_PROMPT = (
     """
-You are Baserow Assistant, an AI expert for Baserow (open-source no-code platform).
+You are Kuma, an AI expert for Baserow (open-source no-code platform).
 
 ## YOUR KNOWLEDGE
 1. **Core concepts** (below)

enterprise/web-frontend/modules/baserow_enterprise/assets/images/kuma.svg

@@ -91,25 +91,36 @@
   max-width: 680px;
   margin: 0 auto;
   width: 100%;
+  padding: 0 20px;
 }
 
-.assistant__welcome-icon {
+.assistant__welcome-kuma {
+  position: relative;
+  display: block;
   width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, $palette-blue-500 0%, lighten($palette-blue-500, 10%) 100%);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 24px;
-  box-shadow: 0 4px 12px rgba($palette-blue-500, 0.2);
+  height: 94px;
+  margin: 0 auto 18px;
 
-  i {
-    font-size: 36px;
-    color: $white;
+  &::after {
+    content: '';
+    width: 24px;
+    height: 6px;
+    background-color: $palette-neutral-100;
+    border-radius: 100%;
+    transform: translateX(-50%);
+
+    @include absolute(auto, auto, 0, 50%);
   }
 }
 
+.assistant__welcome-video {
+  display: block;
+  width: 80px;
+  height: 80px;
+  outline: 0;
+  margin: 0 auto;
+}
+
 .assistant__welcome-title {
   font-size: 20px;
   font-weight: 600;
@@ -119,7 +130,7 @@
 
 .assistant__welcome-subtitle {
   font-size: 13px;
-  color: $palette-neutral-1200;
+  color: $palette-neutral-900;
   line-height: 1.5;
   margin: 0 0 32px;
 }

enterprise/web-frontend/modules/baserow_enterprise/assets/scss/components/assistant.scss

@@ -26,6 +26,10 @@
           <span class="tree__link-text">{{
             $t('assistantSidebarItem.title')
           }}</span>
+          <i
+            v-show="rightSidebarOpen"
+            class="tree__icon-right iconoir-view-columns-3"
+          ></i>
         </a>
       </div>
       <PaidFeaturesModal
@@ -49,6 +53,11 @@ export default {
       type: Object,
       required: true,
     },
+    rightSidebarOpen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     deactivated() {

enterprise/web-frontend/modules/baserow_enterprise/assets/videos/kuma.mp4

@@ -1,7 +1,23 @@
 <template>
   <div class="assistant__welcome">
-    <div class="assistant__welcome-icon">
-      <i class="iconoir-message-text"></i>
+    <div class="assistant__welcome-kuma">
+      <video
+        :src="video"
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="auto"
+        :poster="image"
+        controlslist="nodownload nofullscreen noplaybackrate noremoteplayback"
+        disablepictureinpicture
+        oncontextmenu="return false;"
+        aria-hidden="true"
+        role="presentation"
+        class="assistant__welcome-video"
+      >
+        <img :src="image" />
+      </video>
     </div>
     <h2 class="assistant__welcome-title">
       <span class="assistant__welcome-title-greeting">
@@ -16,6 +32,9 @@
 </template>
 
 <script>
+import video from '@baserow_enterprise/assets/videos/kuma.mp4'
+import image from '@baserow_enterprise/assets/images/kuma.svg'
+
 export default {
   name: 'AssistantWelcomeMessage',
   props: {
@@ -24,5 +43,13 @@ export default {
       default: 'there',
     },
   },
+  computed: {
+    video() {
+      return video
+    },
+    image() {
+      return image
+    },
+  },
 }
 </script>

enterprise/web-frontend/modules/baserow_enterprise/components/assistant/AssistantSidebarItem.vue

@@ -322,7 +322,7 @@
     "dateDependencyContent": "You can define a dependency between two dates and a duration as start/end date and duration. With date dependency, if one value change, other values will be adjusted accordingly."
   },
   "assistantSidebarItem": {
-    "title": "AI assistant"
+    "title": "Kuma AI"
   },
   "assistantPanel": {
     "title": "AI Assistant",
@@ -332,8 +332,8 @@
   },
   "assistantWelcomeMessage": {
     "greet": "Hey {name}",
-    "question": "how can I help?",
-    "subtitle": "I'm here to support you in handling your data."
+    "question": "my name is Kuma!",
+    "subtitle": "I’ll help you bear the load so it never feels heavy. Choose from the prompts below or just tell me what you need!"
   },
   "assistantInputMessage": {
     "statusWaiting": "Assistant is ready to help",

enterprise/web-frontend/modules/baserow_enterprise/components/assistant/AssistantWelcomeMessage.vue

@@ -139,6 +139,11 @@
   }
 }
 
+.tree__icon-right {
+  margin-left: auto;
+  font-size: 14px;
+}
+
 %tree-sub-size {
   line-height: 32px;
   height: 32px;

enterprise/web-frontend/modules/baserow_enterprise/locales/en.json

@@ -9,9 +9,9 @@ $grid-width: 20px;
 $z-index-layout-col-1: 3 !default;
 $z-index-layout-col-2: 2 !default;
 $z-index-layout-col-3: 1 !default;
-$z-index-layout-resize: 4 !default;
-$z-index-layout-col-3-1: 6 !default;
-$z-index-layout-col-3-2: 5 !default;
+$z-index-layout-col-3-1: 5 !default;
+$z-index-layout-col-3-2: 4 !default;
+$z-index-layout-resize: 6 !default;
 
 // The z-index of modal and context must always be the same because they can be nested
 // inside each other. The order in html decided which must be shown over the other.

web-frontend/modules/core/assets/scss/components/tree.scss

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: false,
     },
+    right: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -53,7 +58,12 @@ export default {
     move(event) {
       event.preventDefault()
       const difference = event.clientX - this.mouseStart
-      let newWidth = Math.max(this.startWidth + difference, this.min)
+      let newWidth = 0
+      if (this.right) {
+        newWidth = Math.max(this.startWidth - difference, this.min)
+      } else {
+        newWidth = Math.max(this.startWidth + difference, this.min)
+      }
       if (this.max) {
         newWidth = Math.min(newWidth, this.max)
       }