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(() => {
if (containerRef.current && controlsRef.current) {
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()
synthControl.load(controlsRef.current, {}, { displayPlay: true })
const synth = new abcjs.synth.CreateSynth()
@ -23,11 +26,9 @@ const MarkdownMusic = ({ children }: { children: React.ReactNode }) => {
}, [children])
return (
<div style={{ minHeight: '350px', minWidth: '100%', overflow: 'auto' }}>
<div style={{ minWidth: '100%', overflow: 'auto' }}>
<div ref={containerRef} />
<div
ref={controlsRef}
/>
<div ref={controlsRef} />
</div>
)
}

View File

@ -10,10 +10,10 @@ import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { useNodes } from 'reactflow'
import {
useEdgesInteractions,
useNodesInteractions,
useWorkflowInteractions,
} 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 type { StartNodeType } from '../../nodes/start/types'
import ChatWrapper from './chat-wrapper'
@ -32,8 +32,8 @@ const DebugAndPreview = () => {
const { t } = useTranslation()
const chatRef = useRef({ handleRestart: noop })
const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
const { handleNodeCancelRunningStatus } = useNodesInteractions()
const { handleEdgeCancelRunningStatus } = useEdgesInteractions()
const { handleNodeCancelRunningStatus } = useNodesInteractionsWithoutSync()
const { handleEdgeCancelRunningStatus } = useEdgesInteractionsWithoutSync()
const varList = useStore(s => s.conversationVariables)
const [expanded, setExpanded] = useState(true)
const nodes = useNodes<StartNodeType>()
@ -116,7 +116,7 @@ const DebugAndPreview = () => {
<RiEqualizer2Line className='h-4 w-4' />
</ActionButton>
</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 className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div>