From 9e583960ae835d68176cbc66ec65168022e205c3 Mon Sep 17 00:00:00 2001 From: Andrew Pareles Date: Wed, 11 Dec 2024 21:17:24 -0800 Subject: [PATCH] visual improvements --- .../void/browser/llmMessageService.ts | 5 ++-- .../platform/void/common/voidConfigTypes.ts | 22 ++++++++--------- .../contrib/void/browser/react/build.js | 2 +- .../react/src/sidebar-tsx/ErrorDisplay.tsx | 4 ++-- .../sidebar-tsx/ModelSelectionSettings.tsx | 24 +++++++++++++------ .../src/sidebar-tsx/VoidProviderSettings.tsx | 15 ++++++++---- .../browser/react/src/sidebar-tsx/inputs.tsx | 5 ++-- .../void/browser/react/tailwind.config.js | 2 +- 8 files changed, 48 insertions(+), 31 deletions(-) diff --git a/src/vs/platform/void/browser/llmMessageService.ts b/src/vs/platform/void/browser/llmMessageService.ts index 838cf7c0..52115567 100644 --- a/src/vs/platform/void/browser/llmMessageService.ts +++ b/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 } diff --git a/src/vs/platform/void/common/voidConfigTypes.ts b/src/vs/platform/void/common/voidConfigTypes.ts index 6d7dcc47..ce68f97f 100644 --- a/src/vs/platform/void/common/voidConfigTypes.ts +++ b/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') { diff --git a/src/vs/workbench/contrib/void/browser/react/build.js b/src/vs/workbench/contrib/void/browser/react/build.js index 9fb5fac6..41e6e635 100755 --- a/src/vs/workbench/contrib/void/browser/react/build.js +++ b/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') diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx index cfae95e7..714fbf26 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx @@ -38,7 +38,7 @@ export const ErrorDisplay = ({ {/* Header */}
- +

{/* eg Error */} @@ -75,7 +75,7 @@ export const ErrorDisplay = ({ {/* Expandable Details */} {isExpanded && details && ( -
+
Full Error: 
{details}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ModelSelectionSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ModelSelectionSettings.tsx index ef84f752..4dbcad84 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ModelSelectionSettings.tsx +++ b/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 <>

{featureName}

{ { 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])} />} diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/VoidProviderSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/VoidProviderSettings.tsx index a40709f5..6d50d1fe 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/VoidProviderSettings.tsx +++ b/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} diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx index ad4e5464..896762fe 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx +++ b/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 = ({ 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) { diff --git a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js index 40e1fa7a..58827bfd 100644 --- a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js +++ b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js @@ -32,6 +32,6 @@ module.exports = { }, }, plugins: [], - prefix: 'prefix-' + prefix: 'void-' }