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,14 +13,28 @@
     <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
-          <div class="chat-messages" ref="chatMessagesRef">
+          class="chat-panel"
-            <!-- Notifications and dialogues in order -->
+          :class="{
-            <div
+            'chat-panel-fullscreen': viewMode === 'chat',
-              v-for="(message, index) in chatMessages"
+            'chat-panel-collapsed': viewMode !== 'chat' && !isChatPanelOpen
-              :key="`message-${index}`"
+          }"
-            >
+          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
+                  v-for="(message, index) in chatMessages"
+                  :key="`message-${index}`"
+                >
               <!-- Notification -->
               <div
                 v-if="['notification', 'warning', 'error'].includes(message.type)"
@@ -169,7 +183,130 @@
               </div>
             </div>
           </div>
+            </div>
+            <div class="input-area">
+              <div
+                :class="['input-shell', { glow: shouldGlow, 'drag-active': isDragActive }]"
+                @dragenter="handleDragEnter"
+                @dragover="handleDragOver"
+                @dragleave="handleDragLeave"
+                @drop="handleDrop"
+              >
+                <textarea
+                  v-model="taskPrompt"
+                  class="task-input"
+                  :disabled="!isConnectionReady || (isWorkflowRunning && status !== 'Waiting for input...')"
+                  placeholder="Please enter task prompt..."
+                  ref="taskInputRef"
+                  @keydown.enter="handleEnterKey"
+                  @paste="handlePaste"
+                ></textarea>
+                <div class="input-footer">
+                  <div class="input-footer-buttons">
+                    <div
+                      class="attachment-upload"
+                      @mouseenter="handleAttachmentHover(true)"
+                      @mouseleave="handleAttachmentHover(false)"
+                    >
+                      <div class="attachment-button-wrapper">
+                        <button
+                          type="button"
+                          class="attachment-button"
+                          :disabled="!isConnectionReady || !sessionId || isUploadingAttachment || (isWorkflowRunning && status !== 'Waiting for input...')"
+                          @click="handleAttachmentButtonClick"
+                        >
+                          {{ isUploadingAttachment ? 'Uploading...' : 'Upload File' }}
+                        </button>
+                        <span
+                          v-if="uploadedAttachments.length"
+                          class="attachment-count"
+                        >
+                          {{ uploadedAttachments.length }}
+                        </span>
+                      </div>
+                      <input
+                        ref="attachmentInputRef"
+                        type="file"
+                        class="hidden-file-input"
+                        @change="onAttachmentSelected"
+                      />
+                      <Transition name="attachment-popover">
+                        <div
+                          v-if="showAttachmentPopover"
+                          class="attachment-modal"
+                          @mouseenter="handleAttachmentHover(true)"
+                          @mouseleave="handleAttachmentHover(false)"
+                        >
+                          <div
+                            v-for="attachment in uploadedAttachments"
+                            :key="attachment.attachmentId"
+                            class="attachment-item"
+                          >
+                            <span class="attachment-name">{{ attachment.name }}</span>
+                            <button
+                              type="button"
+                              class="remove-attachment"
+                              @click.stop="removeAttachment(attachment.attachmentId)"
+                            >
+                              ×
+                            </button>
+                          </div>
+                          <div
+                            v-if="!uploadedAttachments.length"
+                            class="attachment-empty"
+                          >
+                            No files uploaded
+                          </div>
+                        </div>
+                      </Transition>
+                    </div>
+                    <button
+                      v-if="false"
+                      type="button"
+                      class="microphone-button"
+                      :class="{ 'recording': isRecording, 'pulsating': isRecording }"
+                      :disabled="!isConnectionReady || !sessionId || isUploadingAttachment || (isWorkflowRunning && status !== 'Waiting for input...')"
+                      @mousedown.prevent="startRecording"
+                      @mouseup.prevent="stopRecording"
+                      @mouseleave="handleMicrophoneMouseLeave"
+                      @touchstart.prevent="startRecording"
+                      @touchend.prevent="stopRecording"
+                    >
+                      <svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 1C10.34 1 9 2.34 9 4V12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12V4C15 2.34 13.66 1 12 1Z"
+                          fill="currentColor"
+                        />
+                        <path
+                          d="M19 10V12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12V10H7V12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12V10H19Z"
+                          fill="currentColor"
+                        />
+                        <path
+                          d="M11 22H13V20H11V22Z"
+                          fill="currentColor"
+                        />
+                        <path
+                          d="M6 19H18V21H6V19Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <div v-if="isDragActive" class="drag-overlay">
+                  <div class="drag-overlay-content">Drop files to upload</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+
         <div v-show="viewMode === 'graph'" class="graph-panel">
           <VueFlow class="vueflow-graph">
             <template #node-workflow-node="props">
