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

Fix text area height calculation

Browse Source
This commit is contained in:
Saoud Rizwan
2024-08-31 08:10:50 -04:00
parent 3926d1c528
commit 27bebfac25
1 changed files with 5 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
webview-ui/src/components/ChatView.tsx
View File

@@ -1,8 +1,8 @@
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
import { KeyboardEvent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react" import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react"
import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus" import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus"
import DynamicTextArea from "react-textarea-autosize" import DynamicTextArea from "react-textarea-autosize"
import { useEvent, useMount } from "react-use" import { useEvent, useMeasure, useMount } from "react-use"
import { Virtuoso, type VirtuosoHandle } from "react-virtuoso" import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
import { ClaudeAsk, ClaudeSayTool, ExtensionMessage } from "../../../src/shared/ExtensionMessage" import { ClaudeAsk, ClaudeSayTool, ExtensionMessage } from "../../../src/shared/ExtensionMessage"
import { combineApiRequests } from "../../../src/shared/combineApiRequests" import { combineApiRequests } from "../../../src/shared/combineApiRequests"
@@ -55,8 +55,7 @@ const ChatView = ({
const textAreaRef = useRef<HTMLTextAreaElement>(null) const textAreaRef = useRef<HTMLTextAreaElement>(null)
const [textAreaDisabled, setTextAreaDisabled] = useState(false) const [textAreaDisabled, setTextAreaDisabled] = useState(false)
const [isTextAreaFocused, setIsTextAreaFocused] = useState(false) const [isTextAreaFocused, setIsTextAreaFocused] = useState(false)
const textAreaContainerRef = useRef<HTMLDivElement>(null) const [textAreaContainerRef, { height: textAreaContainerHeight }] = useMeasure<HTMLDivElement>()
const [textAreaContainerHeight, setTextAreaContainerHeight] = useState(51)
const [selectedImages, setSelectedImages] = useState<string[]>([]) const [selectedImages, setSelectedImages] = useState<string[]>([])
const [thumbnailsHeight, setThumbnailsHeight] = useState(0) const [thumbnailsHeight, setThumbnailsHeight] = useState(0)
@@ -467,17 +466,6 @@ const ChatView = ({
selectedImages.length >= MAX_IMAGES_PER_MESSAGE || selectedImages.length >= MAX_IMAGES_PER_MESSAGE ||
isInputPipingToStdin isInputPipingToStdin
useLayoutEffect(() => {
if (textAreaContainerRef.current) {
let height = textAreaContainerRef.current.clientHeight
// some browsers return 0 for clientHeight
if (!height) {
height = textAreaContainerRef.current.getBoundingClientRect().height
}
setTextAreaContainerHeight(height)
}
}, [])
return ( return (
<div <div
style={{ style={{
@@ -672,7 +660,7 @@ const ChatView = ({
right: 20, right: 20,
display: "flex", display: "flex",
alignItems: "flex-center", alignItems: "flex-center",
height: textAreaContainerHeight - 20, height: textAreaContainerHeight || 31,
bottom: 10, bottom: 10,
}}> }}>
<div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}> <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
@@ -691,7 +679,7 @@ const ChatView = ({
appearance="icon" appearance="icon"
aria-label="Send Message" aria-label="Send Message"
onClick={handleSendMessage}> onClick={handleSendMessage}>
<span className="codicon codicon-send" style={{ fontSize: 16, marginBottom: -1 }}></span> <span className="codicon codicon-send" style={{ fontSize: 16, marginBottom: 0 }}></span>
</VSCodeButton> </VSCodeButton>
</div> </div>
</div> </div>