From 3e5ead25473d87ac75847cdb82ce9494f175a8ab Mon Sep 17 00:00:00 2001
From: Mathew Pareles <mathewpareles@gmail.com>
Date: Mon, 13 Jan 2025 16:09:09 -0800
Subject: [PATCH] dropdown

---
 .../contrib/void/browser/react/src/util/inputs.tsx | 14 ++++++++------
 .../react/src/void-settings-tsx/ModelDropdown.tsx  |  3 ++-
 .../react/src/void-settings-tsx/Settings.tsx       |  3 ++-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index fd5582ea..c7205f5e 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -299,7 +299,8 @@ export const VoidCustomSelectBox = <T extends any>({
 	options,
 	selectedOption: selectedOption_,
 	onChangeOption,
-	getOptionName,
+	getOptionDropdownName,
+	getOptionDisplayName,
 	getOptionsEqual,
 	className,
 	arrowTouchesText = true,
@@ -310,7 +311,8 @@ export const VoidCustomSelectBox = <T extends any>({
 	options: T[];
 	selectedOption?: T;
 	onChangeOption: (newValue: T) => void;
-	getOptionName: (option: T) => string;
+	getOptionDropdownName: (option: T) => string;
+	getOptionDisplayName: (option: T) => string;
 	getOptionsEqual: (a: T, b: T) => boolean;
 	className?: string;
 	arrowTouchesText?: boolean;
@@ -420,9 +422,9 @@ export const VoidCustomSelectBox = <T extends any>({
 				aria-hidden="true"
 			>
 				{options.map((option) => (
-					<div key={getOptionName(option)} className="flex items-center whitespace-nowrap">
+					<div key={getOptionDropdownName(option)} className="flex items-center whitespace-nowrap">
 						<div className="w-4" />
-						<span className="px-2">{getOptionName(option)}</span>
+						<span className="px-2">{getOptionDropdownName(option)}</span>
 					</div>
 				))}
 			</div>
@@ -437,7 +439,7 @@ export const VoidCustomSelectBox = <T extends any>({
 				}}
 			>
 				<span className={`max-w-[120px] truncate ${arrowTouchesText ? 'mr-1' : ''}`}>
-					{getOptionName(selectedOption)}
+					{getOptionDisplayName(selectedOption)}
 				</span>
 				<svg
 					className={`size-3 flex-shrink-0 ${arrowTouchesText ? '' : 'ml-auto'}`}
@@ -466,7 +468,7 @@ export const VoidCustomSelectBox = <T extends any>({
 				>
 					{options.map((option) => {
 						const thisOptionIsSelected = getOptionsEqual(option, selectedOption);
-						const optionName = getOptionName(option);
+						const optionName = getOptionDropdownName(option);
 
 						return (
 							<div
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
index 450842fe..67a9a9c8 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
@@ -37,7 +37,8 @@ const ModelSelectBox = ({ options, featureName }: { options: ModelOption[], feat
 		options={options}
 		selectedOption={selectedOption}
 		onChangeOption={onChangeOption}
-		getOptionName={(option) => option.name}
+		getOptionDisplayName={(option) => option.selection.modelName}
+		getOptionDropdownName={(option) => option.name}
 		getOptionsEqual={(a, b) => optionsEqual([a], [b])}
 		className={`text-xs text-void-fg-3 px-1`}
 		matchInputWidth={false}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index 7636145b..6849c85b 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -109,7 +109,8 @@ const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => {
 				options={providerNames}
 				selectedOption={providerName}
 				onChangeOption={(pn) => setProviderName(pn)}
-				getOptionName={(pn) => pn ? displayInfoOfProviderName(pn).title : '(null)'}
+				getOptionDisplayName={(pn) => pn ? displayInfoOfProviderName(pn).title : '(null)'}
+				getOptionDropdownName={(pn) => pn ? displayInfoOfProviderName(pn).title : '(null)'}
 				getOptionsEqual={(a, b) => a === b}
 				className={`max-w-44 w-full border border-void-border-2 bg-void-bg-1 text-void-fg-3 text-root
 					py-[4px] px-[6px]