From e4710e8d2c8406e7842e6aca5fcd4009d4f3e035 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Wed, 10 Jul 2024 07:23:44 -0400
Subject: [PATCH] Fix user_feedback word wrap issue; auto focus textarea when
 feedback is required

---
 webview-ui/src/components/ChatRow.tsx  |  2 ++
 webview-ui/src/components/ChatView.tsx | 11 +++++++++++
 2 files changed, 13 insertions(+)

diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx
index aaaa233..0301350 100644
--- a/webview-ui/src/components/ChatRow.tsx
+++ b/webview-ui/src/components/ChatRow.tsx
@@ -125,6 +125,8 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 									color: "var(--vscode-badge-foreground)",
 									borderRadius: "3px",
 									padding: "8px",
+									whiteSpace: "pre-line",
+									wordWrap: "break-word"
 								}}>
 								<span>{message.text}</span>
 							</div>
diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx
index dff773d..5c940f3 100644
--- a/webview-ui/src/components/ChatView.tsx
+++ b/webview-ui/src/components/ChatView.tsx
@@ -255,6 +255,17 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isHidden])
 
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			if (!textAreaDisabled) {
+				textAreaRef.current?.focus()
+			}
+		}, 50)
+		return () => {
+			clearTimeout(timer)
+		}
+	}, [textAreaDisabled])
+
 	return (
 		<div
 			style={{