|
| 1 | +import { HTMLAttributes } from "react" |
| 2 | +import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react" |
| 3 | +import { Database } from "lucide-react" |
| 4 | + |
| 5 | +import { cn } from "@/lib/utils" |
| 6 | + |
| 7 | +import { SetCachedStateField } from "./types" |
| 8 | +import { sliderLabelStyle } from "./styles" |
| 9 | +import { SectionHeader } from "./SectionHeader" |
| 10 | +import { Section } from "./Section" |
| 11 | + |
| 12 | +type ContextManagementSettingsProps = HTMLAttributes<HTMLDivElement> & { |
| 13 | + terminalOutputLineLimit?: number |
| 14 | + maxOpenTabsContext: number |
| 15 | + maxWorkspaceFiles: number |
| 16 | + showRooIgnoredFiles?: boolean |
| 17 | + setCachedStateField: SetCachedStateField< |
| 18 | + "terminalOutputLineLimit" | "maxOpenTabsContext" | "maxWorkspaceFiles" | "showRooIgnoredFiles" |
| 19 | + > |
| 20 | +} |
| 21 | + |
| 22 | +export const ContextManagementSettings = ({ |
| 23 | + terminalOutputLineLimit, |
| 24 | + maxOpenTabsContext, |
| 25 | + maxWorkspaceFiles, |
| 26 | + showRooIgnoredFiles, |
| 27 | + setCachedStateField, |
| 28 | + className, |
| 29 | + ...props |
| 30 | +}: ContextManagementSettingsProps) => { |
| 31 | + return ( |
| 32 | + <div className={cn("flex flex-col gap-2", className)} {...props}> |
| 33 | + <SectionHeader description="Control what information is included in the AI's context window, affecting token usage and response quality"> |
| 34 | + <div className="flex items-center gap-2"> |
| 35 | + <Database className="w-4" /> |
| 36 | + <div>Context Management</div> |
| 37 | + </div> |
| 38 | + </SectionHeader> |
| 39 | + |
| 40 | + <Section> |
| 41 | + <div> |
| 42 | + <div className="flex flex-col gap-2"> |
| 43 | + <span className="font-medium">Terminal output limit</span> |
| 44 | + <div className="flex items-center gap-2"> |
| 45 | + <input |
| 46 | + type="range" |
| 47 | + min="100" |
| 48 | + max="5000" |
| 49 | + step="100" |
| 50 | + value={terminalOutputLineLimit ?? 500} |
| 51 | + onChange={(e) => |
| 52 | + setCachedStateField("terminalOutputLineLimit", parseInt(e.target.value)) |
| 53 | + } |
| 54 | + className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background" |
| 55 | + data-testid="terminal-output-limit-slider" |
| 56 | + /> |
| 57 | + <span style={{ ...sliderLabelStyle }}>{terminalOutputLineLimit ?? 500}</span> |
| 58 | + </div> |
| 59 | + </div> |
| 60 | + <p className="text-vscode-descriptionForeground text-sm mt-0"> |
| 61 | + Maximum number of lines to include in terminal output when executing commands. When exceeded |
| 62 | + lines will be removed from the middle, saving tokens. |
| 63 | + </p> |
| 64 | + </div> |
| 65 | + |
| 66 | + <div> |
| 67 | + <div className="flex flex-col gap-2"> |
| 68 | + <span className="font-medium">Open tabs context limit</span> |
| 69 | + <div className="flex items-center gap-2"> |
| 70 | + <input |
| 71 | + type="range" |
| 72 | + min="0" |
| 73 | + max="500" |
| 74 | + step="1" |
| 75 | + value={maxOpenTabsContext ?? 20} |
| 76 | + onChange={(e) => setCachedStateField("maxOpenTabsContext", parseInt(e.target.value))} |
| 77 | + className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background" |
| 78 | + data-testid="open-tabs-limit-slider" |
| 79 | + /> |
| 80 | + <span style={{ ...sliderLabelStyle }}>{maxOpenTabsContext ?? 20}</span> |
| 81 | + </div> |
| 82 | + </div> |
| 83 | + <p className="text-vscode-descriptionForeground text-sm mt-0"> |
| 84 | + Maximum number of VSCode open tabs to include in context. Higher values provide more context but |
| 85 | + increase token usage. |
| 86 | + </p> |
| 87 | + </div> |
| 88 | + |
| 89 | + <div> |
| 90 | + <div className="flex flex-col gap-2"> |
| 91 | + <span className="font-medium">Workspace files context limit</span> |
| 92 | + <div className="flex items-center gap-2"> |
| 93 | + <input |
| 94 | + type="range" |
| 95 | + min="0" |
| 96 | + max="500" |
| 97 | + step="1" |
| 98 | + value={maxWorkspaceFiles ?? 200} |
| 99 | + onChange={(e) => setCachedStateField("maxWorkspaceFiles", parseInt(e.target.value))} |
| 100 | + className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background" |
| 101 | + data-testid="workspace-files-limit-slider" |
| 102 | + /> |
| 103 | + <span style={{ ...sliderLabelStyle }}>{maxWorkspaceFiles ?? 200}</span> |
| 104 | + </div> |
| 105 | + </div> |
| 106 | + <p className="text-vscode-descriptionForeground text-sm mt-0"> |
| 107 | + Maximum number of files to include in current working directory details. Higher values provide |
| 108 | + more context but increase token usage. |
| 109 | + </p> |
| 110 | + </div> |
| 111 | + |
| 112 | + <div> |
| 113 | + <VSCodeCheckbox |
| 114 | + checked={showRooIgnoredFiles} |
| 115 | + onChange={(e: any) => { |
| 116 | + setCachedStateField("showRooIgnoredFiles", e.target.checked) |
| 117 | + }} |
| 118 | + data-testid="show-rooignored-files-checkbox"> |
| 119 | + <span className="font-medium">Show .rooignore'd files in lists and searches</span> |
| 120 | + </VSCodeCheckbox> |
| 121 | + <p className="text-vscode-descriptionForeground text-sm mt-0"> |
| 122 | + When enabled, files matching patterns in .rooignore will be shown in lists with a lock symbol. |
| 123 | + When disabled, these files will be completely hidden from file lists and searches. |
| 124 | + </p> |
| 125 | + </div> |
| 126 | + </Section> |
| 127 | + </div> |
| 128 | + ) |
| 129 | +} |
0 commit comments