feat(gpt-runner-web): add all file paths as prompt support

Author: 2214962083

packages/gpt-runner-web/client/src/helpers/utils.ts

@@ -50,3 +50,8 @@ export function getErrorMsg(error: any) {
 export function formatNumWithK(num: number) {
   return `${(num / 1000).toFixed(1)}k`
 }
+
+export function countTokenQuick(text: string) {
+  // int
+  return Math.floor(text.length / 3.5)
+}

packages/gpt-runner-web/client/src/pages/chat/chat.styles.ts

@@ -78,7 +78,11 @@ export const FileTreeItemRightWrapper = styled.div`
 
 export const FileTreeSidebarUnderSearchWrapper = styled.div`
   font-size: var(--type-ramp-base-font-size);
-  margin: 0.5rem 0;
+  margin:  0.25rem 0 0.5rem 0;
+  background: linear-gradient(-135deg, var(--list-hover-background) 10%, transparent 70%);
+  color: var(--input-foreground);
+  padding: 0.5rem 0;
+  border-radius: 0.25rem;
 `
 
 export const FileTreeSidebarHighlight = styled.span`

packages/gpt-runner-web/client/src/pages/chat/file-tree.tsx

@@ -1,29 +1,24 @@
 import { type FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { type FileInfoTreeItem, travelTree, travelTreeDeepFirst } from '@nicepkg/gpt-runner-shared/common'
+import { travelTree, travelTreeDeepFirst } from '@nicepkg/gpt-runner-shared/common'
 import clsx from 'clsx'
 import { VSCodeCheckbox, VSCodeLink } from '@vscode/webview-ui-toolkit/react'
 import type { SidebarProps } from '../../components/sidebar'
 import { Sidebar } from '../../components/sidebar'
 import { ErrorView } from '../../components/error-view'
 import { fetchCommonFilesTree } from '../../networks/common-files'
-import type { TreeItemBaseState, TreeItemProps, TreeItemState } from '../../components/tree-item'
+import type { TreeItemProps, TreeItemState } from '../../components/tree-item'
 import { Icon } from '../../components/icon'
 import { IconButton } from '../../components/icon-button'
-import { formatNumWithK } from '../../helpers/utils'
+import { countTokenQuick, formatNumWithK } from '../../helpers/utils'
 import { useGlobalStore } from '../../store/zustand/global'
+import type { FileInfoSidebarTreeItem, FileSidebarTreeItem } from '../../store/zustand/global/file-tree.slice'
 import { FileTreeItemRightWrapper, FileTreeSidebarHighlight, FileTreeSidebarUnderSearchWrapper } from './chat.styles'
 
 export interface FileTreeProps {
   rootPath: string
 }
 
-type FileInfoSidebarTreeItem = FileInfoTreeItem & {
-  checked: boolean
-}
-
-type FileSidebarTreeItem = TreeItemBaseState<FileInfoSidebarTreeItem>
-
 const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
   const { rootPath } = props
   const [filesTree, _setFilesTree] = useState<FileSidebarTreeItem[]>([])
@@ -33,6 +28,10 @@ const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
     updateExpendedFilePaths,
     checkedFilePaths,
     updateCheckedFilePaths,
+    provideFilePathsTreePromptToGpt,
+    updateProvideFilePathsTreePromptToGpt,
+    filePathsTreePrompt,
+    updateFilePathsTreePrompt,
   } = useGlobalStore()
 
   const updateMap = useCallback((tree: FileSidebarTreeItem[]) => {
@@ -74,7 +73,7 @@ const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
 
   // sync checked state
   useEffect(() => {
-    if (!Object.values(fullPathFileMapRef.current).length)
+    if (!Object.values(fullPathFileMapRef.current).length || !filesTree.length)
       return
 
     // check all path in checkedFilePaths
@@ -123,9 +122,8 @@ const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
       return result
     })
 
-    console.log('finalFilesSidebarTree', finalFilesSidebarTree)
-
     setFilesTree(finalFilesSidebarTree, true)
+    updateFilePathsTreePrompt(finalFilesSidebarTree)
   }, [fetchCommonFilesTreeRes, setFilesTree])
 
   const renderTreeItemLeftSlot = (props: TreeItemState<FileInfoSidebarTreeItem>) => {
@@ -265,11 +263,18 @@ const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
     if (!Object.keys(fullPathFileMapRef.current).length)
       return null
 
-    const totalTokenNum = checkedFilePaths.reduce((pre, cur) => {
+    const filaPathsPromptTokenNum = countTokenQuick(filePathsTreePrompt)
+
+    const checkedFilesContentPromptTokenNum = checkedFilePaths.reduce((pre, cur) => {
       const file = fullPathFileMapRef.current[cur]
       return pre + (file.otherInfo?.tokenNum ?? 0)
     }, 0)
 
+    let totalTokenNum = checkedFilesContentPromptTokenNum
+
+    if (provideFilePathsTreePromptToGpt)
+      totalTokenNum += filaPathsPromptTokenNum
+
     const resetAllChecked = () => {
       updateCheckedFilePaths((preState) => {
         preState.forEach((item) => {
@@ -280,19 +285,35 @@ const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
 
         return []
       })
+      updateProvideFilePathsTreePromptToGpt(false)
+    }
+
+    const handleProvideFilePathsTreePromptToGptChange = (e: any) => {
+      const checked = e.target?.checked as boolean
+      updateProvideFilePathsTreePromptToGpt(checked)
     }
 
     return <FileTreeSidebarUnderSearchWrapper>
-      <FileTreeSidebarHighlight>{checkedFilePaths.length}</FileTreeSidebarHighlight>
-      files.
+      <FileTreeSidebarHighlight style={{ paddingLeft: 0 }}>{checkedFilePaths.length}</FileTreeSidebarHighlight>
+      Files.
       <FileTreeSidebarHighlight>{formatNumWithK(totalTokenNum)}</FileTreeSidebarHighlight>
-      tokens.
+      Tokens.
       <VSCodeLink style={{
         display: 'inline-block',
         marginLeft: '0.25rem',
       }} onClick={resetAllChecked}>
-        clean
+        Clear Checked
       </VSCodeLink>
+      <VSCodeCheckbox
+        style={{
+          marginTop: '0.5rem',
+        }}
+        checked={provideFilePathsTreePromptToGpt}
+        onChange={handleProvideFilePathsTreePromptToGptChange}>
+        All file path as prompt
+        <FileTreeSidebarHighlight>{formatNumWithK(filaPathsPromptTokenNum)}</FileTreeSidebarHighlight>
+        token
+      </VSCodeCheckbox>
     </FileTreeSidebarUnderSearchWrapper>
   }
 

packages/gpt-runner-web/client/src/store/zustand/global/chat.slice.ts

@@ -220,6 +220,14 @@ export const createChatSlice: StateCreator<
 
     const sendSingleFileConfig = state.resolveSingleFileConfig(singleFileConfig)
 
+    const sendSystemPrompt = (() => {
+      let result = systemPrompt
+      if (state.provideFilePathsTreePromptToGpt)
+        result += `\n${state.filePathsTreePrompt}`
+
+      return result
+    })()
+
     state.updateChatInstance(chatId, {
       status: nextStatus,
       inputtingPrompt: nextInputtingPrompt,
@@ -234,7 +242,7 @@ export const createChatSlice: StateCreator<
       signal: abortCtrl.signal,
       messages: sendMessages,
       prompt: sendInputtingPrompt,
-      systemPrompt,
+      systemPrompt: sendSystemPrompt,
       singleFileConfig: sendSingleFileConfig,
       contextFilePaths: state.checkedFilePaths,
       rootPath: getGlobalConfig().rootPath,

packages/gpt-runner-web/client/src/store/zustand/global/file-tree.slice.ts

@@ -1,10 +1,22 @@
 import type { StateCreator } from 'zustand'
+import { type FileInfoTreeItem, travelTree } from '@nicepkg/gpt-runner-shared/common'
 import type { GetState } from '../types'
+import type { TreeItemBaseState } from '../../../components/tree-item'
 import type { ChatSlice } from './chat.slice'
 
+export type FileInfoSidebarTreeItem = FileInfoTreeItem & {
+  checked: boolean
+}
+
+export type FileSidebarTreeItem = TreeItemBaseState<FileInfoSidebarTreeItem>
+
 export interface FileTreeSlice {
+  filePathsTreePrompt: string
+  provideFilePathsTreePromptToGpt: boolean
   expendedFilePaths: string[]
   checkedFilePaths: string[]
+  updateProvideFilePathsTreePromptToGpt: (provideFilePathsTreePromptToGpt: boolean) => void
+  updateFilePathsTreePrompt: (promptOrFileTreeItem: string | FileSidebarTreeItem[]) => void
   updateExpendedFilePaths: (expendedFilePaths: string[] | ((oldExpendedFilePaths: string[]) => string[])) => void
   updateCheckedFilePaths: (checkedFilePaths: string[] | ((oldCheckedFilePaths: string[]) => string[])) => void
 }
@@ -13,6 +25,8 @@ export type FileTreeState = GetState<FileTreeSlice>
 
 function getInitialState() {
   return {
+    filePathsTreePrompt: '',
+    provideFilePathsTreePromptToGpt: false,
     expendedFilePaths: [],
     checkedFilePaths: [],
   } satisfies FileTreeState
@@ -25,6 +39,25 @@ export const createFileTreeSlice: StateCreator<
   FileTreeSlice
 > = (set, get) => ({
   ...getInitialState(),
+  updateProvideFilePathsTreePromptToGpt(provideFilePathsTreePromptToGpt) {
+    set({ provideFilePathsTreePromptToGpt })
+  },
+  updateFilePathsTreePrompt(promptOrFileTreeItem) {
+    let result = ''
+
+    if (typeof promptOrFileTreeItem === 'string')
+      result = promptOrFileTreeItem
+
+    if (Array.isArray(promptOrFileTreeItem)) {
+      result += 'Note that these are the paths to the project the user is working on, and each path will be enclosed in single double quotes.'
+      travelTree(promptOrFileTreeItem, (treeItem) => {
+        if (treeItem.isLeaf && treeItem.otherInfo)
+          result += `\n".${treeItem.otherInfo.projectRelativePath}"`
+      })
+    }
+
+    set({ filePathsTreePrompt: result })
+  },
   updateExpendedFilePaths(expendedFilePaths) {
     const result = typeof expendedFilePaths === 'function' ? expendedFilePaths(get().expendedFilePaths) : expendedFilePaths
     set({ expendedFilePaths: result })

playground/scripts/gpt/frontend-eng.gpt.md

@@ -8,6 +8,7 @@
 
 #01 你充当前端开发专家。
 #02 user 将提供一些关于前端代码问题的具体信息，而你的工作就是想出为 user 解决问题的策略。这可能包括建议代码、代码逻辑思路策略。
+#03 你如果想要增删改文件，应该需要告诉 user 文件的路径，以及你想要增删改的内容。
 
 # User Prompt