Merge pull request #136 from badaitech/fix/sidebar-scroll

yakud · web-flow · commit a51d873a0302 · 2025-05-02T12:20:59.000+03:00
fix sidebar scroll
diff --git a/apps/chaingraph-backend/CHANGELOG.md b/apps/chaingraph-backend/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @badaitech/chaingraph-backend
 
+## 0.1.19
+
+### Patch Changes
+
+- Bump package
+- Updated dependencies
+  - @badaitech/chaingraph-nodes@0.1.19
+  - @badaitech/chaingraph-trpc@0.1.19
+  - @badaitech/chaingraph-types@0.1.19
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/apps/chaingraph-backend/package.json b/apps/chaingraph-backend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph-backend",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "description": "Backend server for the Chaingraph project",
   "license": "BUSL-1.1",
diff --git a/apps/chaingraph-frontend/CHANGELOG.md b/apps/chaingraph-frontend/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @badaitech/chaingraph-frontend
 
+## 0.1.19
+
+### Patch Changes
+
+- Bump package
+- Updated dependencies
+  - @badaitech/chaingraph-nodes@0.1.19
+  - @badaitech/chaingraph-trpc@0.1.19
+  - @badaitech/chaingraph-types@0.1.19
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/apps/chaingraph-frontend/package.json b/apps/chaingraph-frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph-frontend",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "description": "Frontend application for the Chaingraph project",
   "license": "BUSL-1.1",
@@ -89,6 +89,7 @@
     "@xyflow/react": "^12.6.0",
     "@xyflow/system": "^0.0.57",
     "add": "^2.0.6",
+    "ahooks": "^3.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
diff --git a/apps/chaingraph-frontend/src/components/theme/ThemeProvider.tsx b/apps/chaingraph-frontend/src/components/theme/ThemeProvider.tsx
@@ -6,10 +6,12 @@
  * As of the Change Date specified in that file, in accordance with the Business Source License, use of this software will be governed by the Apache License, version 2.0.
  */
 
-import type { PropsWithChildren } from 'react'
+import type { CSSProperties, PropsWithChildren } from 'react'
 import type { ThemeMode } from './ThemeContext'
+import { cn } from '@/lib/utils'
 import { Theme } from '@radix-ui/themes'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useShadowRoot } from '../ui/useShadowRoot'
 import { ThemeContext } from './ThemeContext'
 
 const localStorageKeyPrefix = 'chaingraph:'
@@ -18,9 +20,11 @@ const localStorageKeyTheme = `${localStorageKeyPrefix}theme`
 export interface ThemeProviderProps extends PropsWithChildren {
   theme?: ThemeMode
   className?: string
+  style?: CSSProperties
 }
 
