fix: styles and missing imports (#18396)

This commit is contained in:
crazywoola 2025-04-19 14:46:10 +08:00 committed by GitHub
parent 1e32175cdc
commit 93c1ee225e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 10 deletions

View File

@ -9,7 +9,10 @@ const MarkdownMusic = ({ children }: { children: React.ReactNode }) => {
useEffect(() => { useEffect(() => {
if (containerRef.current && controlsRef.current) { if (containerRef.current && controlsRef.current) {
if (typeof children === 'string') { if (typeof children === 'string') {
const visualObjs = abcjs.renderAbc(containerRef.current, children) const visualObjs = abcjs.renderAbc(containerRef.current, children, {
add_classes: true, // Add classes to SVG elements for cursor tracking
responsive: 'resize', // Make notation responsive
})
const synthControl = new abcjs.synth.SynthController() const synthControl = new abcjs.synth.SynthController()
synthControl.load(controlsRef.current, {}, { displayPlay: true }) synthControl.load(controlsRef.current, {}, { displayPlay: true })
const synth = new abcjs.synth.CreateSynth() const synth = new abcjs.synth.CreateSynth()
@ -23,11 +26,9 @@ const MarkdownMusic = ({ children }: { children: React.ReactNode }) => {
}, [children]) }, [children])
return ( return (
<div style={{ minHeight: '350px', minWidth: '100%', overflow: 'auto' }}> <div style={{ minWidth: '100%', overflow: 'auto' }}>
<div ref={containerRef} /> <div ref={containerRef} />
<div <div ref={controlsRef} />
ref={controlsRef}
/>
</div> </div>
) )
} }

View File

@ -10,10 +10,10 @@ import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useNodes } from 'reactflow' import { useNodes } from 'reactflow'
import { import {
useEdgesInteractions,
useNodesInteractions,
useWorkflowInteractions, useWorkflowInteractions,
} from '../../hooks' } from '../../hooks'
import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
import { BlockEnum } from '../../types' import { BlockEnum } from '../../types'
import type { StartNodeType } from '../../nodes/start/types' import type { StartNodeType } from '../../nodes/start/types'
import ChatWrapper from './chat-wrapper' import ChatWrapper from './chat-wrapper'
@ -32,8 +32,8 @@ const DebugAndPreview = () => {
const { t } = useTranslation() const { t } = useTranslation()
const chatRef = useRef({ handleRestart: noop }) const chatRef = useRef({ handleRestart: noop })
const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions() const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
const { handleNodeCancelRunningStatus } = useNodesInteractions() const { handleNodeCancelRunningStatus } = useNodesInteractionsWithoutSync()
const { handleEdgeCancelRunningStatus } = useEdgesInteractions() const { handleEdgeCancelRunningStatus } = useEdgesInteractionsWithoutSync()
const varList = useStore(s => s.conversationVariables) const varList = useStore(s => s.conversationVariables)
const [expanded, setExpanded] = useState(true) const [expanded, setExpanded] = useState(true)
const nodes = useNodes<StartNodeType>() const nodes = useNodes<StartNodeType>()
@ -116,7 +116,7 @@ const DebugAndPreview = () => {
<RiEqualizer2Line className='h-4 w-4' /> <RiEqualizer2Line className='h-4 w-4' />
</ActionButton> </ActionButton>
</Tooltip> </Tooltip>
{expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg'/>} {expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg' />}
</div> </div>
)} )}
<div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div> <div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div>