feat(gpt-runner-web): add reszie support for sidebar

Author: 2214962083

.vscode/settings.json

@@ -37,6 +37,7 @@
     "OVSE",
     "ovsx",
     "rehype",
+    "rubberband",
     "tablist",
     "tabpanel",
     "tagify",

packages/gpt-runner-web/client/src/components/chat-message-input/chat-message-input.styles.ts

@@ -4,7 +4,7 @@ import { styled } from 'styled-components'
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  max-height: 250px;
+  height: 100%;
   width: 100%;
   flex-shrink: 0;
   padding: 0.5rem;
@@ -21,8 +21,10 @@ export const ToolbarWrapper = styled.div`
 export const StyledVSCodeTextArea = styled(VSCodeTextArea)`
   margin-top: 0.5rem;
   overflow: hidden;
+  height: 100%;
 
   &::part(control) {
     border-radius: 0.25rem;
+    height: 100%;
   }
 `

packages/gpt-runner-web/client/src/components/chat-message-item/chat-message-item.styles.ts

@@ -8,8 +8,8 @@ export const MsgWrapper = styled.div<{ $isMe: boolean }>`
   margin-bottom: 1rem;
 `
 
-export const MsgAvatarWrapper = styled.div<{ $isMe: boolean }>`
-  display: none;
+export const MsgAvatarWrapper = styled.div<{ $isMe: boolean; $showAvatar: boolean }>`
+  display: ${({ $showAvatar }) => $showAvatar ? 'flex' : 'none'};
   width: 2rem;
   height: 2rem;
   justify-content: center;
@@ -18,10 +18,6 @@ export const MsgAvatarWrapper = styled.div<{ $isMe: boolean }>`
   margin: 0 0.5rem;
   border: 1px solid var(--panel-view-border);
   align-self: flex-start;
-
-  ${withBreakpoint('lg', css`
-    display: flex;
-  `)}
 `
 
 export const MsgContentWrapper = styled.div<{ $isMe: boolean }>`

packages/gpt-runner-web/client/src/components/chat-message-item/index.tsx

