Merge branch 'OpenBMB:main' into main

frontend/src/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="sidebar">
+    <div class="sidebar" :class="{ 'is-hidden': isHidden }" @mouseenter="isHidden = false">
 
         <nav class="sidebar-nav">
             <router-link to="/">Home</router-link>
@@ -20,6 +20,7 @@
             </button>
         </div>
     </div>
+    <div class="sidebar-hit-area" v-if="isHidden" @mouseenter="isHidden = false"></div>
     <SettingsModal
       :is-visible="showSettingsModal"
       @update:is-visible="showSettingsModal = $event"
@@ -28,21 +29,61 @@
 
 <script setup>
 import { RouterLink, useRoute } from 'vue-router'
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
 import SettingsModal from './SettingsModal.vue'
 
 const showSettingsModal = ref(false)
+const isHidden = ref(false)
+
+watch(isHidden, (val) => {
+    if (val) {
+        document.body.classList.add('nav-hidden')
+    } else {
+        document.body.classList.remove('nav-hidden')
+    }
+})
 
 const route = useRoute()
 const isWorkflowsActive = computed(() => route.path.startsWith('/workflows'))
 
+let lastScrollY = 0
+const handleScroll = (e) => {
+    const currentScrollY = e.target.scrollTop || window.scrollY || 0;
+    // Minimize small scroll jitters
+    if (Math.abs(currentScrollY - lastScrollY) < 5) return;
 
+    // Scrolling down -> hide (if past slight threshold). Scrolling up -> show
+    if (currentScrollY > lastScrollY && currentScrollY > 10) {
+        isHidden.value = true;
+    } else if (currentScrollY < lastScrollY) {
+        isHidden.value = false;
+    }
+    lastScrollY = currentScrollY <= 0 ? 0 : currentScrollY;
+}
+
+const toggleScrollListener = (shouldListen) => {
+    if (shouldListen) {
+        window.addEventListener('scroll', handleScroll, true);
+    } else {
+        window.removeEventListener('scroll', handleScroll, true);
+        isHidden.value = false; // Reset state when leaving
+    }
+}
+
+watch(() => route.path, () => {
+    toggleScrollListener(!!route.meta.hideNavOnScroll);
+}, { immediate: true }) // immediate: true runs this once on mount
+
+onUnmounted(() => {
+    toggleScrollListener(false);
+    document.body.classList.remove('nav-hidden');
+})
 </script>
 
 <style scoped>
 .sidebar {
     width: 100%;
-    background-color: #1a1a1a; /* Dark theme background */
+    background-color: #1a1a1a;
     padding: 0 24px 0 0;
     box-sizing: border-box;
     display: flex;
@@ -52,8 +93,24 @@ const isWorkflowsActive = computed(() => route.path.startsWith('/workflows'))
     top: 0;
     z-index: 100;
     border-bottom: 1px solid #4d4d4d;
-    position: relative; /* For absolute positioning of actions */
     justify-content: center;
+    transition: margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-top: 0;
+    transform: translateY(0);
+}
+
+.sidebar.is-hidden {
+    margin-top: -55px;
+    transform: translateY(-100%);
+}
+
+.sidebar-hit-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 25px;
+    z-index: 99;
 }
 
 .sidebar-actions {

frontend/src/pages/LaunchView.vue

@@ -13,8 +13,22 @@
     <div class="content">
       <!-- Left panel -->
       <div class="left-panel">
-        <!-- Chat area -->
+        <!-- Chat Panel: fullscreen in chat mode, overlay in graph -->
-        <div v-show="viewMode === 'chat'" class="chat-box">
+        <div
+          class="chat-panel"
+          :class="{
+            'chat-panel-fullscreen': viewMode === 'chat',
+            'chat-panel-collapsed': viewMode !== 'chat' && !isChatPanelOpen
+          }"
+          v-show="viewMode === 'chat' || true"
+        >
+          <button v-show="viewMode !== 'chat'" class="chat-panel-toggle" @click="isChatPanelOpen = !isChatPanelOpen" :title="isChatPanelOpen ? 'Collapse chat' : 'Expand chat'">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="{ 'chevron-collapsed': !isChatPanelOpen }">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+          </button>
+          <div v-show="viewMode === 'chat' || isChatPanelOpen" class="chat-panel-content">
+            <div class="chat-box">
               <div class="chat-messages" ref="chatMessagesRef">
                 <!-- Notifications and dialogues in order -->
                 <div
@@ -170,44 +184,6 @@
             </div>
           </div>
             </div>
-        <div v-show="viewMode === 'graph'" class="graph-panel">
-          <VueFlow class="vueflow-graph">
-            <template #node-workflow-node="props">
-              <WorkflowNode
-                :id="props.id"
-                :data="props.data"
-                :is-active="activeNodes.includes(props.id)"
-                :sprite="nodeSpriteMap.get(props.id) || ''"
-                @hover="onNodeHover"
-                @leave="onNodeLeave"
-              />
-            </template>
-            <template #node-start-node="props">
-              <StartNode :id="props.id" :data="props.data" />
-            </template>
-            <template #edge-workflow-edge="props">
-              <WorkflowEdge
-                :id="props.id"
-                :source="props.source"
-                :target="props.target"
-                :source-x="props.sourceX"
-                :source-y="props.sourceY"
-                :target-x="props.targetX"
-                :target-y="props.targetY"
-                :source-position="props.sourcePosition"
-                :target-position="props.targetPosition"
-                :data="props.data"
-                :marker-end="props.markerEnd"
-                :animated="props.animated"
-                :hovered-node-id="hoveredNodeId"
-              />
-            </template>
-            <Background pattern-color="#aaa"/>
-            <Controls position="bottom-left"/>
-          </VueFlow>
-        </div>
-
-        <!-- Input area -->
             <div class="input-area">
               <div
                 :class="['input-shell', { glow: shouldGlow, 'drag-active': isDragActive }]"
