mirror of
https://github.com/OpenBMB/ChatDev.git
synced 2026-05-30 12:18:30 +00:00
feat: move enable help tooltips default true to setting
This commit is contained in:
parent
8119391cd5
commit
5e2746600d
@ -21,6 +21,13 @@
|
|||||||
</label>
|
</label>
|
||||||
<p class="setting-desc">Automatically expand message content in the chat view.</p>
|
<p class="setting-desc">Automatically expand message content in the chat view.</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="settings-item">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<input type="checkbox" v-model="localConfig.ENABLE_HELP_TOOLTIPS">
|
||||||
|
Enable help tooltips
|
||||||
|
</label>
|
||||||
|
<p class="setting-desc">Show contextual help tooltips throughout the workflow interface.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="cancel-button" @click="close">Cancel</button>
|
<button class="cancel-button" @click="close">Cancel</button>
|
||||||
@ -44,7 +51,8 @@ const props = defineProps({
|
|||||||
|
|
||||||
const localConfig = reactive({
|
const localConfig = reactive({
|
||||||
AUTO_SHOW_ADVANCED: false,
|
AUTO_SHOW_ADVANCED: false,
|
||||||
AUTO_EXPAND_MESSAGES: false
|
AUTO_EXPAND_MESSAGES: false,
|
||||||
|
ENABLE_HELP_TOOLTIPS: true
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(() => props.isVisible, (newVal) => {
|
watch(() => props.isVisible, (newVal) => {
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { computed } from 'vue'
|
|||||||
import { Handle, Position } from '@vue-flow/core'
|
import { Handle, Position } from '@vue-flow/core'
|
||||||
import RichTooltip from './RichTooltip.vue'
|
import RichTooltip from './RichTooltip.vue'
|
||||||
import { helpContent } from '../utils/helpContent.js'
|
import { helpContent } from '../utils/helpContent.js'
|
||||||
|
import { configStore } from '../utils/configStore.js'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: {
|
id: {
|
||||||
@ -14,16 +15,23 @@ const props = defineProps({
|
|||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<RichTooltip :content="helpContent.startNode" placement="right">
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.startNode" placement="right">
|
||||||
<div class="start-node" :style="{ opacity: data.opacity ?? 1 }">
|
<div class="start-node" :style="{ opacity: data.opacity ?? 1 }">
|
||||||
<div class="start-node-bubble" title="Start Node"></div>
|
<div class="start-node-bubble" title="Start Node"></div>
|
||||||
<!-- Provide source handle at right -->
|
<!-- Provide source handle at right -->
|
||||||
<Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
|
<Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
|
||||||
</div>
|
</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
|
<div v-else class="start-node" :style="{ opacity: data.opacity ?? 1 }">
|
||||||
|
<div class="start-node-bubble" title="Start Node"></div>
|
||||||
|
<!-- Provide source handle at right -->
|
||||||
|
<Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath, getSmoothStepPath, MarkerTy
|
|||||||
import { useVueFlow } from '@vue-flow/core'
|
import { useVueFlow } from '@vue-flow/core'
|
||||||
import RichTooltip from './RichTooltip.vue'
|
import RichTooltip from './RichTooltip.vue'
|
||||||
import { getEdgeHelp } from '../utils/helpContent.js'
|
import { getEdgeHelp } from '../utils/helpContent.js'
|
||||||
|
import { configStore } from '../utils/configStore.js'
|
||||||
|
|
||||||
const { findNode } = useVueFlow()
|
const { findNode } = useVueFlow()
|
||||||
|
|
||||||
@ -566,6 +567,42 @@ const labelStyle = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const edgeHelpContent = computed(() => getEdgeHelp(props.data))
|
const edgeHelpContent = computed(() => getEdgeHelp(props.data))
|
||||||
|
|
||||||
|
// Compute tooltip position (geometric midpoint of edge path)
|
||||||
|
const tooltipX = computed(() => {
|
||||||
|
const sourceNode = findNode(props.source)
|
||||||
|
const targetNode = findNode(props.target)
|
||||||
|
const isSelfLoop = props.source === props.target
|
||||||
|
const isLeftwardEdge = props.targetX < props.sourceX
|
||||||
|
|
||||||
|
// For self-loops and leftward edges with arc paths, use arc midpoint calculation
|
||||||
|
if (isSelfLoop || isLeftwardEdge) {
|
||||||
|
// Return labelX for arcs (already computed as arc midpoint)
|
||||||
|
return labelX.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// For bezier paths, compute midpoint at t=0.5
|
||||||
|
return (props.sourceX + props.targetX) / 2
|
||||||
|
})
|
||||||
|
|
||||||
|
const tooltipY = computed(() => {
|
||||||
|
const sourceNode = findNode(props.source)
|
||||||
|
const targetNode = findNode(props.target)
|
||||||
|
const isSelfLoop = props.source === props.target
|
||||||
|
const isLeftwardEdge = props.targetX < props.sourceX
|
||||||
|
|
||||||
|
// For self-loops and leftward edges with arc paths, use arc midpoint calculation
|
||||||
|
if (isSelfLoop || isLeftwardEdge) {
|
||||||
|
// Return labelY for arcs (already computed as arc midpoint)
|
||||||
|
return labelY.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// For bezier paths, compute midpoint at t=0.5
|
||||||
|
return (props.sourceY + props.targetY) / 2
|
||||||
|
})
|
||||||
|
|
||||||
|
const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -619,12 +656,12 @@ const edgeHelpContent = computed(() => getEdgeHelp(props.data))
|
|||||||
class="nodrag nopan"
|
class="nodrag nopan"
|
||||||
/>
|
/>
|
||||||
<!-- Tooltip-enabled hover area at edge midpoint -->
|
<!-- Tooltip-enabled hover area at edge midpoint -->
|
||||||
<EdgeLabelRenderer>
|
<EdgeLabelRenderer v-if="shouldShowTooltip">
|
||||||
<RichTooltip :content="edgeHelpContent" placement="top">
|
<RichTooltip :content="edgeHelpContent" placement="top">
|
||||||
<div
|
<div
|
||||||
:style="{
|
:style="{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
|
transform: `translate(-50%, -50%) translate(${tooltipX}px, ${tooltipY}px)`,
|
||||||
pointerEvents: 'all',
|
pointerEvents: 'all',
|
||||||
width: '20px',
|
width: '20px',
|
||||||
height: '20px',
|
height: '20px',
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import { getNodeStyles } from '../utils/colorUtils.js'
|
|||||||
import { spriteFetcher } from '../utils/spriteFetcher.js'
|
import { spriteFetcher } from '../utils/spriteFetcher.js'
|
||||||
import RichTooltip from './RichTooltip.vue'
|
import RichTooltip from './RichTooltip.vue'
|
||||||
import { getNodeHelp } from '../utils/helpContent.js'
|
import { getNodeHelp } from '../utils/helpContent.js'
|
||||||
|
import { configStore } from '../utils/configStore.js'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: {
|
id: {
|
||||||
@ -41,6 +42,8 @@ const dynamicStyles = computed(() => getNodeStyles(nodeType.value))
|
|||||||
|
|
||||||
const nodeHelpContent = computed(() => getNodeHelp(nodeType.value))
|
const nodeHelpContent = computed(() => getNodeHelp(nodeType.value))
|
||||||
|
|
||||||
|
const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS && nodeHelpContent.value)
|
||||||
|
|
||||||
// Compute the current sprite path based on active state and walking frame
|
// Compute the current sprite path based on active state and walking frame
|
||||||
const currentSprite = computed(() => {
|
const currentSprite = computed(() => {
|
||||||
if (!props.sprite) return ''
|
if (!props.sprite) return ''
|
||||||
@ -87,7 +90,7 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<RichTooltip v-if="nodeHelpContent" :content="nodeHelpContent" placement="top">
|
<RichTooltip v-if="shouldShowTooltip" :content="nodeHelpContent" placement="top">
|
||||||
<div class="workflow-node-container">
|
<div class="workflow-node-container">
|
||||||
<div v-if="props.sprite" class="workflow-node-sprite">
|
<div v-if="props.sprite" class="workflow-node-sprite">
|
||||||
<img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />
|
<img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />
|
||||||
|
|||||||
@ -87,7 +87,7 @@
|
|||||||
>
|
>
|
||||||
<!-- Pane context menu -->
|
<!-- Pane context menu -->
|
||||||
<template v-if="contextMenuType === 'pane'">
|
<template v-if="contextMenuType === 'pane'">
|
||||||
<RichTooltip :content="helpContent.contextMenu.createNode" placement="right">
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.createNode" placement="right">
|
||||||
<div
|
<div
|
||||||
class="context-menu-item"
|
class="context-menu-item"
|
||||||
@click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
|
@click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
|
||||||
@ -95,11 +95,18 @@
|
|||||||
Create Node
|
Create Node
|
||||||
</div>
|
</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="context-menu-item"
|
||||||
|
@click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
|
||||||
|
>
|
||||||
|
Create Node
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Node context menu -->
|
<!-- Node context menu -->
|
||||||
<template v-else-if="contextMenuType === 'node'">
|
<template v-else-if="contextMenuType === 'node'">
|
||||||
<RichTooltip :content="helpContent.contextMenu.copyNode" placement="right">
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.copyNode" placement="right">
|
||||||
<div
|
<div
|
||||||
class="context-menu-item"
|
class="context-menu-item"
|
||||||
@click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
|
@click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
|
||||||
@ -107,7 +114,14 @@
|
|||||||
Copy Node
|
Copy Node
|
||||||
</div>
|
</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
<RichTooltip :content="helpContent.contextMenu.deleteNode" placement="right">
|
<div
|
||||||
|
v-else
|
||||||
|
class="context-menu-item"
|
||||||
|
@click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
|
||||||
|
>
|
||||||
|
Copy Node
|
||||||
|
</div>
|
||||||
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.deleteNode" placement="right">
|
||||||
<div
|
<div
|
||||||
class="context-menu-item"
|
class="context-menu-item"
|
||||||
@click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
|
@click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
|
||||||
@ -115,11 +129,18 @@
|
|||||||
Delete Node
|
Delete Node
|
||||||
</div>
|
</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="context-menu-item"
|
||||||
|
@click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
|
||||||
|
>
|
||||||
|
Delete Node
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Edge context menu -->
|
<!-- Edge context menu -->
|
||||||
<template v-else-if="contextMenuType === 'edge'">
|
<template v-else-if="contextMenuType === 'edge'">
|
||||||
<RichTooltip :content="helpContent.contextMenu.deleteEdge" placement="right">
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.deleteEdge" placement="right">
|
||||||
<div
|
<div
|
||||||
class="context-menu-item"
|
class="context-menu-item"
|
||||||
@click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
|
@click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
|
||||||
@ -127,6 +148,13 @@
|
|||||||
Delete Edge
|
Delete Edge
|
||||||
</div>
|
</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="context-menu-item"
|
||||||
|
@click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
|
||||||
|
>
|
||||||
|
Delete Edge
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
@ -149,21 +177,30 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="activeTab === 'graph'" class="editor-actions">
|
<div v-if="activeTab === 'graph'" class="editor-actions">
|
||||||
<RichTooltip :content="helpContent.contextMenu.createNodeButton" placement="bottom">
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.createNodeButton" placement="bottom">
|
||||||
<button @click="openCreateNodeModal" class="glass-button">
|
<button @click="openCreateNodeModal" class="glass-button">
|
||||||
<span>Create Node</span>
|
<span>Create Node</span>
|
||||||
</button>
|
</button>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
<RichTooltip :content="helpContent.contextMenu.configureGraph" placement="bottom">
|
<button v-else @click="openCreateNodeModal" class="glass-button">
|
||||||
|
<span>Create Node</span>
|
||||||
|
</button>
|
||||||
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.configureGraph" placement="bottom">
|
||||||
<button @click="openConfigureGraphModal" class="glass-button">
|
<button @click="openConfigureGraphModal" class="glass-button">
|
||||||
<span>Configure Graph</span>
|
<span>Configure Graph</span>
|
||||||
</button>
|
</button>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
<RichTooltip :content="helpContent.contextMenu.launch" placement="bottom">
|
<button v-else @click="openConfigureGraphModal" class="glass-button">
|
||||||
|
<span>Configure Graph</span>
|
||||||
|
</button>
|
||||||
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.launch" placement="bottom">
|
||||||
<button @click="goToLaunch" class="launch-button-primary">
|
<button @click="goToLaunch" class="launch-button-primary">
|
||||||
<span>Launch</span>
|
<span>Launch</span>
|
||||||
</button>
|
</button>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
|
<button v-else @click="goToLaunch" class="launch-button-primary">
|
||||||
|
<span>Launch</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="menu-container"
|
class="menu-container"
|
||||||
@ -180,21 +217,26 @@
|
|||||||
</div>
|
</div>
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<div v-if="showMenu" class="menu-dropdown">
|
<div v-if="showMenu" class="menu-dropdown">
|
||||||
<RichTooltip :content="helpContent.contextMenu.renameWorkflow" placement="left">
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.renameWorkflow" placement="left">
|
||||||
<div @click="openRenameWorkflowModal" class="menu-item">Rename Workflow</div>
|
<div @click="openRenameWorkflowModal" class="menu-item">Rename Workflow</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
<RichTooltip :content="helpContent.contextMenu.copyWorkflow" placement="left">
|
<div v-else @click="openRenameWorkflowModal" class="menu-item">Rename Workflow</div>
|
||||||
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.copyWorkflow" placement="left">
|
||||||
<div @click="openCopyWorkflowModal" class="menu-item">Copy Workflow</div>
|
<div @click="openCopyWorkflowModal" class="menu-item">Copy Workflow</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
<RichTooltip :content="helpContent.contextMenu.manageVariables" placement="left">
|
<div v-else @click="openCopyWorkflowModal" class="menu-item">Copy Workflow</div>
|
||||||
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.manageVariables" placement="left">
|
||||||
<div @click="openManageVarsModal" class="menu-item">Manage Variables</div>
|
<div @click="openManageVarsModal" class="menu-item">Manage Variables</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
<RichTooltip :content="helpContent.contextMenu.manageMemories" placement="left">
|
<div v-else @click="openManageVarsModal" class="menu-item">Manage Variables</div>
|
||||||
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.manageMemories" placement="left">
|
||||||
<div @click="openManageMemoriesModal" class="menu-item">Manage Memories</div>
|
<div @click="openManageMemoriesModal" class="menu-item">Manage Memories</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
<RichTooltip :content="helpContent.contextMenu.createEdge" placement="left">
|
<div v-else @click="openManageMemoriesModal" class="menu-item">Manage Memories</div>
|
||||||
|
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.createEdge" placement="left">
|
||||||
<div @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
|
<div @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
|
||||||
</RichTooltip>
|
</RichTooltip>
|
||||||
|
<div v-else @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
@ -282,7 +324,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, watch, nextTick, onMounted, onBeforeUnmount, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { VueFlow, useVueFlow, MarkerType } from '@vue-flow/core'
|
import { VueFlow, useVueFlow, MarkerType } from '@vue-flow/core'
|
||||||
import { Background } from '@vue-flow/background'
|
import { Background } from '@vue-flow/background'
|
||||||
@ -298,6 +340,9 @@ import RichTooltip from '../components/RichTooltip.vue'
|
|||||||
import yaml from 'js-yaml'
|
import yaml from 'js-yaml'
|
||||||
import { fetchYaml, fetchVueGraph, postVuegraphs, updateYaml, postYamlNameChange, postYamlCopy } from '../utils/apiFunctions'
|
import { fetchYaml, fetchVueGraph, postVuegraphs, updateYaml, postYamlNameChange, postYamlCopy } from '../utils/apiFunctions'
|
||||||
import { helpContent } from '../utils/helpContent.js'
|
import { helpContent } from '../utils/helpContent.js'
|
||||||
|
import { configStore } from '../utils/configStore.js'
|
||||||
|
|
||||||
|
const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
workflowName: {
|
workflowName: {
|
||||||
|
|||||||
@ -4,7 +4,8 @@ const CONFIG_KEY = 'agent_config_settings'
|
|||||||
|
|
||||||
const defaultSettings = {
|
const defaultSettings = {
|
||||||
AUTO_SHOW_ADVANCED: false,
|
AUTO_SHOW_ADVANCED: false,
|
||||||
AUTO_EXPAND_MESSAGES: false
|
AUTO_EXPAND_MESSAGES: false,
|
||||||
|
ENABLE_HELP_TOOLTIPS: true
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize state from localStorage
|
// Initialize state from localStorage
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user