feat(gpt-runner-web): add search for sidebar tree

Author: 2214962083

packages/gpt-runner-core/src/core/config.ts

@@ -77,13 +77,15 @@ export async function getGptFilesInfo(params: GetGptFilesInfoParams): Promise<Ge
 
       const parentTitleParts = titleParts.slice(0, -1)
 
-      const fileId = title || filePath
+      const name = getName(title, filePath)
+
+      const fileId = [...titleParts.slice(0, -1), name].join('/') || filePath
 
       const fileInfo: GptFileInfo = {
         id: fileId,
         parentId: null,
         path: filePath,
-        name: getName(title, filePath),
+        name,
         content,
         singleFileConfig,
         type: GptFileTreeItemType.File,

packages/gpt-runner-shared/src/common/helpers/common.ts

@@ -41,15 +41,42 @@ export function formatSourceValue<T = any>(value: any): T {
   return result as T
 }
 
-export function travelTree<T extends TreeItem<Record<string, any>>, R extends TreeItem<Record<string, any>> = TreeItem<Record<string, any>> >(tree: T[], callback: (item: T, parent?: T) => void | R): R[] {
+export function travelTree<T extends TreeItem<Record<string, any>>, R extends TreeItem<Record<string, any>> = TreeItem<Record<string, any>> >(tree: T[], callback: (item: T, parent?: T) => void | null | undefined | R): R[] {
   const travel = (tree: T[], parent?: T) => {
-    return tree.map((item) => {
-      const finalItem = callback(item, parent) || item
-      if (item.children)
+    const result: R[] = []
+    tree.forEach((item) => {
+      const callbackResult = callback(item, parent)
+      const finalItem = callbackResult === undefined ? item : callbackResult
+
+      if (finalItem && item.children)
         finalItem.children = travel(item.children as T[], item)
 
-      return finalItem
+      if (finalItem !== null)
+        result.push(finalItem as R)
+    })
+
+    return result
+  }
+  return travel(tree) as R[]
+}
+
+export function travelTreeDeepFirst<T extends TreeItem<Record<string, any>>, R extends TreeItem<Record<string, any>> = TreeItem<Record<string, any>> >(tree: T[], callback: (item: T, parent?: T) => void | null | undefined | R): R[] {
+  const travel = (tree: T[], parent?: T) => {
+    const result: R[] = []
+    tree.forEach((item) => {
+      let children: R[] | undefined
+
+      if (item.children)
+        children = travel(item.children as T[], item)
+
+      const callbackResult = callback({ ...item, children }, parent)
+      const finalItem = callbackResult === undefined ? item : callbackResult
+
+      if (finalItem !== null)
+        result.push(finalItem as R)
     })
+
+    return result
   }
   return travel(tree) as R[]
 }

packages/gpt-runner-shared/src/common/types/config.ts

@@ -105,7 +105,7 @@ export interface GptFolderInfo extends GptPathBaseInfo {
 
 export interface GptChatInfo extends GptPathBaseInfo {
   type: GptFileTreeItemType.Chat
-  singleFileConfig: SingleFileConfig
+  createAt: number
 }
 
 export type GptFileInfoTreeItem = TreeItem<GptFolderInfo | GptFileInfo | GptChatInfo>

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

@@ -1,6 +1,11 @@
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
 import type { FC } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import clsx from 'clsx'
+import type { AnimationProps, Target, Tween } from 'framer-motion'
+import { motion } from 'framer-motion'
+import { useDebounce } from 'react-use'
+import type { MaybePromise } from '@nicepkg/gpt-runner-shared/common'
 import { FlexRowCenter } from '../../styles/global.styles'
 import type { GetComponentProps } from '../../types/common'
 import { Icon } from '../icon'
@@ -12,14 +17,88 @@ export interface IconButtonProps extends GetComponentProps<InstanceType<typeof V
   radius?: string
   showText?: boolean
   hoverShowText?: boolean
+  isAnimating?: boolean
+  animateDuration?: number
+  animateEase?: Tween['ease']
+  animateSate?: {
+    from: Target
+    to: Target
+  }
+  animatingWhenClick?: boolean
+  onClick?: () => MaybePromise<void>
   buttonStyle?: React.CSSProperties
 }
 
 export const IconButton: FC<IconButtonProps> = (props) => {
-  const { text, iconClassName, showText = true, hoverShowText = true, radius = '0.25rem', className, style, buttonStyle, ...otherProps } = props
+  const {
+    text,
+    iconClassName,
+    showText = true,
+    hoverShowText = true,
+    radius = '0.25rem',
+    className, style,
+    buttonStyle,
+    isAnimating: initialIsAnimating = false,
+    animateDuration = 1000,
+    animateEase = 'linear',
+    animateSate = {
+      from: {
+        rotate: 0,
+      },
+      to: {
+        rotate: [0, 360],
+      },
+    },
+    animatingWhenClick = false,
+    onClick,
+    ...otherProps
+  } = props
+  const [isAnimating, setIsAnimating] = useState(initialIsAnimating)
+  const [debouncedIsAnimating, setDebouncedIsAnimating] = useState(isAnimating)
+
+  useEffect(() => {
+    setIsAnimating(initialIsAnimating)
+  }, [initialIsAnimating])
+
+  useDebounce(() => {
+    setDebouncedIsAnimating(isAnimating)
+  }, animateDuration, [isAnimating])
+
+  useEffect(() => {
+    isAnimating && setDebouncedIsAnimating(isAnimating)
+  }, [isAnimating])
+
+  const handleClick = useCallback(async () => {
+    if (animatingWhenClick)
+      setIsAnimating(true)
+
+    await onClick?.()
+
+    if (animatingWhenClick)
+      setIsAnimating(false)
+  }, [animatingWhenClick, onClick])
+
+  const rotateAnimation: AnimationProps = {
+    initial: animateSate.from,
+    animate: Object.fromEntries(Object.entries(animateSate.to).map(([key, value]) => {
+      return [
+        key,
+        debouncedIsAnimating
+          ? value
+          : animateSate.from[key as keyof typeof animateSate.from],
+      ]
+    })),
+    transition: {
+      duration: animateDuration / 1000,
+      ease: animateEase,
+      repeat: debouncedIsAnimating ? Infinity : 0,
+    },
+  }
+
   return <ButtonWrapper className={clsx('icon-button', className)} style={style} $hoverShowText={hoverShowText}>
     <VSCodeButton
       {...otherProps}
+      onClick={handleClick}
       appearance="secondary"
       ariaLabel={text}
       title={text}
@@ -31,7 +110,10 @@ export const IconButton: FC<IconButtonProps> = (props) => {
       <FlexRowCenter style={{
         fontSize: 'var(--type-ramp-base-font-size)',
       }}>
-        <Icon className={iconClassName}></Icon>
+        <motion.div style={{ display: 'flex' }} {...rotateAnimation}>
+          <Icon className={iconClassName}></Icon>
+        </motion.div>
+
         {showText && <Text className='icon-button-text'>{text}</Text>}
       </FlexRowCenter>
     </VSCodeButton>

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

@@ -1,57 +1,81 @@
-import { useCallback, useState } from 'react'
-import { VSCodeTextField } from '@vscode/webview-ui-toolkit/react'
+import { useEffect, useState } from 'react'
+import { travelTreeDeepFirst } from '@nicepkg/gpt-runner-shared/common'
+import { useDebounce } from 'react-use'
 import type { TreeProps } from '../tree'
 import { Tree } from '../tree'
-import type { TopToolbarProps } from '../top-toolbar'
-import { TopToolbar } from '../top-toolbar'
 import type { TreeItemBaseStateOtherInfo, TreeItemProps } from '../tree-item'
-import { SidebarWrapper } from './sidebar.styles'
+import { SidebarHeader, SidebarSearch, SidebarWrapper } from './sidebar.styles'
 
 export interface SidebarProps<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo> {
   defaultSearchKeyword?: string
   placeholder?: string
-  topToolbar?: TopToolbarProps
-  tree?: TreeProps<OtherInfo>
-  renderTreeLeftSlot?: TreeItemProps<OtherInfo>['renderLeftSlot']
-  renderTreeRightSlot?: TreeItemProps<OtherInfo>['renderRightSlot']
+  tree?: Omit<TreeProps<OtherInfo>, 'filter'>
+  buildTreeItem?: (item: TreeItemProps<OtherInfo>) => TreeItemProps<OtherInfo>
+  sortTreeItems?: (items: TreeItemProps<OtherInfo>[]) => TreeItemProps<OtherInfo>[]
+  buildTopToolbarSlot?: () => React.ReactNode
 }
 
 export function Sidebar<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: SidebarProps<OtherInfo>) {
   const {
     defaultSearchKeyword = '',
     placeholder,
     tree,
-    topToolbar,
-    renderTreeLeftSlot,
-    renderTreeRightSlot,
+    buildTreeItem,
+    sortTreeItems,
+    buildTopToolbarSlot,
   } = props
 
   const [searchKeyword, setSearchKeyword] = useState(defaultSearchKeyword)
+  const [debouncedSearchKeyword, setDebouncedSearchKeyword] = useState(defaultSearchKeyword)
+  const [finalItems, setFinalItems] = useState<TreeItemProps<OtherInfo>[]>([])
 
-  const filterTreeItems = tree?.items.filter(file => searchKeyword ? file.name.includes(searchKeyword) : true)
+  useDebounce(() => {
+    setDebouncedSearchKeyword(searchKeyword)
+  }, 300, [searchKeyword])
 
-  const processTreeItem = useCallback((items: TreeItemProps<OtherInfo>[]): TreeItemProps<OtherInfo>[] => {
-    return items.map((item) => {
-      return {
-        ...item,
-        renderLeftSlot: renderTreeLeftSlot,
-        renderRightSlot: renderTreeRightSlot,
-        children: item.children ? processTreeItem(item.children) : undefined,
-      }
+  useEffect(() => {
+    let _finalItems: TreeItemProps<OtherInfo>[] = [...(tree?.items || [])]
+
+    _finalItems = travelTreeDeepFirst(tree?.items || [], (item) => {
+      if (buildTreeItem)
+        item = buildTreeItem(item)
+
+      if (debouncedSearchKeyword && !item.name?.match(new RegExp(debouncedSearchKeyword, 'i')) && !item.children?.length)
+        return null
+
+      const sortedChildren
+        = sortTreeItems && item?.children
+          ? sortTreeItems(item.children)
+          : item.children?.sort((a, b) => {
+            // 0-9 a-z A-Z
+            const aName = a.name?.toLowerCase()
+            const bName = b.name?.toLowerCase()
+
+            return (aName < bName) ? -1 : (aName > bName) ? 1 : 0
+          })
+
+      const finalExpanded = debouncedSearchKeyword ? true : item.isExpanded
+
+      return { ...item, isExpanded: finalExpanded, children: sortedChildren }
     })
-  }, [renderTreeLeftSlot])
 
-  const finalTreeItems = filterTreeItems ? processTreeItem(filterTreeItems) : undefined
+    setFinalItems(_finalItems)
+  }, [buildTreeItem, sortTreeItems, debouncedSearchKeyword, tree?.items])
 
   return <SidebarWrapper>
-    {topToolbar && <TopToolbar {...topToolbar} />}
-    <VSCodeTextField placeholder={placeholder}
+    <SidebarHeader>
+      {buildTopToolbarSlot?.()}
+    </SidebarHeader>
+    <SidebarSearch
+      placeholder={placeholder}
       value={searchKeyword}
-      onChange={(e: any) => {
+      onInput={(e: any) => {
         setSearchKeyword(e.target?.value)
       }}>
-      Text Field Label
-    </VSCodeTextField>
-    {finalTreeItems && <Tree {...tree} items={finalTreeItems} />}
+    </SidebarSearch>
+    <Tree
+      {...tree}
+      items={finalItems}
+    />
   </SidebarWrapper>
 }

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

@@ -1,3 +1,4 @@
+import { VSCodeTextField } from '@vscode/webview-ui-toolkit/react'
 import { styled } from 'styled-components'
 
 export const SidebarWrapper = styled.div`
@@ -7,6 +8,16 @@ export const SidebarWrapper = styled.div`
   padding: 0 0.5rem;
 `
 
-export const SidebarSearch = styled.div`
+export const SidebarHeader = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const SidebarSearch = styled(VSCodeTextField)`
+  &::part(root) {
+    border-radius: 0.25rem;
+    overflow: hidden;
+  }
 
+  margin-bottom: 0.5rem;
 `