visual improvements

src/vs/platform/void/browser/llmMessageService.ts

@@ -12,7 +12,7 @@ import { createDecorator } from '../../instantiation/common/instantiation.js';
 import { Event } from '../../../base/common/event.js';
 import { Disposable } from '../../../base/common/lifecycle.js';
 import { IVoidConfigStateService } from '../common/voidConfigService.js';
-import { INotificationService } from '../../notification/common/notification.js';
+// import { INotificationService } from '../../notification/common/notification.js';
 
 
 // BROWSER IMPLEMENTATION OF SENDLLMMESSAGE
@@ -38,7 +38,7 @@ export class SendLLMMessageService extends Disposable implements ISendLLMMessage
 	constructor(
 		@IMainProcessService private readonly mainProcessService: IMainProcessService, // used as a renderer (only usable on client side)
 		@IVoidConfigStateService private readonly voidConfigStateService: IVoidConfigStateService,
-		@INotificationService private readonly notificationService: INotificationService,
+		// @INotificationService private readonly notificationService: INotificationService,
 	) {
 		super()
 
@@ -80,7 +80,6 @@ export class SendLLMMessageService extends Disposable implements ISendLLMMessage
 		// end early if no provider
 		const modelSelection = this.voidConfigStateService.state.modelSelectionOfFeature[featureName]
 		if (modelSelection === null) {
-			this.notificationService.warn('Please add a Provider in Settings!')
 			onError({ message: 'Please add a Provider in Settings!', fullError: null })
 			return null
 		}

src/vs/platform/void/common/voidConfigTypes.ts

@@ -34,7 +34,7 @@ export const voidProviderDefaults = {
 	},
 	openAICompatible: {
 		apiKey: '',
-		endpoint: 'https://my-website.com/v1',
+		endpoint: '',
 	},
 	gemini: {
 		apiKey: '',
@@ -262,24 +262,24 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 		return {
 			title: 'API Key',
 			type: 'string',
-			placeholder: providerName === 'anthropic' ? 'sk-ant-abc123...' : // sk-ant-api03-abc123
-				providerName === 'openAI' ? 'sk-proj-abc123...' :
-					providerName === 'openRouter' ? 'sk-or-abc123...' : // sk-or-v1-abc123
-						providerName === 'gemini' ? 'abc123...' :
-							providerName === 'groq' ? 'gsk_abc123...' :
-								providerName === 'openAICompatible' ? 'sk-abc123...' :
+			placeholder: providerName === 'anthropic' ? 'sk-ant-key...' : // sk-ant-api03-key
+				providerName === 'openAI' ? 'sk-proj-key...' :
+					providerName === 'openRouter' ? 'sk-or-key...' : // sk-or-v1-key
+						providerName === 'gemini' ? 'key...' :
+							providerName === 'groq' ? 'gsk_key...' :
+								providerName === 'openAICompatible' ? 'sk-key...' :
 									'(never)',
 		}
 	}
 	else if (settingName === 'endpoint') {
 		return {
 			title: providerName === 'ollama' ? 'Your Ollama endpoint' :
-				providerName === 'openAICompatible' ? 'Endpoint compatible with OpenAI API' // (do not include /chat/completions)
+				providerName === 'openAICompatible' ? 'baseURL' // (do not include /chat/completions)
 					: '(never)',
 			type: 'string',
-			placeholder: providerName === 'ollama' || providerName === 'openAICompatible' ?
-				voidProviderDefaults[providerName].endpoint
-				: '(never)',
+			placeholder: providerName === 'ollama' ? voidProviderDefaults.ollama.endpoint
+				: providerName === 'openAICompatible' ? 'https://my-website.com/v1'
+					: '(never)',
 		}
 	}
 	else if (settingName === 'maxTokens') {

src/vs/workbench/contrib/void/browser/react/build.js

@@ -9,7 +9,7 @@ import { execSync } from 'child_process';
 execSync('npx rimraf out/ && npx rimraf src2/')
 
 // build and scope tailwind: https://www.npmjs.com/package/scope-tailwind
-execSync('npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p "prefix-" ')
+execSync('npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p "void-" ')
 
 // tsup to build src2/ into out/
 execSync('npx tsup')

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx

@@ -38,7 +38,7 @@ export const ErrorDisplay = ({
 			{/* Header */}
 			<div className="flex items-start justify-between">
 				<div className="flex gap-3">
-					<AlertCircle className="h-5 w-5 text-red-500 mt-0.5" />
+					<AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
 					<div className="flex-1">
 						<h3 className="font-semibold text-red-800">
 							{/* eg Error */}
@@ -75,7 +75,7 @@ export const ErrorDisplay = ({
 
 			{/* Expandable Details */}
 			{isExpanded && details && (
-				<div className="mt-4 space-y-3 border-t border-red-200 pt-3">
+				<div className="mt-4 space-y-3 border-t border-red-200 pt-3 overflow-auto">
 					<div>
 						<span className="font-semibold text-red-800">Full Error: </span>
 						<pre className="text-red-700">{details}</pre>

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ModelSelectionSettings.tsx

@@ -20,34 +20,44 @@ export const ModelSelectionOfFeature = ({ featureName }: { featureName: FeatureN
 
 	const modelOptions: { text: string, value: [string, string] }[] = []
 
-	modelOptions.push({ text: 'Select a Provider', value: ['MyProvider', 'MyModel'] })
-
 	for (const providerName of providerNames) {
 		const providerConfig = voidConfigState[providerName]
 		if (providerConfig.enabled !== 'true') continue
 		providerConfig.models?.forEach(model => {
-			modelOptions.push({ text: `${providerName} - ${model}`, value: [providerName, model] })
+			modelOptions.push({ text: `${model} (${providerName})`, value: [providerName, model] })
 		})
 	}
 
 
+	const isDummy = modelOptions.length === 0
+	if (isDummy) {
+		modelOptions.push(
+			{ text: 'claude 3.5 (anthropic)', value: ['dummy', 'dummy'] as [string, string] },
+			{ text: 'gpt 4o (openai)', value: ['dummy', 'dummy'] as [string, string] },
+			{ text: 'llama 3.2 (ollama)', value: ['dummy', 'dummy'] as [string, string] },
+			{ text: 'qwen 2.5 (openrouter)', value: ['dummy', 'dummy'] as [string, string] },
+		)
+	}
 
 	return <>
 		<h2>{featureName}</h2>
 		{
 			<VoidSelectBox
 				options={modelOptions}
-				onChangeSelection={(newVal) => { voidConfigService.setModelSelectionOfFeature(featureName, { providerName: newVal[0] as ProviderName, modelName: newVal[1] }) }}
+				onChangeSelection={useCallback((newVal: [string, string]) => {
+					if (isDummy) return // don't set state to the dummy value
+					voidConfigService.setModelSelectionOfFeature(featureName, { providerName: newVal[0] as ProviderName, modelName: newVal[1] })
+				}, [voidConfigService, featureName, isDummy])}
 				// we are responsible for setting the initial state here
 				onCreateInstance={useCallback((instance: SelectBox) => {
-					const updateState = () => {
+					const updateInstance = () => {
 						const settingsAtProvider = voidConfigService.state.modelSelectionOfFeature[featureName]
 						const index = modelOptions.findIndex(v => v.value[0] === settingsAtProvider?.providerName && v.value[1] === settingsAtProvider?.modelName)
 						if (index !== -1)
 							instance.select(index)
 					}
-					updateState()
-					const disposable = voidConfigService.onDidGetInitState(updateState)
+					updateInstance()
+					const disposable = voidConfigService.onDidGetInitState(updateInstance)
 					return [disposable]
 				}, [voidConfigService, modelOptions, featureName])}
 			/>}

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/VoidProviderSettings.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
-import { titleOfProviderName, displayInfoOfSettingName, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidConfigTypes.js'
+import { titleOfProviderName, displayInfoOfSettingName, ProviderName, providerNames, featureNames } from '../../../../../../../platform/void/common/voidConfigTypes.js'
 import { VoidInputBox } from './inputs.js'
 import { useConfigState, useService } from '../util/services.js'
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
@@ -23,18 +23,25 @@ const Setting = ({ providerName, settingName }: { providerName: ProviderName, se
 			placeholder={placeholder}
 			onChangeText={useCallback((newVal) => {
 				voidConfigService.setSettingOfProvider(providerName, settingName, newVal)
+				// if we just disabeld this provider, we should unselect all models that use it
+				if (settingName === 'enabled' && newVal !== 'true') {
+					for (let featureName of featureNames) {
+						if (voidConfigService.state.modelSelectionOfFeature[featureName]?.providerName === providerName)
+							voidConfigService.setModelSelectionOfFeature(featureName, null)
+					}
+				}
 			}, [voidConfigService, providerName, settingName])}
 
 			// we are responsible for setting the initial value here
 			onCreateInstance={useCallback((instance: InputBox) => {
-				const updateInstanceState = () => {
+				const updateInstance = () => {
 					const settingsAtProvider = voidConfigService.state.settingsOfProvider[providerName];
 					// @ts-ignore
 					const stateVal = settingsAtProvider[settingName]
 					instance.value = stateVal
 				}
-				updateInstanceState()
-				const disposable = voidConfigService.onDidGetInitState(updateInstanceState)
+				updateInstance()
+				const disposable = voidConfigService.onDidGetInitState(updateInstance)
 				return [disposable]
 			}, [voidConfigService, providerName, settingName])}
 			multiline={false}

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx

@@ -58,9 +58,10 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac
 					inputBackground: 'transparent',
 				},
 				placeholder,
+				tooltip: '',
 				flexibleHeight: multiline,
 				flexibleMaxHeight: 500,
-				flexibleWidth: false,
+				flexibleWidth: true,
 			}
 		] as const, [contextViewProvider, placeholder, multiline])}
 		dispose={useCallback((instance: InputBox) => {
@@ -124,7 +125,7 @@ export const VoidSelectBox = <T,>({ onChangeSelection, onCreateInstance, selectB
 				instance.render(containerRef.current)
 
 			disposables.push(
-				instance.onDidSelect(e => { onChangeSelection(options[e.index].value); })
+				instance.onDidSelect(e => { onChangeSelection(options[e.index].value ); })
 			)
 
 			if (onCreateInstance) {

src/vs/workbench/contrib/void/browser/react/tailwind.config.js

@@ -32,6 +32,6 @@ module.exports = {
 		},
 	},
 	plugins: [],
-	prefix: 'prefix-'
+	prefix: 'void-'
 }