fix: styles and missing imports (#18396)

web/app/components/base/markdown-blocks/music.tsx

@@ -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>
   )
 }

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -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>