mirror of
https://github.com/OpenBMB/ChatDev.git
synced 2026-04-25 11:18:06 +00:00
Merge branch 'OpenBMB:main' into main
This commit is contained in:
Yufan Dang
GitHub
commit
68fb2fb8f1
@ -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 {
|
||||
|
||||
@ -13,8 +13,22 @@
|
||||
<div class="content">
|
||||
<!-- Left panel -->
|
||||
<div class="left-panel">
|
||||
<!-- Chat area -->
|
||||
<div v-show="viewMode === 'chat'" class="chat-box">
|
||||
<!-- Chat Panel: fullscreen in chat mode, overlay in graph -->
|
||||
<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;
|
||||
}
|
||||
|
||||
|
||||
@ -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%);
|
||||
|
||||
@ -7,7 +7,8 @@ const routes = [
|
||||
},
|
||||
{
|
||||
path: '/tutorial',
|
||||
component: () => import('../pages/TutorialView.vue')
|
||||
component: () => import('../pages/TutorialView.vue'),
|
||||
meta: { hideNavOnScroll: true }
|
||||
},
|
||||
{
|
||||
path: '/launch',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user