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

Merge pull request #654 from psv2522/better-border-on-input-focus

Browse Source 
fix:Made the main inputbox focus styling better, added better spacing in openai compatible section
This commit is contained in:
Matt Rubens
2025-01-30 09:57:49 -05:00
committed by GitHub
parent d1bfbc6d62 cd09571683
commit b543bd9489
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
webview-ui/src/components/chat/ChatTextArea.tsx
View File

@@ -103,6 +103,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const [intendedCursorPosition, setIntendedCursorPosition] = useState<number | null>(null) const [intendedCursorPosition, setIntendedCursorPosition] = useState<number | null>(null)
const contextMenuContainerRef = useRef<HTMLDivElement>(null) const contextMenuContainerRef = useRef<HTMLDivElement>(null)
const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false) const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false)
const [isFocused, setIsFocused] = useState(false)
// Fetch git commits when Git is selected or when typing a hash // Fetch git commits when Git is selected or when typing a hash
useEffect(() => { useEffect(() => {
@@ -379,6 +380,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
if (!isMouseDownOnMenu) { if (!isMouseDownOnMenu) {
setShowContextMenu(false) setShowContextMenu(false)
} }
setIsFocused(false)
}, [isMouseDownOnMenu]) }, [isMouseDownOnMenu])
const handlePaste = useCallback( const handlePaste = useCallback(
@@ -537,6 +539,10 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
backgroundColor: "var(--vscode-input-background)", backgroundColor: "var(--vscode-input-background)",
margin: "10px 15px", margin: "10px 15px",
padding: "8px", padding: "8px",
outline: "none",
border: "1px solid",
borderColor: isFocused ? "var(--vscode-focusBorder)" : "transparent",
borderRadius: "2px",
}} }}
onDrop={async (e) => { onDrop={async (e) => {
e.preventDefault() e.preventDefault()
@@ -627,7 +633,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
fontFamily: "var(--vscode-font-family)", fontFamily: "var(--vscode-font-family)",
fontSize: "var(--vscode-editor-font-size)", fontSize: "var(--vscode-editor-font-size)",
lineHeight: "var(--vscode-editor-line-height)", lineHeight: "var(--vscode-editor-line-height)",
padding: "8px", padding: "2px",
paddingRight: "8px",
marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0, marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0,
zIndex: 1, zIndex: 1,
}} }}
@@ -647,6 +654,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
handleInputChange(e) handleInputChange(e)
updateHighlights() updateHighlights()
}} }}
onFocus={() => setIsFocused(true)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onBlur={handleBlur} onBlur={handleBlur}
@@ -660,11 +668,12 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
onHeightChange?.(height) onHeightChange?.(height)
}} }}
placeholder={placeholderText} placeholder={placeholderText}
minRows={2} minRows={3}
maxRows={20} maxRows={15}
autoFocus={true} autoFocus={true}
style={{ style={{
width: "100%", width: "100%",
outline: "none",
boxSizing: "border-box", boxSizing: "border-box",
backgroundColor: "transparent", backgroundColor: "transparent",
color: "var(--vscode-input-foreground)", color: "var(--vscode-input-foreground)",
@@ -676,11 +685,13 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
overflowX: "hidden", overflowX: "hidden",
overflowY: "auto", overflowY: "auto",
border: "none", border: "none",
padding: "8px", padding: "2px",
paddingRight: "8px",
marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0, marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0,
cursor: textAreaDisabled ? "not-allowed" : undefined, cursor: textAreaDisabled ? "not-allowed" : undefined,
flex: "0 1 auto", flex: "0 1 auto",
zIndex: 2, zIndex: 2,
scrollbarWidth: "none",
}} }}
onScroll={() => updateHighlights()} onScroll={() => updateHighlights()}
/> />
@@ -696,7 +707,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
bottom: "36px", bottom: "36px",
left: "16px", left: "16px",
zIndex: 2, zIndex: 2,
marginBottom: "8px", marginBottom: "4px",
}} }}
/> />
)} )}
@@ -707,7 +718,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
marginTop: "auto", marginTop: "auto",
paddingTop: "8px", paddingTop: "2px",
}}> }}>
<div <div
style={{ style={{

2
webview-ui/src/components/settings/ApiOptions.tsx
View File

@@ -563,7 +563,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
)} )}
{selectedProvider === "openai" && ( {selectedProvider === "openai" && (
<div> <div style={{ display: "flex", flexDirection: "column", rowGap: "5px" }}>
<VSCodeTextField <VSCodeTextField
value={apiConfiguration?.openAiBaseUrl || ""} value={apiConfiguration?.openAiBaseUrl || ""}
style={{ width: "100%" }} style={{ width: "100%" }}