@@ -14,6 +14,7 @@ export interface BuildMessageToolbarState extends SingleChatMessage {
 export interface MessageItemProps extends SingleChatMessage, Partial<MessageCodeBlockProps> {
   status: ChatMessageStatus
   showToolbar?: 'always' | 'hover' | 'never'
+  showAvatar?: boolean
   style?: React.CSSProperties
   buildMessageToolbar?: (state: BuildMessageToolbarState) => React.ReactNode
 }
@@ -24,6 +25,7 @@ export const MessageItem: FC<MessageItemProps> = (props) => {
     text,
     status,
     style,
+    showAvatar = false,
     showToolbar = 'hover',
     buildCodeToolbar,
     buildMessageToolbar,
@@ -54,7 +56,7 @@ export const MessageItem: FC<MessageItemProps> = (props) => {
 
   return (
     <MsgWrapper style={style} $isMe={name === ChatRole.User}>
-      <MsgAvatarWrapper $isMe={name === ChatRole.User}>
+      <MsgAvatarWrapper $showAvatar={showAvatar} $isMe={name === ChatRole.User}>
         <Icon className={clsx(name === ChatRole.User ? 'codicon-account' : 'codicon-github')} />
       </MsgAvatarWrapper>
       <MsgContentWrapper ref={hoverContentRef} $isMe={name === ChatRole.User}>

packages/gpt-runner-web/client/src/components/drag-resize-view/drag-resize-view.styles.ts

@@ -0,0 +1,44 @@
+import { styled } from 'styled-components'
+
+export const DragLine = styled.div<{ $dragLineColor: string; $dragLineActiveColor: string; $dragLineWidth: string }>`
+  position: absolute;
+  background: ${({ $dragLineColor }) => $dragLineColor};
+  /* z-index: 2; */
+  touch-action: none;
+
+  &:active {
+    background: ${({ $dragLineActiveColor }) => $dragLineActiveColor};
+  }
+
+  &[data-direction='left'] {
+    cursor: col-resize;
+    width: ${({ $dragLineWidth }) => $dragLineWidth};
+    left: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  &[data-direction='right'] {
+    cursor: col-resize;
+    width: ${({ $dragLineWidth }) => $dragLineWidth};
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  &[data-direction='top'] {
+    cursor: row-resize;
+    height: ${({ $dragLineWidth }) => $dragLineWidth};
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &[data-direction='bottom'] {
+    cursor: row-resize;
+    height: ${({ $dragLineWidth }) => $dragLineWidth};
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+`

packages/gpt-runner-web/client/src/components/drag-resize-view/index.tsx

@@ -0,0 +1,178 @@
+import { useEffect, useMemo, useRef } from 'react'
+import type { UserDragConfig } from '@use-gesture/react'
+import { useDrag } from '@use-gesture/react'
+import { motion, useMotionValue } from 'framer-motion'
+import { DragLine } from './drag-resize-view.styles'
+
+export type DragDirection = 'left' | 'right' | 'top' | 'bottom'
+export interface DragDirectionConfig {
+  direction: DragDirection
+  /**
+   * The boundary of the drag line.
+   * The first element is the minimum value, the second element is the maximum value.
+   */
+  boundary: number[]
+}
+export interface DragResizeViewProps {
+  initWidth: number
+  initHeight: number
+  dragConfig?: Omit<UserDragConfig, 'axis' | 'bounds'>
+  dragDirectionConfigs: DragDirectionConfig[]
+  style?: React.CSSProperties
+  className?: string
+  dragLineStyle?: React.CSSProperties
+  dragLineClassName?: string
+  dragLineColor?: string
+  dragLineActiveColor?: string
+  dragLineWidth?: string
+  children: React.ReactNode
+}
+
+export function DragResizeView(props: DragResizeViewProps) {
+  const {
+    initWidth,
+    initHeight,
+    dragConfig,
+    dragDirectionConfigs,
+    style,
+    className,
+    dragLineClassName,
+    dragLineStyle,
+    dragLineColor = 'var(--panel-view-border)',
+    dragLineActiveColor = 'var(--focus-border)',
+    dragLineWidth = '1px',
+    children,
+  } = props
+
+  const ref = useRef<HTMLDivElement>(null)
+  const finalWidth = useMotionValue(initWidth)
+  const finalHeight = useMotionValue(initHeight)
+
+  useEffect(() => {
+    finalWidth.set(initWidth)
+  }, [initWidth])
+
+  useEffect(() => {
+    finalHeight.set(initHeight)
+  }, [initHeight])
+
+  const dragDirectionConfigMap = useMemo(() => {
+    return dragDirectionConfigs.reduce((acc, config) => {
+      acc[config.direction] = config
+      return acc
+    }, {} as Record<DragDirection, DragDirectionConfig>)
+  }, [dragDirectionConfigs])
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      if (ref.current) {
+        finalWidth.set(ref.current.offsetWidth)
+        finalHeight.set(ref.current.offsetHeight)
+      }
+    }
+
+    window.addEventListener('resize', handleWindowResize)
+    return () => {
+      window.removeEventListener('resize', handleWindowResize)
+    }
+  }, [])
+
+  const leftDragLingBind = useDrag(
+    ({ offset }) => {
+      finalWidth.set(initWidth - offset[0])
+    },
+    {
+      rubberband: true,
+      ...dragConfig,
+      axis: 'x',
+      bounds: {
+        left: dragDirectionConfigMap?.left?.boundary?.[0] ?? 0,
+        right: dragDirectionConfigMap?.left?.boundary?.[1] ?? 0,
+      }, // Adjust the bounds as needed
+    },
+  )
+
+  const rightDragLingBind = useDrag(
+    ({ offset }) => {
+      finalWidth.set(initWidth + offset[0])
+    },
+    {
+      rubberband: true,
+      ...dragConfig,
+      axis: 'x',
+      bounds: {
+        left: dragDirectionConfigMap?.right?.boundary?.[0] ?? 0,
+        right: dragDirectionConfigMap?.right?.boundary?.[1] ?? 0,
+      }, // Adjust the bounds as needed
+    },
+  )
+
+  const topDragLingBind = useDrag(
+    ({ offset }) => {
+      finalHeight.set(initHeight - offset[1])
+    },
+    {
+      rubberband: true,
+      ...dragConfig,
+      axis: 'y',
+      bounds: {
+        top: dragDirectionConfigMap?.top?.boundary?.[0] ?? 0,
+        bottom: dragDirectionConfigMap?.top?.boundary?.[1] ?? 0,
+      }, // Adjust the bounds as needed
+    },
+  )
+
+  const bottomDragLingBind = useDrag(
+    ({ offset }) => {
+      finalHeight.set(initHeight + offset[1])
+    },
+    {
+      rubberband: true,
+      ...dragConfig,
+      axis: 'y',
+      bounds: {
+        top: dragDirectionConfigMap?.bottom?.boundary?.[0] ?? 0,
+        bottom: dragDirectionConfigMap?.bottom?.boundary?.[1] ?? 0,
+      }, // Adjust the bounds as needed
+    },
+  )
+
+  const dragLineProps: React.HTMLAttributes<HTMLDivElement> = {
+    style: dragLineStyle,
+    className: dragLineClassName,
+  }
+
+  const dragLineBindMap: Record<DragDirection, ReturnType<typeof useDrag>> = {
+    left: leftDragLingBind,
+    right: rightDragLingBind,
+    top: topDragLingBind,
+    bottom: bottomDragLingBind,
+  }
+
+  return <motion.div
+    className={className}
+    style={{
+      ...style,
+      width: finalWidth,
+      height: finalHeight,
+      position: 'relative',
+    }} ref={ref}>
+    {children}
+
+    {Object.entries(dragLineBindMap).map(([direction, bind], index) => {
+      return dragDirectionConfigMap[direction as DragDirection]
+        ? <DragLine
+          {...{
+            ...dragLineProps,
+            ...bind(),
+          }}
+          key={index}
+          $dragLineColor={dragLineColor}
+          $dragLineActiveColor={dragLineActiveColor}
+          $dragLineWidth={dragLineWidth}
+          data-direction={direction}
+        ></DragLine>
+        : null
+    })}
+  </motion.div>
+}

packages/gpt-runner-web/client/src/components/sidebar/index.tsx

@@ -4,7 +4,7 @@ import { useDebounce } from 'react-use'
 import type { TreeProps } from '../tree'
 import { Tree } from '../tree'
 import type { TreeItemBaseStateOtherInfo, TreeItemProps } from '../tree-item'
-import { SidebarHeader, SidebarSearch, SidebarSearchRightWrapper, SidebarSearchWrapper, SidebarTreeWrapper, SidebarWrapper } from './sidebar.styles'
+import { SidebarHeader, SidebarSearch, SidebarSearchRightWrapper, SidebarSearchWrapper, SidebarTreeWrapper, SidebarUnderSearchWrapper, SidebarWrapper } from './sidebar.styles'
 
 export interface SidebarProps<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo> {
   defaultSearchKeyword?: string
@@ -14,6 +14,7 @@ export interface SidebarProps<OtherInfo extends TreeItemBaseStateOtherInfo = Tre
   sortTreeItems?: (items: TreeItemProps<OtherInfo>[]) => TreeItemProps<OtherInfo>[]
   buildTopToolbarSlot?: () => React.ReactNode
   buildSearchRightSlot?: () => React.ReactNode
+  buildUnderSearchSlot?: () => React.ReactNode
 }
 
 export function Sidebar<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: SidebarProps<OtherInfo>) {
@@ -25,6 +26,7 @@ export function Sidebar<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemB
     sortTreeItems,
     buildTopToolbarSlot,
     buildSearchRightSlot,
+    buildUnderSearchSlot,
   } = props
 
   const [searchKeyword, setSearchKeyword] = useState(defaultSearchKeyword)
