pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 12:21:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Retrieve workspace filepaths for context menu

Browse Source
This commit is contained in:
Saoud Rizwan
2024-09-17 17:02:13 -04:00
parent 8146a51632
commit f4c401343f
9 changed files with 232 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
webview-ui/src/components/ChatTextArea.tsx
View File

@@ -1,6 +1,7 @@
import React, { forwardRef, useCallback, useEffect, useRef, useState, useLayoutEffect } from "react"
import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
import DynamicTextArea from "react-textarea-autosize"
import { insertMention, shouldShowContextMenu, getContextMenuOptions, removeMention } from "../utils/mention-context"
import { useExtensionState } from "../context/ExtensionStateContext"
import { getContextMenuOptions, insertMention, removeMention, shouldShowContextMenu } from "../utils/mention-context"
import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
import ContextMenu from "./ContextMenu"
import Thumbnails from "./Thumbnails"
@@ -49,6 +50,18 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const [intendedCursorPosition, setIntendedCursorPosition] = useState<number | null>(null)
const contextMenuContainerRef = useRef<HTMLDivElement>(null)
const { filePaths } = useExtensionState()
const searchPaths = React.useMemo(() => {
return [
{ type: "problems", path: "problems" },
...filePaths.map((path) => ({
type: path.endsWith("/") ? "folder" : "file",
path: path,
})),
]
}, [filePaths])
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
@@ -70,7 +83,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const handleMentionSelect = useCallback(
(type: string, value: string) => {
if (value === "File" || value === "Folder") {
if (value === "file" || value === "folder") {
setSelectedType(type.toLowerCase())
setSearchQuery("")
setSelectedMenuIndex(0)
@@ -108,17 +121,18 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const handleKeyDown = useCallback(
(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (showContextMenu) {
// if (event.key === "Escape") {
// // event.preventDefault()
// setShowContextMenu(false)
// return
// }
if (event.key === "Escape") {
// event.preventDefault()
setSelectedType(null)
setSelectedMenuIndex(3) // File by default
return
}
if (event.key === "ArrowUp" || event.key === "ArrowDown") {
event.preventDefault()
setSelectedMenuIndex((prevIndex) => {
const direction = event.key === "ArrowUp" ? -1 : 1
const options = getContextMenuOptions(searchQuery, selectedType)
const options = getContextMenuOptions(searchQuery, selectedType, searchPaths)
const optionsLength = options.length
if (optionsLength === 0) return prevIndex
@@ -144,7 +158,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
}
if (event.key === "Enter" && selectedMenuIndex !== -1) {
event.preventDefault()
const selectedOption = getContextMenuOptions(searchQuery, selectedType)[selectedMenuIndex]
const selectedOption = getContextMenuOptions(searchQuery, selectedType, searchPaths)[
selectedMenuIndex
]
if (selectedOption && selectedOption.type !== "url") {
handleMentionSelect(selectedOption.type, selectedOption.value)
}
@@ -203,6 +219,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
cursorPosition,
setInputValue,
justDeletedSpaceAfterMention,
searchPaths,
]
)
@@ -361,6 +378,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
selectedIndex={selectedMenuIndex}
setSelectedIndex={setSelectedMenuIndex}
selectedType={selectedType}
searchPaths={searchPaths}
/>
</div>
)}

28
webview-ui/src/components/ContextMenu.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef } from "react"
import React, { useEffect, useRef, useState } from "react"
import { getContextMenuOptions } from "../utils/mention-context"
interface ContextMenuProps {
@@ -8,6 +8,7 @@ interface ContextMenuProps {
selectedIndex: number
setSelectedIndex: (index: number) => void
selectedType: string | null
searchPaths: { type: string; path: string }[]
}
const ContextMenu: React.FC<ContextMenuProps> = ({
@@ -17,13 +18,16 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
selectedIndex,
setSelectedIndex,
selectedType,
searchPaths,
}) => {
const [filteredOptions, setFilteredOptions] = useState(getContextMenuOptions(searchQuery, selectedType))
const [filteredOptions, setFilteredOptions] = useState(
getContextMenuOptions(searchQuery, selectedType, searchPaths)
)
const menuRef = useRef<HTMLDivElement>(null)
useEffect(() => {
setFilteredOptions(getContextMenuOptions(searchQuery, selectedType))
}, [searchQuery, selectedType])
setFilteredOptions(getContextMenuOptions(searchQuery, selectedType, searchPaths))
}, [searchQuery, selectedType, searchPaths])
useEffect(() => {
if (menuRef.current) {
@@ -84,23 +88,23 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
onMouseEnter={() => option.type !== "url" && setSelectedIndex(index)}>
<div style={{ display: "flex", alignItems: "center" }}>
<i className={`codicon codicon-${option.icon}`} style={{ marginRight: "8px" }} />
{option.value === "File"
{option.value === "file"
? "Add File"
: option.value === "Folder"
: option.value === "folder"
? "Add Folder"
: option.value === "Problems"
? "Workspace Problems"
: option.value === "URL"
: option.value === "problems"
? "Problems"
: option.value === "url"
? "Paste URL to scrape"
: option.value}
</div>
{(option.value === "File" || option.value === "Folder") && (
{(option.value === "file" || option.value === "folder") && (
<i className="codicon codicon-chevron-right" style={{ fontSize: "14px" }} />
)}
{(option.type === "problems" ||
((option.type === "file" || option.type === "folder") &&
option.value !== "File" &&
option.value !== "Folder")) && (
option.value !== "file" &&
option.value !== "folder")) && (
<i className="codicon codicon-add" style={{ fontSize: "14px" }} />
)}
</div>