chore: improve toggle env/conversation/global var panel

This commit is contained in:
hjlarry 2025-10-29 22:08:04 +08:00
parent 6767a8f72c
commit 48b1829b14
3 changed files with 32 additions and 5 deletions

View File

@ -7,13 +7,16 @@ import cn from '@/utils/classnames'
const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
const { theme } = useTheme()
const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
const handleClick = () => {
setShowChatVariablePanel(true)
setShowEnvPanel(false)
setShowGlobalVariablePanel(false)
setShowDebugAndPreviewPanel(false)
}
@ -21,7 +24,7 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
<Button
className={cn(
'p-2',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
theme === 'dark' && showChatVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
disabled={disabled}
onClick={handleClick}

View File

@ -9,13 +9,16 @@ import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
const EnvButton = ({ disabled }: { disabled: boolean }) => {
const { theme } = useTheme()
const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
const showEnvPanel = useStore(s => s.showEnvPanel)
const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
const { closeAllInputFieldPanels } = useInputFieldPanel()
const handleClick = () => {
setShowEnvPanel(true)
setShowChatVariablePanel(false)
setShowGlobalVariablePanel(false)
setShowDebugAndPreviewPanel(false)
closeAllInputFieldPanels()
}
@ -24,7 +27,7 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
<Button
className={cn(
'p-2',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
theme === 'dark' && showEnvPanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
variant='ghost'
disabled={disabled}

View File

@ -2,16 +2,37 @@ import { memo } from 'react'
import Button from '@/app/components/base/button'
import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
import { useStore } from '@/app/components/workflow/store'
import useTheme from '@/hooks/use-theme'
import cn from '@/utils/classnames'
import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
const setShowPanel = useStore(s => s.setShowGlobalVariablePanel)
const { theme } = useTheme()
const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
const { closeAllInputFieldPanels } = useInputFieldPanel()
const handleClick = () => {
setShowPanel(true)
setShowGlobalVariablePanel(true)
setShowEnvPanel(false)
setShowChatVariablePanel(false)
setShowDebugAndPreviewPanel(false)
closeAllInputFieldPanels()
}
return (
<Button className='p-2' disabled={disabled} onClick={handleClick} variant='ghost'>
<Button
className={cn(
'p-2',
theme === 'dark' && showGlobalVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
disabled={disabled}
onClick={handleClick}
variant='ghost'
>
<GlobalVariable className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)