@@ -329,6 +305,46 @@
               </div>
             </div>
           </div>
+        </div>
+
+        <div v-show="viewMode === 'graph'" class="graph-panel">
+          <VueFlow class="vueflow-graph">
+            <template #node-workflow-node="props">
+              <WorkflowNode
+                :id="props.id"
+                :data="props.data"
+                :is-active="activeNodes.includes(props.id)"
+                :sprite="nodeSpriteMap.get(props.id) || ''"
+                @hover="onNodeHover"
+                @leave="onNodeLeave"
+              />
+            </template>
+            <template #node-start-node="props">
+              <StartNode :id="props.id" :data="props.data" />
+            </template>
+            <template #edge-workflow-edge="props">
+              <WorkflowEdge
+                :id="props.id"
+                :source="props.source"
+                :target="props.target"
+                :source-x="props.sourceX"
+                :source-y="props.sourceY"
+                :target-x="props.targetX"
+                :target-y="props.targetY"
+                :source-position="props.sourcePosition"
+                :target-position="props.targetPosition"
+                :data="props.data"
+                :marker-end="props.markerEnd"
+                :animated="props.animated"
+                :hovered-node-id="hoveredNodeId"
+              />
+            </template>
+            <Background pattern-color="#aaa"/>
+            <Controls position="bottom-left"/>
+          </VueFlow>
+        </div>
+
+      </div>
 
       <!-- Right panel -->
       <div class="right-panel">
@@ -679,6 +695,7 @@ const showSettingsModal = ref(false)
 
 // View mode
 const viewMode = ref('chat')
+const isChatPanelOpen = ref(true)
 
 // WebSocket reference
 let ws = null
@@ -2346,18 +2363,106 @@ watch(
   flex-direction: column;
   gap: 20px;
   min-width: 0; /* Prevents overflow */
+  position: relative;
+}
+
+/* Persistent Chat Panel */
+.chat-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 380px;
+  max-width: 50%;
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  pointer-events: none;
+  transition: width 0.3s ease;
+}
+
+/* Full-screen chat mode */
+.chat-panel-fullscreen {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  flex: 1;
+  flex-direction: column;
+  pointer-events: auto;
+  z-index: auto;
+}
+
+.chat-panel-fullscreen .chat-panel-content {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+}
+
+.chat-panel-collapsed {
+  width: 0;
+}
+
+.chat-panel-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  pointer-events: auto;
+  background: rgba(26, 26, 26, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  backdrop-filter: blur(12px);
+  overflow: hidden;
+  padding: 0;
+}
+
+.chat-panel-toggle {
+  position: absolute;
+  top: 12px;
+  right: -32px;
+  width: 28px;
+  height: 28px;
+  border-radius: 0 8px 8px 0;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-left: none;
+  background: rgba(26, 26, 26, 0.92);
+  backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  transition: all 0.2s ease;
+  padding: 0;
+  z-index: 11;
+}
+
+.chat-panel-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #f2f2f2;
+}
+
+.chat-panel-toggle svg {
+  transition: transform 0.3s ease;
+}
+
+.chat-panel-toggle .chevron-collapsed {
+  transform: rotate(180deg);
+}
+
+.chat-panel-collapsed .chat-panel-toggle {
+  right: -32px;
+  left: auto;
 }
 
 /* Chat Box */
 .chat-box {
   flex: 1;
-  background-color: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  backdrop-filter: blur(5px);
 }
 
 .chat-messages::-webkit-scrollbar {
@@ -2411,6 +2516,8 @@ watch(
   font-size: 13px;
   font-weight: 500;
   text-align: center;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .chat-notification-warning .notification-content {
@@ -2425,9 +2532,6 @@ watch(
 .chat-notification-error .notification-content {
   background: rgba(255, 82, 82, 0.12);
   border-color: rgba(255, 82, 82, 0.4);
-}
-
-.chat-notification-error .notification-content {
   color: #ffcccc;
 }
 

frontend/src/pages/TutorialView.vue

@@ -128,26 +128,36 @@ onMounted(() => {
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
-  height: 100vh;
+  height: calc(100vh - 55px); /* Adjust the height of the .sidebar */
   background: linear-gradient(135deg, #232526 0%, #1e1e1e 100%);
   overflow-y: auto;
   overflow-x: hidden;
   box-sizing: border-box;
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   /* Glowing border and card shadow */
   border-radius: 18px;
   box-shadow: 0 4px 32px 0 rgba(0, 255, 255, 0.08), 0 0 0 2px #00eaff33;
   border: 1.5px solid #00eaff33;
-  transition: box-shadow 0.3s;
+  transition: box-shadow 0.3s, height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   scroll-behavior: smooth;
 }
 
+:global(body.nav-hidden .tutorial-view) {
+  height: 100vh;
+}
+
 .lang-switch {
   position: absolute;
-  top: 80px; /* Move down from 32px to 80px */
+  top: 80px; /* 55px nav + 25px spacing */
   right: 48px;
   z-index: 10;
   display: flex;
   gap: 12px;
+  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:global(body.nav-hidden .lang-switch) {
+  top: 25px; /* Adjust to 25px spacing from top of screen when nav is hidden */
 }
 .lang-switch button {
   background: linear-gradient(90deg, #232526 60%, #00eaff22 100%);

frontend/src/router/index.js

@@ -7,7 +7,8 @@ const routes = [
     },
     {
         path: '/tutorial',
-        component: () => import('../pages/TutorialView.vue')
+        component: () => import('../pages/TutorialView.vue'),
+        meta: { hideNavOnScroll: true }
     },
     {
         path: '/launch',