@@ -207,127 +344,6 @@
           </VueFlow>
         </div>
 
-        <!-- Input area -->
-        <div class="input-area">
-          <div
-            :class="['input-shell', { glow: shouldGlow, 'drag-active': isDragActive }]"
-            @dragenter="handleDragEnter"
-            @dragover="handleDragOver"
-            @dragleave="handleDragLeave"
-            @drop="handleDrop"
-          >
-            <textarea
-              v-model="taskPrompt"
-              class="task-input"
-              :disabled="!isConnectionReady || (isWorkflowRunning && status !== 'Waiting for input...')"
-              placeholder="Please enter task prompt..."
-              ref="taskInputRef"
-              @keydown.enter="handleEnterKey"
-              @paste="handlePaste"
-            ></textarea>
-            <div class="input-footer">
-              <div class="input-footer-buttons">
-                <div
-                  class="attachment-upload"
-                  @mouseenter="handleAttachmentHover(true)"
-                  @mouseleave="handleAttachmentHover(false)"
-                >
-                  <div class="attachment-button-wrapper">
-                    <button
-                      type="button"
-                      class="attachment-button"
-                      :disabled="!isConnectionReady || !sessionId || isUploadingAttachment || (isWorkflowRunning && status !== 'Waiting for input...')"
-                      @click="handleAttachmentButtonClick"
-                    >
-                      {{ isUploadingAttachment ? 'Uploading...' : 'Upload File' }}
-                    </button>
-                    <span
-                      v-if="uploadedAttachments.length"
-                      class="attachment-count"
-                    >
-                      {{ uploadedAttachments.length }}
-                    </span>
-                  </div>
-                  <input
-                    ref="attachmentInputRef"
-                    type="file"
-                    class="hidden-file-input"
-                    @change="onAttachmentSelected"
-                  />
-                  <Transition name="attachment-popover">
-                    <div
-                      v-if="showAttachmentPopover"
-                      class="attachment-modal"
-                      @mouseenter="handleAttachmentHover(true)"
-                      @mouseleave="handleAttachmentHover(false)"
-                    >
-                      <div
-                        v-for="attachment in uploadedAttachments"
-                        :key="attachment.attachmentId"
-                        class="attachment-item"
-                      >
-                        <span class="attachment-name">{{ attachment.name }}</span>
-                        <button
-                          type="button"
-                          class="remove-attachment"
-                          @click.stop="removeAttachment(attachment.attachmentId)"
-                        >
-                          ×
-                        </button>
-                      </div>
-                      <div
-                        v-if="!uploadedAttachments.length"
-                        class="attachment-empty"
-                      >
-                        No files uploaded
-                      </div>
-                    </div>
-                  </Transition>
-                </div>
-                <button
-                  v-if="false"
-                  type="button"
-                  class="microphone-button"
-                  :class="{ 'recording': isRecording, 'pulsating': isRecording }"
-                  :disabled="!isConnectionReady || !sessionId || isUploadingAttachment || (isWorkflowRunning && status !== 'Waiting for input...')"
-                  @mousedown.prevent="startRecording"
-                  @mouseup.prevent="stopRecording"
-                  @mouseleave="handleMicrophoneMouseLeave"
-                  @touchstart.prevent="startRecording"
-                  @touchend.prevent="stopRecording"
-                >
-                  <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 1C10.34 1 9 2.34 9 4V12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12V4C15 2.34 13.66 1 12 1Z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="M19 10V12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12V10H7V12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12V10H19Z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="M11 22H13V20H11V22Z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="M6 19H18V21H6V19Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div v-if="isDragActive" class="drag-overlay">
-              <div class="drag-overlay-content">Drop files to upload</div>
-            </div>
-          </div>
-        </div>
       </div>
 
       <!-- 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',