@@ -80,6 +82,9 @@ export function Sidebar<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemB
         {buildSearchRightSlot?.()}
       </SidebarSearchRightWrapper>
     </SidebarSearchWrapper>
+    <SidebarUnderSearchWrapper>
+      {buildUnderSearchSlot?.()}
+    </SidebarUnderSearchWrapper>
     <SidebarTreeWrapper>
       <Tree
         {...tree}

packages/gpt-runner-web/client/src/components/sidebar/sidebar.styles.ts

@@ -23,6 +23,10 @@ export const SidebarSearchWrapper = styled.div`
   height: var(--my-input-height);
 `
 
+export const SidebarUnderSearchWrapper = styled.div`
+  font-size: var(--type-ramp-base-font-size);
+`
+
 export const SidebarSearch = styled(VSCodeTextField)`
   flex: 1;
 

packages/gpt-runner-web/client/src/hooks/use-element-size-real-time.ts

@@ -0,0 +1,50 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { useIsomorphicLayoutEffect } from 'react-use'
+
+export interface ElementSize {
+  width: number
+  height: number
+}
+
+export type UseElementSizeResult<E extends Element = Element> = [
+  React.MutableRefObject<E | null>,
+  ElementSize,
+]
+
+const defaultState: ElementSize = {
+  width: 0,
+  height: 0,
+}
+
+export function useElementSizeRealTime<
+  E extends Element = Element,
+>(): UseElementSizeResult<E> {
+  const elementRef = useRef<E | null>(null)
+  const [size, setSize] = useState<ElementSize>(defaultState)
+
+  const updateSize = useCallback(() => {
+    if (elementRef.current) {
+      const { width, height } = elementRef.current.getBoundingClientRect()
+      setSize({ width, height })
+    }
+  }, [])
+
+  const observer = useMemo(
+    () =>
+      new window.ResizeObserver(() => {
+        updateSize()
+      }),
+    [],
+  )
+
+  useIsomorphicLayoutEffect(() => {
+    if (!elementRef.current)
+      return
+    observer.observe(elementRef.current)
+    return () => {
+      observer.disconnect()
+    }
+  }, [elementRef.current])
+
+  return [elementRef, size]
+}