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>()