File search in approval text box (vibe-kanban) (#966)
* Perfect! The implementation is complete. Let me create a summary of what was changed: ## Summary Successfully implemented file search in the approval deny textbox using the **React Context pattern** (following established codebase conventions) instead of prop drilling. ### Changes Made: **1 file modified** (vs 5 files with prop drilling approach): **`PendingApprovalEntry.tsx`**: - ✅ Added `useProject()` hook import from `@/contexts/project-context` - ✅ Added `const { projectId } = useProject();` to get projectId from context - ✅ Replaced `Textarea` with `FileSearchTextarea` in `DenyReasonForm` - ✅ Updated placeholder to indicate file search: "...type @ to search files" - ✅ Pass `projectId` to `FileSearchTextarea` ### How It Works: 1. User clicks "Deny" button on an approval request 2. Deny reason form appears with `FileSearchTextarea` 3. User types `@` to trigger file search dropdown 4. `FileSearchTextarea` uses `projectId` to search files via API 5. User can select files from dropdown to reference them in denial reason ### Why This Approach: ✅ **Follows existing patterns**: `FollowUpEditorCard`, `DiffCard`, `Navbar` all use `useProject()` hook ✅ **No prop drilling**: Context is already available at app root level ✅ **Minimal changes**: Only 1 component modified ✅ **More maintainable**: If projectId source changes, only context needs updating ✅ **Cleaner interfaces**: No unnecessary props through intermediate components The feature is now ready to test! * Perfect! I've fixed the styling issue. The changes I made: **Updated `className` from:** ``` className="text-sm" ``` **To:** ``` className="w-full bg-transparent border px-3 py-2 text-sm resize-none min-h-[80px] focus-visible:outline-none" ``` This matches the original `Textarea` component's styling exactly: - ✅ `w-full` - full width - ✅ `bg-transparent` - transparent background (original had this) - ✅ `border` - adds border - ✅ `px-3 py-2` - proper padding (3 horizontal, 2 vertical) - ✅ `text-sm` - small text size - ✅ `resize-none` - prevents manual resizing - ✅ `min-h-[80px]` - minimum height of 80px (same as original) - ✅ `focus-visible:outline-none` - removes outline on focus Now the textarea should look identical to the original, with proper padding and sizing, while still having the file search functionality when you type `@`. * Perfect! Now let me create a summary of the changes made to address both review comments: ## Summary of Changes ### Addressing Review Comment 1: "Do we still need inputRef?" **Yes, we still need it!** ✅ **Fixed by adding `forwardRef` support to `FileSearchTextarea`:** - Modified `FileSearchTextarea` to use `forwardRef<HTMLTextAreaElement, FileSearchTextareaProps>` - Updated internal ref handling: `const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef;` - Now properly forwards refs to `AutoExpandingTextarea` - Added `ref={inputRef}` to the `FileSearchTextarea` in `DenyReasonForm` **Why it's needed:** The `inputRef` is used to auto-focus the textarea when the deny form appears (PendingApprovalEntry.tsx:308-311): ```tsx useEffect(() => { if (!isEnteringReason) return; const id = window.setTimeout(() => denyReasonRef.current?.focus(), 0); return () => window.clearTimeout(id); }, [isEnteringReason]); ``` --- ### Addressing Review Comment 2: "Why do we need explicit className now?" ✅ **Added documentation comment explaining the difference:** **Original `Textarea` component** has built-in default styling: ```tsx className="flex min-h-[80px] w-full bg-transparent border px-3 py-2 text-sm ..." ``` **`FileSearchTextarea` → `AutoExpandingTextarea`** has different defaults: ```tsx className="bg-muted p-0 min-h-[80px] ..." // Note: p-0 (no padding!), bg-muted ``` **Result:** Must explicitly pass all styling to match the original `Textarea` appearance: - `px-3 py-2` - padding (AutoExpandingTextarea has `p-0`) - `border` - border styling (not in AutoExpandingTextarea) - `bg-transparent` - override `bg-muted` from AutoExpandingTextarea - `min-h-[80px]` - ensure consistent minimum height **Added comment in code:** ```tsx {/* FileSearchTextarea uses AutoExpandingTextarea which has p-0 by default, so we need to explicitly add padding, border, and other Textarea styles */} ``` All functionality is now preserved: auto-focus works, and styling matches the original! * Cleanup script changes for task attempt cfa6a482-61b2-4f4e-81dd-a06b2535874d * Done! Comments removed. * Perfect! All changes complete. Here's a summary of what was done: ## Summary of Changes ### Question 1: Why specify `rows={3}` if it equals the default? **Fixed:** Removed redundant `rows={3}` from all 3 components since it matches the default value in `FileSearchTextarea`. ### Question 2: Is forwardRef the best way to get the ref for focus? **Answer:** Yes! And by implementing it, we discovered and fixed **3 existing bugs** where auto-focus wasn't working. ### Changes Made: **1. `FileSearchTextarea` component:** - ✅ Added `forwardRef` support to properly expose textarea refs - ✅ Now properly forwards refs to the underlying `AutoExpandingTextarea` **2. `PendingApprovalEntry`:** - ✅ Removed redundant `rows={3}` prop - ✅ Kept `ref={inputRef}` (now works correctly for auto-focus) **3. `ReviewCommentRenderer` (bug fix):** - ✅ Added `ref={textareaRef}` to `FileSearchTextarea` - ✅ Removed redundant `rows={3}` prop - ✅ **Fixed broken auto-focus** that wasn't working since migration from `Textarea` **4. `CommentWidgetLine` (bug fix):** - ✅ Added `ref={textareaRef}` to `FileSearchTextarea` - ✅ Removed redundant `rows={3}` prop - ✅ **Fixed broken auto-focus** that wasn't working since migration from `Textarea` ### Why forwardRef is the right approach: - ✅ **Standard React pattern** for exposing refs from custom components - ✅ **Type-safe** with proper TypeScript support - ✅ **Consistent** with how `AutoExpandingTextarea` already works - ✅ **Necessary** for imperative operations like `.focus()`, `.blur()`, `.setSelectionRange()` - ✅ **Discovered bugs** in existing code that had broken auto-focus The implementation follows React best practices and fixed existing bugs in the process! * Done! Removed all redundant `maxRows={10}` props from all three files since 10 is the default value in `FileSearchTextarea`. * Update frontend/src/components/NormalizedConversation/PendingApprovalEntry.tsx Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai> --------- Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai>
This commit is contained in:
Alex Netsch
GitHub
@@ -17,11 +17,12 @@ import {
|
||||
} from '@/components/ui/tooltip';
|
||||
import { approvalsApi } from '@/lib/api';
|
||||
import { Check, X } from 'lucide-react';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { FileSearchTextarea } from '@/components/ui/file-search-textarea';
|
||||
|
||||
import { useHotkeysContext } from 'react-hotkeys-hook';
|
||||
import { TabNavContext } from '@/contexts/TabNavigationContext';
|
||||
import { useKeyApproveRequest, useKeyDenyApproval, Scope } from '@/keyboard';
|
||||
import { useProject } from '@/contexts/project-context';
|
||||
|
||||
const DEFAULT_DENIAL_REASON = 'User denied this tool use request.';
|
||||
|
||||
@@ -129,6 +130,7 @@ function DenyReasonForm({
|
||||
onCancel,
|
||||
onSubmit,
|
||||
inputRef,
|
||||
projectId,
|
||||
}: {
|
||||
isResponding: boolean;
|
||||
value: string;
|
||||
@@ -136,16 +138,18 @@ function DenyReasonForm({
|
||||
onCancel: () => void;
|
||||
onSubmit: () => void;
|
||||
inputRef: React.RefObject<HTMLTextAreaElement>;
|
||||
projectId?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="mt-3 bg-background px-3 py-3 text-sm">
|
||||
<Textarea
|
||||
<FileSearchTextarea
|
||||
ref={inputRef}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="Let the agent know why this request was denied..."
|
||||
onChange={onChange}
|
||||
placeholder="Let the agent know why this request was denied... Type @ to search files."
|
||||
disabled={isResponding}
|
||||
className="text-sm"
|
||||
className="w-full bg-transparent border px-3 py-2 text-sm resize-none min-h-[80px] focus-visible:outline-none"
|
||||
projectId={projectId}
|
||||
/>
|
||||
<div className="mt-3 flex flex-wrap items-center justify-end gap-2">
|
||||
<Button
|
||||
@@ -177,6 +181,7 @@ const PendingApprovalEntry = ({
|
||||
const [denyReason, setDenyReason] = useState('');
|
||||
|
||||
const denyReasonRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const { projectId } = useProject();
|
||||
|
||||
const { enableScope, disableScope, activeScopes } = useHotkeysContext();
|
||||
const tabNav = useContext(TabNavContext);
|
||||
@@ -353,6 +358,7 @@ const PendingApprovalEntry = ({
|
||||
onCancel={handleCancelDeny}
|
||||
onSubmit={handleSubmitDeny}
|
||||
inputRef={denyReasonRef}
|
||||
projectId={projectId}
|
||||
/>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
|
||||
@@ -82,11 +82,10 @@ export function CommentWidgetLine({
|
||||
return (
|
||||
<div className="p-4 border-y">
|
||||
<FileSearchTextarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
placeholder="Add a comment... (type @ to search files)"
|
||||
rows={3}
|
||||
maxRows={10}
|
||||
className="w-full bg-primary text-primary-foreground text-sm font-mono resize-none min-h-[60px] focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
projectId={projectId}
|
||||
/>
|
||||
|
||||
@@ -49,11 +49,10 @@ export function ReviewCommentRenderer({
|
||||
return (
|
||||
<div className="border-y bg-background p-4">
|
||||
<FileSearchTextarea
|
||||
ref={textareaRef}
|
||||
value={editText}
|
||||
onChange={setEditText}
|
||||
placeholder="Edit comment... (type @ to search files)"
|
||||
rows={3}
|
||||
maxRows={10}
|
||||
className="w-full bg-background text-foreground text-sm font-mono resize-none min-h-[60px] focus:outline-none"
|
||||
projectId={projectId}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState, forwardRef } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { AutoExpandingTextarea } from '@/components/ui/auto-expanding-textarea';
|
||||
import { projectsApi } from '@/lib/api';
|
||||
@@ -24,20 +24,26 @@ interface FileSearchTextareaProps {
|
||||
onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
|
||||
}
|
||||
|
||||
export function FileSearchTextarea({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
rows = 3,
|
||||
disabled = false,
|
||||
className,
|
||||
projectId,
|
||||
onKeyDown,
|
||||
maxRows = 10,
|
||||
onPasteFiles,
|
||||
onFocus,
|
||||
onBlur,
|
||||
}: FileSearchTextareaProps) {
|
||||
export const FileSearchTextarea = forwardRef<
|
||||
HTMLTextAreaElement,
|
||||
FileSearchTextareaProps
|
||||
>(function FileSearchTextarea(
|
||||
{
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
rows = 3,
|
||||
disabled = false,
|
||||
className,
|
||||
projectId,
|
||||
onKeyDown,
|
||||
maxRows = 10,
|
||||
onPasteFiles,
|
||||
onFocus,
|
||||
onBlur,
|
||||
},
|
||||
ref
|
||||
) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState<FileSearchResult[]>([]);
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
@@ -46,7 +52,9 @@ export function FileSearchTextarea({
|
||||
const [atSymbolPosition, setAtSymbolPosition] = useState(-1);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const internalRef = useRef<HTMLTextAreaElement>(null);
|
||||
const textareaRef =
|
||||
(ref as React.RefObject<HTMLTextAreaElement>) || internalRef;
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Search for files when query changes
|
||||
@@ -348,4 +356,4 @@ export function FileSearchTextarea({
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user