From 5e2746600db230fed3cbbd435090206f9a3f15c4 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Tue, 10 Feb 2026 23:12:07 +0700
Subject: [PATCH] feat: move enable help tooltips default true to setting

---
 frontend/src/components/SettingsModal.vue | 10 +++-
 frontend/src/components/StartNode.vue     | 10 +++-
 frontend/src/components/WorkflowEdge.vue  | 41 ++++++++++++-
 frontend/src/components/WorkflowNode.vue  |  5 +-
 frontend/src/pages/WorkflowView.vue       | 71 ++++++++++++++++++-----
 frontend/src/utils/configStore.js         |  3 +-
 6 files changed, 121 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/SettingsModal.vue b/frontend/src/components/SettingsModal.vue
index 0fc4ce28..b3f3fde6 100755
--- a/frontend/src/components/SettingsModal.vue
+++ b/frontend/src/components/SettingsModal.vue
@@ -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) => {
diff --git a/frontend/src/components/StartNode.vue b/frontend/src/components/StartNode.vue
index 1aa0b20a..9c9ef011 100755
--- a/frontend/src/components/StartNode.vue
+++ b/frontend/src/components/StartNode.vue
@@ -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>
diff --git a/frontend/src/components/WorkflowEdge.vue b/frontend/src/components/WorkflowEdge.vue
index a04cdf7c..3abb6c50 100755
--- a/frontend/src/components/WorkflowEdge.vue
+++ b/frontend/src/components/WorkflowEdge.vue
@@ -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',
diff --git a/frontend/src/components/WorkflowNode.vue b/frontend/src/components/WorkflowNode.vue
index dccc9b97..a79cf954 100755
--- a/frontend/src/components/WorkflowNode.vue
+++ b/frontend/src/components/WorkflowNode.vue
@@ -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" />
diff --git a/frontend/src/pages/WorkflowView.vue b/frontend/src/pages/WorkflowView.vue
index 21bac43a..78ba5d72 100755
--- a/frontend/src/pages/WorkflowView.vue
+++ b/frontend/src/pages/WorkflowView.vue
@@ -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: {
diff --git a/frontend/src/utils/configStore.js b/frontend/src/utils/configStore.js
index ce015601..ddd0c95f 100755
--- a/frontend/src/utils/configStore.js
+++ b/frontend/src/utils/configStore.js
@@ -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