Improve URL field handling in ApiOptions

Author: cte

webview-ui/package-lock.json

@@ -14,6 +14,7 @@
 		"build-storybook": "storybook build"
 	},
 	"dependencies": {
+		"@hookform/resolvers": "^3.10.0",
 		"@radix-ui/react-dropdown-menu": "^2.1.5",
 		"@radix-ui/react-icons": "^1.3.2",
 		"@radix-ui/react-slot": "^1.1.1",
@@ -26,6 +27,7 @@
 		"fzf": "^0.5.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-hook-form": "^7.54.2",
 		"react-remark": "^2.1.0",
 		"react-textarea-autosize": "^8.5.3",
 		"react-use": "^17.5.1",
@@ -36,7 +38,8 @@
 		"tailwind-merge": "^2.6.0",
 		"tailwindcss": "^4.0.0",
 		"tailwindcss-animate": "^1.0.7",
-		"vscrui": "^0.2.0"
+		"vscrui": "^0.2.0",
+		"zod": "^3.24.1"
 	},
 	"devDependencies": {
 		"@storybook/addon-essentials": "^8.5.2",

webview-ui/package.json

@@ -3,7 +3,7 @@ import { useEvent } from "react-use"
 import { ExtensionMessage } from "../../src/shared/ExtensionMessage"
 import ChatView from "./components/chat/ChatView"
 import HistoryView from "./components/history/HistoryView"
-import SettingsView from "./components/settings/SettingsView"
+import { SettingsView } from "./components/settings/SettingsView"
 import WelcomeView from "./components/welcome/WelcomeView"
 import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
 import { vscode } from "./utils/vscode"

webview-ui/src/App.tsx

@@ -1,5 +1,5 @@
 import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import { memo, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
 import { Dropdown } from "vscrui"
 import type { DropdownOption } from "vscrui"
@@ -13,7 +13,7 @@ interface ApiConfigManagerProps {
 	onUpsertConfig: (configName: string) => void
 }
 
-const ApiConfigManager = ({
+export const ApiConfigManager = ({
 	currentApiConfigName = "",
 	listApiConfigMeta = [],
 	onSelectConfig,
@@ -215,5 +215,3 @@ const ApiConfigManager = ({
 		</div>
 	)
 }
-
-export default memo(ApiConfigManager)