mirror of
https://github.com/OpenBMB/ChatDev.git
synced 2026-04-25 11:18:06 +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>
|
||||
<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) => {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user