Fix warnings

.eslintrc.json

@@ -20,7 +20,8 @@
         "curly": "warn",
         "eqeqeq": "warn",
         "no-throw-literal": "warn",
-        "semi": "off"
+        "semi": "off",
+        "react-hooks/exhaustive-deps": "off"
     },
     "ignorePatterns": [
         "out",

README.md

@@ -3,14 +3,16 @@
 This repo uses https://github.com/microsoft/vscode-codicons
 https://microsoft.github.io/vscode-codicons/dist/codicon.html
 
+# vscode-webview-ui-toolkit
+- vscode-webview-ui-toolkit on inputs: "input components like VSCodeTextField or VSCodeTextArea follow the native browser change and input event model. This means the onChange event is fired when focus is blurred away from the input element and onInput is fired on every keystroke." ... "if you would like to update the value of a text field on every keystroke, the onInput should be used instead of onChange."
 
-# Styling VSCode Webview UI Toolkit Components
+## Styling VSCode Webview UI Toolkit Components
 
-## Understanding Styling Constraints
+### Understanding Styling Constraints
 
 When working with the VSCode Webview UI Toolkit, it's important to understand the styling constraints imposed by the underlying architecture. The toolkit uses Microsoft's FAST framework, which utilizes Shadow DOM for component encapsulation. This approach ensures consistency with VSCode's design language but introduces some limitations in custom styling.
 
-### Key Points:
+#### Key Points:
 
 - **Shadow DOM Encapsulation**: The toolkit components use Shadow DOM, which encapsulates the internal structure of components. This means that traditional CSS selectors cannot directly target elements within the component.
 
@@ -20,7 +22,7 @@ When working with the VSCode Webview UI Toolkit, it's important to understand th
 
 - **Limited Direct Styling**: While it's possible to style some internal elements using the `::part()` pseudo-element selector, this approach is not officially supported or documented by the toolkit. Using it may lead to inconsistencies with VSCode's native UI.
 
-## Best Practices
+### Best Practices
 
 1. **Stick to Provided Props**: Whenever possible, use the props and attributes provided by the toolkit components to customize their appearance and behavior.
 
@@ -28,7 +30,7 @@ When working with the VSCode Webview UI Toolkit, it's important to understand th
 
 3. **Use Wrapper Styles Carefully**: If you need to apply styles, focus on the wrapper element (e.g., positioning, margins) rather than trying to modify the internal shadow elements.
 
-### Sources
+#### Sources
 - https://github.com/microsoft/vscode-webview-ui-toolkit/issues/376#issuecomment-1191881962
 - https://github.com/microsoft/vscode-webview-ui-toolkit/issues/550#issuecomment-2148407785
 

webview-ui/src/components/ChatSidebar.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useRef, useEffect, useCallback, KeyboardEvent } from "react"
-import { VSCodeButton, VSCodeTextArea, VSCodeDivider, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import { vscode } from "../utilities/vscode"
-import DynamicTextArea from "react-textarea-autosize"
 import { ExtensionMessage } from "@shared/ExtensionMessage"
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { KeyboardEvent, useEffect, useRef, useState } from "react"
+import DynamicTextArea from "react-textarea-autosize"
+import { vscode } from "../utilities/vscode"
 
 interface Message {
 	id: string
@@ -48,9 +48,7 @@ const ChatSidebar = () => {
 		if (textAreaRef.current && !textAreaHeight) {
 			setTextAreaHeight(textAreaRef.current.offsetHeight)
 		}
-	}, [])
 
-	useEffect(() => {
 		window.addEventListener("message", (e: MessageEvent) => {
 			const message: ExtensionMessage = e.data
 			if (message.type === "text") {
@@ -67,7 +65,7 @@ const ChatSidebar = () => {
 	return (
 		<div style={{ display: "flex", flexDirection: "column", height: "100vh", overflow: "hidden" }}>
 			<div style={{ flexGrow: 1, overflowY: "scroll", scrollbarWidth: "none" }}>
-				{messages.map((message, index) => (
+				{messages.map((message) => (
 					<div
 						key={message.id}
 						style={{