From c176b8020f92043c7becfb8ae0208a68abdb6b63 Mon Sep 17 00:00:00 2001
From: Mathew Pareles <mathewpareles@gmail.com>
Date: Sun, 5 Jan 2025 16:35:43 -0800
Subject: [PATCH] styles

---
 .../platform/void/common/voidSettingsTypes.ts |  3 ++-
 .../browser/helpers/extractCodeFromResult.ts  |  2 +-
 .../react/src/markdown/ChatMarkdownRender.tsx |  4 ++--
 .../src/void-settings-tsx/ModelDropdown.tsx   |  3 ++-
 .../react/src/void-settings-tsx/Settings.tsx  | 22 ++++++++++++-------
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/vs/platform/void/common/voidSettingsTypes.ts b/src/vs/platform/void/common/voidSettingsTypes.ts
index 64c74477..e4878e6f 100644
--- a/src/vs/platform/void/common/voidSettingsTypes.ts
+++ b/src/vs/platform/void/common/voidSettingsTypes.ts
@@ -177,6 +177,7 @@ export type SettingName = keyof SettingsForProvider<ProviderName>
 
 type DisplayInfoForProviderName = {
 	title: string,
+	desc?: string,
 }
 
 export const displayInfoOfProviderName = (providerName: ProviderName): DisplayInfoForProviderName => {
@@ -256,7 +257,7 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 				: providerName === 'openAICompatible' ? 'https://my-website.com/v1'
 					: '(never)',
 
-			subTextMd: providerName === 'ollama' ? 'Read about advanced [Endpoints here](https://github.com/ollama/ollama/blob/main/docs/faq.md#how-can-i-expose-ollama-on-my-network).' :
+			subTextMd: providerName === 'ollama' ? 'If you would like to change this endpoint, please read more about [Endpoints here](https://github.com/ollama/ollama/blob/main/docs/faq.md#how-can-i-expose-ollama-on-my-network).' :
 				undefined,
 		}
 	}
