| import { DraggablePanelBody } from '@lobehub/ui'; | |
| import isEqual from 'fast-deep-equal'; | |
| import { memo, useEffect, useRef } from 'react'; | |
| import { PromptEditor } from '@/components'; | |
| import { selectors, useAppStore } from '@/store'; | |
| import { type DivProps } from '@/types'; | |
| const Inner = memo<DivProps>(() => { | |
| const setting = useAppStore(selectors.currentSetting, isEqual); | |
| const sidebarReference = useRef<HTMLDivElement>(null); | |
| useEffect(() => { | |
| console.time('🤯 [layout] inject - QuickSettingSidebar'); | |
| const sidebar = gradioApp().querySelector('#quicksettings'); | |
| if (sidebar) sidebarReference.current?.append(sidebar); | |
| console.timeEnd('🤯 [layout] inject - QuickSettingSidebar'); | |
| }, []); | |
| return ( | |
| <DraggablePanelBody> | |
| {setting.promptEditor && <PromptEditor />} | |
| <div ref={sidebarReference} /> | |
| </DraggablePanelBody> | |
| ); | |
| }); | |
| export default Inner; | |