feat: move enable help tooltips default true to setting

This commit is contained in:
laansdole 2026-02-10 23:12:07 +07:00
parent 8119391cd5
commit 5e2746600d
6 changed files with 121 additions and 19 deletions

View File

@ -21,6 +21,13 @@
</label>
<p class="setting-desc">Automatically expand message content in the chat view.</p>
</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 class="modal-footer">
<button class="cancel-button" @click="close">Cancel</button>
@ -44,7 +51,8 @@ const props = defineProps({
const localConfig = reactive({
AUTO_SHOW_ADVANCED: false,
AUTO_EXPAND_MESSAGES: false
AUTO_EXPAND_MESSAGES: false,
ENABLE_HELP_TOOLTIPS: true
})
watch(() => props.isVisible, (newVal) => {

View File

@ -3,6 +3,7 @@ import { computed } from 'vue'
import { Handle, Position } from '@vue-flow/core'
import RichTooltip from './RichTooltip.vue'
import { helpContent } from '../utils/helpContent.js'
import { configStore } from '../utils/configStore.js'
const props = defineProps({
id: {
@ -14,16 +15,23 @@ const props = defineProps({
default: () => ({})
}
})
const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
</script>
<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-bubble" title="Start Node"></div>
<!-- Provide source handle at right -->
<Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
</div>
</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>
<style scoped>

View File

@ -4,6 +4,7 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath, getSmoothStepPath, MarkerTy
import { useVueFlow } from '@vue-flow/core'
import RichTooltip from './RichTooltip.vue'
import { getEdgeHelp } from '../utils/helpContent.js'
import { configStore } from '../utils/configStore.js'
const { findNode } = useVueFlow()
@ -566,6 +567,42 @@ const labelStyle = computed(() => {
})
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>
<template>
@ -619,12 +656,12 @@ const edgeHelpContent = computed(() => getEdgeHelp(props.data))
class="nodrag nopan"
/>
<!-- Tooltip-enabled hover area at edge midpoint -->
<EdgeLabelRenderer>
<EdgeLabelRenderer v-if="shouldShowTooltip">
<RichTooltip :content="edgeHelpContent" placement="top">
<div
:style="{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
transform: `translate(-50%, -50%) translate(${tooltipX}px, ${tooltipY}px)`,
pointerEvents: 'all',
width: '20px',
height: '20px',

View File

@ -5,6 +5,7 @@ import { getNodeStyles } from '../utils/colorUtils.js'
import { spriteFetcher } from '../utils/spriteFetcher.js'
import RichTooltip from './RichTooltip.vue'
import { getNodeHelp } from '../utils/helpContent.js'
import { configStore } from '../utils/configStore.js'
const props = defineProps({
id: {
@ -41,6 +42,8 @@ const dynamicStyles = computed(() => getNodeStyles(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
const currentSprite = computed(() => {
if (!props.sprite) return ''
@ -87,7 +90,7 @@ onUnmounted(() => {
</script>
<template>
<RichTooltip v-if="nodeHelpContent" :content="nodeHelpContent" placement="top">
<RichTooltip v-if="shouldShowTooltip" :content="nodeHelpContent" placement="top">
<div class="workflow-node-container">
<div v-if="props.sprite" class="workflow-node-sprite">
<img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />

View File

@ -87,7 +87,7 @@
>
<!-- Pane context menu -->
<template v-if="contextMenuType === 'pane'">
<RichTooltip :content="helpContent.contextMenu.createNode" placement="right">
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.createNode" placement="right">
<div
class="context-menu-item"
@click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
@ -95,11 +95,18 @@
Create Node
</div>
</RichTooltip>
<div
v-else
class="context-menu-item"
@click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
>
Create Node
</div>
</template>
<!-- Node context menu -->
<template v-else-if="contextMenuType === 'node'">
<RichTooltip :content="helpContent.contextMenu.copyNode" placement="right">
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.copyNode" placement="right">
<div
class="context-menu-item"
@click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
@ -107,7 +114,14 @@
Copy Node
</div>
</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
class="context-menu-item"
@click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
@ -115,11 +129,18 @@
Delete Node
</div>
</RichTooltip>
<div
v-else
class="context-menu-item"
@click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
>
Delete Node
</div>
</template>
<!-- Edge context menu -->
<template v-else-if="contextMenuType === 'edge'">
<RichTooltip :content="helpContent.contextMenu.deleteEdge" placement="right">
<RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.deleteEdge" placement="right">
<div
class="context-menu-item"
@click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
@ -127,6 +148,13 @@
Delete Edge
</div>
</RichTooltip>
<div
v-else
class="context-menu-item"
@click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
>
Delete Edge
</div>
</template>
</div>
</transition>
@ -149,21 +177,30 @@
</button>
</div>
<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">
<span>Create Node</span>
</button>
</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">
<span>Configure Graph</span>
</button>
</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">
<span>Launch</span>
</button>
</RichTooltip>
<button v-else @click="goToLaunch" class="launch-button-primary">
<span>Launch</span>
</button>
<div
class="menu-container"
@ -180,21 +217,26 @@
</div>
<transition name="fade">
<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>
</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>
</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>
</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>
</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>
</RichTooltip>
<div v-else @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
</div>
</transition>
</div>
@ -282,7 +324,7 @@
</template>
<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 { VueFlow, useVueFlow, MarkerType } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
@ -298,6 +340,9 @@ import RichTooltip from '../components/RichTooltip.vue'
import yaml from 'js-yaml'
import { fetchYaml, fetchVueGraph, postVuegraphs, updateYaml, postYamlNameChange, postYamlCopy } from '../utils/apiFunctions'
import { helpContent } from '../utils/helpContent.js'
import { configStore } from '../utils/configStore.js'
const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
const props = defineProps({
workflowName: {

View File

@ -4,7 +4,8 @@ const CONFIG_KEY = 'agent_config_settings'
const defaultSettings = {
AUTO_SHOW_ADVANCED: false,
AUTO_EXPAND_MESSAGES: false
AUTO_EXPAND_MESSAGES: false,
ENABLE_HELP_TOOLTIPS: true
}
// Initialize state from localStorage