-export function ThemeProvider({ children, theme }: ThemeProviderProps) {
+export function ThemeProvider({ children, style, className, theme }: ThemeProviderProps) {
+  const { height } = useShadowRoot()
   const [currentTheme, setTheme] = useState<ThemeMode>(() => {
     // check if a theme is passed as a prop
     if (theme) {
@@ -63,7 +67,7 @@ export function ThemeProvider({ children, theme }: ThemeProviderProps) {
 
   return (
     <ThemeContext value={themeProviderValue}>
-      <Theme className="w-full h-full" appearance={themeProviderValue.theme}>
+      <Theme style={{ height, minHeight: height, ...style }} className={cn('w-full h-full', className)} appearance={themeProviderValue.theme}>
         {children}
       </Theme>
     </ThemeContext>
diff --git a/apps/chaingraph-frontend/src/components/ui/alert-dialog.tsx b/apps/chaingraph-frontend/src/components/ui/alert-dialog.tsx
@@ -34,8 +34,8 @@ function AlertDialogOverlay({ ref, className, ...props }: React.ComponentPropsWi
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
 function AlertDialogContent({ ref, className, ...props }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Content> | null> }) {
-  const shadowRoot = useShadowRoot()
-  const portalEl = shadowRoot.getElementById('chaingraph-portal')
+  const { root } = useShadowRoot()
+  const portalEl = root.getElementById('chaingraph-portal')
   return (
     <AlertDialogPortal container={portalEl}>
       <AlertDialogOverlay />
diff --git a/apps/chaingraph-frontend/src/components/ui/context-menu.tsx b/apps/chaingraph-frontend/src/components/ui/context-menu.tsx
@@ -60,8 +60,8 @@ function ContextMenuSubContent({ ref, className, ...props }: React.ComponentProp
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 
 function ContextMenuContent({ ref, className, ...props }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Content> | null> }) {
-  const shadowRoot = useShadowRoot()
-  const portalEl = shadowRoot.getElementById('chaingraph-portal')
+  const { root } = useShadowRoot()
+  const portalEl = root.getElementById('chaingraph-portal')
   return (
     <ContextMenuPrimitive.Portal container={portalEl}>
       <ContextMenuPrimitive.Content
diff --git a/apps/chaingraph-frontend/src/components/ui/dialog.tsx b/apps/chaingraph-frontend/src/components/ui/dialog.tsx
@@ -36,8 +36,8 @@ function DialogOverlay({ ref, className, ...props }: React.ComponentPropsWithout
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 function DialogContent({ ref, className, children, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content> | null> }) {
-  const shadowRoot = useShadowRoot()
-  const portalEl = shadowRoot.getElementById('chaingraph-portal')
+  const { root } = useShadowRoot()
+  const portalEl = root.getElementById('chaingraph-portal')
   return (
     <DialogPortal container={portalEl}>
       <DialogOverlay />
diff --git a/apps/chaingraph-frontend/src/components/ui/dropdown-menu.tsx b/apps/chaingraph-frontend/src/components/ui/dropdown-menu.tsx
@@ -62,8 +62,8 @@ DropdownMenuSubContent.displayName
   = DropdownMenuPrimitive.SubContent.displayName
 
 function DropdownMenuContent({ ref, className, sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content> | null> }) {
-  const shadowRoot = useShadowRoot()
-  const portalEl = shadowRoot.getElementById('chaingraph-portal')
+  const { root } = useShadowRoot()
+  const portalEl = root.getElementById('chaingraph-portal')
   return (
     <DropdownMenuPrimitive.Portal container={portalEl}>
       <DropdownMenuPrimitive.Content
diff --git a/apps/chaingraph-frontend/src/components/ui/popover.tsx b/apps/chaingraph-frontend/src/components/ui/popover.tsx
@@ -18,8 +18,8 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 const PopoverAnchor = PopoverPrimitive.Anchor
 
 function PopoverContent({ ref, className, align = 'center', sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content> | null> }) {
-  const shadowRoot = useShadowRoot()
-  const portalEl = shadowRoot.getElementById('chaingraph-portal')
+  const { root } = useShadowRoot()
+  const portalEl = root.getElementById('chaingraph-portal')
   return (
     <PopoverPrimitive.Portal container={portalEl}>
       <PopoverPrimitive.Content
diff --git a/apps/chaingraph-frontend/src/components/ui/select.tsx b/apps/chaingraph-frontend/src/components/ui/select.tsx
@@ -72,8 +72,8 @@ SelectScrollDownButton.displayName
   = SelectPrimitive.ScrollDownButton.displayName
 
 function SelectContent({ ref, className, children, position = 'popper', ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content> | null> }) {
-  const shadowRoot = useShadowRoot()
-  const portalEl = shadowRoot.getElementById('chaingraph-portal')
+  const { root } = useShadowRoot()
+  const portalEl = root.getElementById('chaingraph-portal')
   return (
     <SelectPrimitive.Portal container={portalEl}>
       <SelectPrimitive.Content
diff --git a/apps/chaingraph-frontend/src/components/ui/shadow.tsx b/apps/chaingraph-frontend/src/components/ui/shadow.tsx
@@ -9,25 +9,35 @@
 import type { PropsWithChildren } from 'react'
 import radixStyles from '@radix-ui/themes/styles.css?inline'
 import xyflowStyles from '@xyflow/react/dist/style.css?inline'
-import { useCallback, useState } from 'react'
+import { useSize } from 'ahooks'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import styles from '../../index.css?inline'
 import { ShadowRootContext } from './useShadowRoot'
 
 export function Shadow({ children, className }: PropsWithChildren<{ className?: string }>) {
   const [root, setRoot] = useState<ShadowRoot | undefined>()
+  const ref = useRef<HTMLDivElement>(null)
+  const size = useSize(ref)
 
   const hostRef = useCallback((node: HTMLDivElement | null) => {
     if (!node || node.shadowRoot)
       return
 
+    ref.current = node
     const shadowRoot = node.attachShadow({ mode: 'open' })
     setRoot(shadowRoot)
   }, [])
 
+  const value = useMemo(() => {
+    if (!root)
+      return
+    return { height: size?.height ?? 0, root }
+  }, [root, size?.height])
+
   return (
     <div className={className} ref={hostRef}>
-      {root && <ShadowRootContext value={root}>{createPortal(<>{children}</>, root)}</ShadowRootContext> }
+      {value && <ShadowRootContext value={value}>{createPortal(<>{children}</>, value.root)}</ShadowRootContext> }
     </div>
   )
 }
diff --git a/apps/chaingraph-frontend/src/components/ui/tooltip.tsx b/apps/chaingraph-frontend/src/components/ui/tooltip.tsx
@@ -19,8 +19,8 @@ const Tooltip = TooltipPrimitive.Root
 const TooltipTrigger = TooltipPrimitive.Trigger
 
 function TooltipContent({ ref, className, sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof TooltipPrimitive.Content> | null> }) {
-  const shadowRoot = useShadowRoot()
-  const portalEl = shadowRoot.getElementById('chaingraph-portal')
+  const { root } = useShadowRoot()
+  const portalEl = root.getElementById('chaingraph-portal')
   return (
     <TooltipPrimitive.Portal container={portalEl}>
       <TooltipPrimitive.Content
diff --git a/apps/chaingraph-frontend/src/components/ui/useShadowRoot.ts b/apps/chaingraph-frontend/src/components/ui/useShadowRoot.ts
@@ -8,7 +8,11 @@
 
 import { createContext, use } from 'react'
 
-export const ShadowRootContext = createContext<ShadowRoot | null>(null)
+interface ShadowRootContextType {
+  root: ShadowRoot
+  height: number
+}
+export const ShadowRootContext = createContext<ShadowRootContextType | null>(null)
 
 export function useShadowRoot() {
   const ctx = use(ShadowRootContext)
diff --git a/apps/chaingraph-frontend/src/providers/RootProvider.tsx b/apps/chaingraph-frontend/src/providers/RootProvider.tsx
@@ -6,6 +6,7 @@
  * As of the Change Date specified in that file, in accordance with the Business Source License, use of this software will be governed by the Apache License, version 2.0.
  */
 
+import type { CSSProperties } from 'react'
 import { TooltipProvider } from '@/components/ui'
 import { ShadowWithStyles } from '@/components/ui/shadow'
 import { initializeStores, reset } from '@/store/init'
@@ -32,7 +33,9 @@ import { ZoomProvider } from './ZoomProvider'
 import '../store'
 
 interface RootProviderProps {
+  wrapperClassName?: string
   className?: string
+  style?: CSSProperties
   trpcURL?: string
   sessionToken?: string
   superjsonCustom?: typeof SuperJSON
@@ -45,7 +48,9 @@ interface RootProviderProps {
 export const DefaultTRPCURL = `ws://localhost:3001`
 
 export function RootProvider({
+  wrapperClassName,
   className,
+  style,
   children,
   trpcURL,
   sessionToken,
@@ -99,8 +104,8 @@ export function RootProvider({
   const trpcClient = useUnit($trpcClient)
 
   return (
-    <ShadowWithStyles className={className}>
-      <ThemeProvider theme={theme}>
+    <ShadowWithStyles className={wrapperClassName}>
+      <ThemeProvider className={className} style={style} theme={theme}>
 
         <TooltipProvider>
           <QueryClientProvider client={queryClient}>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "packageManager": "pnpm@10.5.2",
   "license": "BUSL-1.1",
diff --git a/packages/badai-api/CHANGELOG.md b/packages/badai-api/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @badaitech/badai-api
 
+## 0.1.19
+
+### Patch Changes
+
+- Bump package
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/packages/badai-api/package.json b/packages/badai-api/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/badai-api",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "description": "Bad AI GraphQL API client",
   "license": "BUSL-1.1",
diff --git a/packages/chaingraph-nodes/CHANGELOG.md b/packages/chaingraph-nodes/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @badaitech/chaingraph-nodes
 
+## 0.1.19
+
+### Patch Changes
+
+- Bump package
+- Updated dependencies
+  - @badaitech/chaingraph-types@0.1.19
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/packages/chaingraph-nodes/package.json b/packages/chaingraph-nodes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph-nodes",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "description": "Node components for the Chaingraph project",
   "license": "BUSL-1.1",
diff --git a/packages/chaingraph-trpc/CHANGELOG.md b/packages/chaingraph-trpc/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @badaitech/chaingraph-trpc
 
+## 0.1.19
+
+### Patch Changes
+
+- Bump package
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/packages/chaingraph-trpc/package.json b/packages/chaingraph-trpc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph-trpc",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "description": "tRPC client and server for the BadAi Chaingraph",
   "license": "BUSL-1.1",
diff --git a/packages/chaingraph-types/CHANGELOG.md b/packages/chaingraph-types/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @badaitech/chaingraph-types
 
+## 0.1.19
+
+### Patch Changes
+
+- Bump package
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/packages/chaingraph-types/package.json b/packages/chaingraph-types/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph-types",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "description": "Core type definitions for the Chaingraph project",
   "license": "BUSL-1.1",
diff --git a/packages/typescript-config/CHANGELOG.md b/packages/typescript-config/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @badaitech/typescript-config
 
+## 0.1.19
+
+### Patch Changes
+
+- Bump package
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@badaitech/typescript-config",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": true,
   "license": "MIT",
   "files": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@badaitech/chaingraph-backend",`
`3`	`3`	`"type": "module",`
`4`		`- "version": "0.1.18",`
	`4`	`+ "version": "0.1.19",`
`5`	`5`	`"private": false,`
`6`	`6`	`"description": "Backend server for the Chaingraph project",`
`7`	`7`	`"license": "BUSL-1.1",`