diff --git a/src/vs/workbench/contrib/void/browser/helpers/extractCodeFromResult.ts b/src/vs/workbench/contrib/void/browser/helpers/extractCodeFromResult.ts
index 25801a19..2573dae4 100644
--- a/src/vs/workbench/contrib/void/browser/helpers/extractCodeFromResult.ts
+++ b/src/vs/workbench/contrib/void/browser/helpers/extractCodeFromResult.ts
@@ -35,7 +35,7 @@ export const extractArtificialFIMCodeFromResult = ({ text, preTag, sufTag, midTa
 		[optional strings here]
 		[required <MID> tag]
 		(match the stuff between mid tags)
-		[required <MID/> tag]
+		[optional <MID/> tag]
 		[optional ` | `` | ```]
 	*/
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
index d8814631..dc134d6f 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
@@ -49,14 +49,14 @@ const CodeButtonsOnHover = ({ text }: { text: string }) => {
 
 	return <>
 		<button
-			className={`${isSingleLine ? '' : 'p-1'} text-xs bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
+			className={`${isSingleLine ? '' : 'px-1 py-0.5'} text-xs bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
 			onClick={onCopy}
 		>
 			{copyButtonState}
 		</button>
 		<button
 			// btn btn-secondary btn-sm border text-xs border-vscode-input-border rounded
-			className={`${isSingleLine ? '' : 'p-1'} text-xs bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
+			className={`${isSingleLine ? '' : 'px-1 py-0.5'} text-xs bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
 			onClick={onApply}
 		>
 			Apply
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 65d107ce..46f7d617 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
@@ -87,11 +87,12 @@ const DummySelectBox = () => {
 			text-vscode-charts-yellow
 			hover:brightness-90 transition-all duration-200
 			cursor-pointer
+			text-xs
 		`}
 		onClick={openSettings}
 	>
 		<IconWarning
-			size={20}
+			size={14}
 			className='mr-1 brightness-90'
 		/>
 		<span>Model required</span>
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 94b14733..32d9eb59 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
@@ -195,7 +195,11 @@ export const ModelDump = () => {
 
 			const disabled = !providerEnabled
 
-			return <div key={`${modelName}${providerName}`} className={`flex items-center justify-between gap-4 hover:bg-black/10 dark:hover:bg-gray-300/10 py-1 px-3 rounded-sm overflow-hidden cursor-default truncate ${isNewProviderName ? 'mt-4' : ''}`}>
+			return <div key={`${modelName}${providerName}`}
+				className={`flex items-center justify-between gap-4 hover:bg-black/10 dark:hover:bg-gray-300/10 py-1 px-3 rounded-sm overflow-hidden cursor-default truncate
+					${isNewProviderName ? 'border-void-bg-1 border-t' : ''}
+				`}
+			>
 				{/* left part is width:full */}
 				<div className={`w-full flex items-center gap-4`}>
 					<span className='min-w-40'>{isNewProviderName ? displayInfoOfProviderName(providerName).title : ''}</span>
@@ -204,7 +208,7 @@ export const ModelDump = () => {
 				</div>
 				{/* right part is anything that fits */}
 				<div className='w-fit flex items-center gap-4'>
-				<span className='opacity-50'>{isAutodetected ? '(detected locally)' : isDefault ? '' : '(custom model)'}</span>
+					<span className='opacity-50'>{isAutodetected ? '(detected locally)' : isDefault ? '' : '(custom model)'}</span>
 
 					<VoidSwitch
 						value={disabled ? false : !isHidden}
@@ -241,8 +245,8 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider
 	return <ErrorBoundary>
 		<div className='my-1'>
 			<VoidInputBox
-				// placeholder={`${providerTitle} ${settingTitle} (${placeholder}).`}
-				placeholder={`${settingTitle} (${placeholder}).`}
+				// placeholder={`${providerTitle} ${settingTitle} (${placeholder})`}
+				placeholder={`${settingTitle} (${placeholder})`}
 				onChangeText={useCallback((newVal) => {
 					if (weChangedTextRef) return
 					voidSettingsService.setSettingOfProvider(providerName, settingName, newVal)
@@ -420,12 +424,14 @@ export const Settings = () => {
 							<h2 className={`text-3xl mb-2`}>Local Providers</h2>
 							{/* <h3 className={`text-md opacity-50 mb-2`}>{`Keep your data private by hosting AI locally on your computer.`}</h3> */}
 							{/* <h3 className={`text-md opacity-50 mb-2`}>{`Instructions:`}</h3> */}
-							<h3 className={`text-md mb-2`}>{`Void can access any model that you host locally. We automatically detect your local models by default.`}</h3>
+							{/* <h3 className={`text-md mb-2`}>{`Void can access any model that you host locally. We automatically detect your local models by default.`}</h3> */}
+							<h3 className={`text-md text-void-fg-3 mb-2`}>{`Host a model locally and use it in Void. Instructions:`}</h3>
 							<div className='pl-4 select-text opacity-50'>
 								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`1. Download [Ollama](https://ollama.com/download).`} /></h4>
 								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`2. Open your terminal.`} /></h4>
-								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`3. Run \`ollama run llama3.1\`. This installs Meta's llama model which is an alternative to GPT and Claude models. It requires 5GB of memory.`} /></h4>
-								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`4. Run \`ollama run qwen2.5-coder:1.5b\`. This is a faster autocomplete model and requires 1GB of memory.`} /></h4>
+								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`3. Run \`ollama run llama3.1\`. This installs Meta's llama3.1 model which is an alternative to GPT and Claude models. Requires 5GB of memory.`} /></h4>
+								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`4. Run \`ollama run qwen2.5-coder:1.5b\`. This installs a faster autocomplete model. Requires 1GB of memory.`} /></h4>
+								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`Void automatically detects locally running models.`} /></h4>
 								{/* TODO we should create UI for downloading models without user going into terminal */}
 							</div>
 
@@ -434,7 +440,7 @@ export const Settings = () => {
 							</ErrorBoundary>
 
 							<h2 className={`text-3xl mb-2 mt-16`}>More Providers</h2>
-							<h3 className={`text-md mb-2`}>{`Void can also access models like ChatGPT and Claude. We recommend using Anthropic or OpenAI.`}</h3>
+							<h3 className={`text-md text-void-fg-3 mb-2`}>{`Get access to frontier models. We recommend Anthropic or OpenAI.`}</h3>
 							{/* <h3 className={`text-md opacity-50 mb-2`}>{`Access models like ChatGPT and Claude. We recommend using Anthropic or OpenAI as providers, or Groq as a faster alternative.`}</h3> */}
 							<ErrorBoundary>
 								<VoidProviderSettings providerNames={nonlocalProviderNames} />