From 97fd332c4ed2babd4491b10d292fd9b9042d0993 Mon Sep 17 00:00:00 2001 From: mp Date: Fri, 20 Dec 2024 20:44:03 -0800 Subject: [PATCH] add code editor block --- .../contrib/void/browser/quickEditActions.ts | 5 +- .../browser/react/src/markdown/BlockCode.tsx | 9 +- .../react/src/markdown/ChatMarkdownRender.tsx | 12 +- .../react/src/sidebar-tsx/SidebarChat.tsx | 19 ++-- .../src/sidebar-tsx/SidebarThreadSelector.tsx | 10 +- .../void/browser/react/src/util/inputs.tsx | 82 ++++++++++++-- .../react/src/util/mountFnGenerator.tsx | 8 +- .../void/browser/react/src/util/services.tsx | 103 +++++++++++++++--- .../src/void-settings-tsx/ModelDropdown.tsx | 6 +- .../react/src/void-settings-tsx/Settings.tsx | 26 +++-- .../contrib/void/browser/sidebarPane.ts | 18 +-- 11 files changed, 227 insertions(+), 71 deletions(-) diff --git a/src/vs/workbench/contrib/void/browser/quickEditActions.ts b/src/vs/workbench/contrib/void/browser/quickEditActions.ts index 784011d2..9d5314a8 100644 --- a/src/vs/workbench/contrib/void/browser/quickEditActions.ts +++ b/src/vs/workbench/contrib/void/browser/quickEditActions.ts @@ -10,7 +10,6 @@ import { Disposable } from '../../../../base/common/lifecycle.js'; import { InstantiationType, registerSingleton } from '../../../../platform/instantiation/common/extensions.js'; import { ICodeEditorService } from '../../../../editor/browser/services/codeEditorService.js'; import { mountCtrlK } from './react/out/ctrl-k-tsx/index.js'; -import { getReactServices } from './helpers/reactServicesHelper.js'; import { URI } from '../../../../base/common/uri.js'; @@ -83,12 +82,10 @@ class VoidQuickEditService extends Disposable implements IQuickEditService { accessor.addZone(viewZone) this._instantiationService.invokeFunction(accessor => { - const services = getReactServices(accessor) - const props: QuickEditPropsType = { quickEditId: this.quickEditId++, } - mountCtrlK(domNode, services, props) + mountCtrlK(domNode, accessor, props) }) // disposeInThisEditorFns.push(() => { editor.changeViewZones(accessor => { if (zoneId) accessor.removeZone(zoneId) }) }) diff --git a/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx b/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx index b2c83e66..479ea70b 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx @@ -6,6 +6,7 @@ import React, { ReactNode } from "react" import SyntaxHighlighter from "react-syntax-highlighter"; import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs"; +import { VoidCodeEditor } from '../util/inputs.js'; export const BlockCode = ({ text, buttonsOnHover, language }: { text: string, buttonsOnHover?: ReactNode, language?: string }) => { @@ -27,7 +28,11 @@ export const BlockCode = ({ text, buttonsOnHover, language }: { text: string, bu )} -
+ {/*
-
+
*/} ) 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 c1750d81..3fa5140c 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 @@ -6,7 +6,7 @@ import React, { JSX, useCallback, useEffect, useState } from 'react' import { marked, MarkedToken, Token } from 'marked' import { BlockCode } from './BlockCode.js' -import { useService } from '../util/services.js' +import { useAccessor } from '../util/services.js' enum CopyButtonState { @@ -18,13 +18,13 @@ enum CopyButtonState { const COPY_FEEDBACK_TIMEOUT = 1000 // amount of time to say 'Copied!' const CodeButtonsOnHover = ({ diffRepr: text }: { diffRepr: string }) => { + const accessor = useAccessor() + const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy) - const inlineDiffService = useService('inlineDiffService') - - const clipboardService = useService('clipboardService') - - + const inlineDiffService = accessor.get('IInlineDiffsService') + const clipboardService = accessor.get('IClipboardService') useEffect(() => { + if (copyButtonState !== CopyButtonState.Copy) { setTimeout(() => { setCopyButtonState(CopyButtonState.Copy) diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx index 75cc5419..c9abf942 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx @@ -6,12 +6,11 @@ import React, { ButtonHTMLAttributes, FormEvent, FormHTMLAttributes, Fragment, useCallback, useEffect, useRef, useState } from 'react'; -import { useSettingsState, useService, useSidebarState, useThreadsState } from '../util/services.js'; -import { ChatMessage, CodeSelection, CodeStagingSelection } from '../../../threadHistoryService.js'; +import { useAccessor, useThreadsState } from '../util/services.js'; +import { ChatMessage, CodeSelection, CodeStagingSelection, IThreadHistoryService } from '../../../threadHistoryService.js'; import { BlockCode } from '../markdown/BlockCode.js'; import { ChatMarkdownRender } from '../markdown/ChatMarkdownRender.js'; -import { IModelService } from '../../../../../../../editor/common/services/model.js'; import { URI } from '../../../../../../../base/common/uri.js'; import { EndOfLinePreference } from '../../../../../../../editor/common/model.js'; import { IDisposable } from '../../../../../../../base/common/lifecycle.js'; @@ -19,9 +18,12 @@ import { ErrorDisplay } from './ErrorDisplay.js'; import { OnError, ServiceSendLLMMessageParams } from '../../../../../../../platform/void/common/llmMessageTypes.js'; import { getCmdKey } from '../../../helpers/getCmdKey.js' import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'; -import { VoidInputBox } from '../util/inputs.js'; +import { VoidCodeEditor, VoidInputBox } from '../util/inputs.js'; import { ModelDropdown } from '../void-settings-tsx/ModelDropdown.js'; import { ctrlLSystem, generateCtrlLPrompt } from '../../../prompt/prompts.js'; +import { ISidebarStateService } from '../../../sidebarStateService.js'; +import { ILLMMessageService } from '../../../../../../../platform/void/common/llmMessageService.js'; +import { IModelService } from '../../../../../../../editor/common/services/model.js'; const IconX = ({ size, className = '' }: { size: number, className?: string }) => { @@ -285,11 +287,12 @@ export const SidebarChat = () => { const inputBoxRef: React.MutableRefObject = useRef(null); - const modelService = useService('modelService') + const accessor = useAccessor() + const modelService = accessor.get('IModelService') // ----- HIGHER STATE ----- // sidebar state - const sidebarStateService = useService('sidebarStateService') + const sidebarStateService = accessor.get('ISidebarStateService') useEffect(() => { const disposables: IDisposable[] = [] disposables.push( @@ -301,9 +304,9 @@ export const SidebarChat = () => { // threads state const threadsState = useThreadsState() - const threadsStateService = useService('threadsStateService') + const threadsStateService = accessor.get('IThreadHistoryService') - const llmMessageService = useService('llmMessageService') + const llmMessageService = accessor.get('ILLMMessageService') // ----- SIDEBAR CHAT state (local) ----- diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx index 6a2b1943..e6adb5f2 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx @@ -4,7 +4,9 @@ *--------------------------------------------------------------------------------------------*/ import React from "react"; -import { useService, useThreadsState } from '../util/services.js'; +import { useAccessor, useThreadsState } from '../util/services.js'; +import { IThreadHistoryService } from '../../../threadHistoryService.js'; +import { ISidebarStateService } from '../../../sidebarStateService.js'; const truncate = (s: string) => { @@ -18,8 +20,10 @@ const truncate = (s: string) => { export const SidebarThreadSelector = () => { const threadsState = useThreadsState() - const threadsStateService = useService('threadsStateService') - const sidebarStateService = useService('sidebarStateService') + + const accessor = useAccessor() + const threadsStateService = accessor.get('IThreadHistoryService') + const sidebarStateService = accessor.get('ISidebarStateService') const { allThreads } = threadsState 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 6cfcf9a5..7d82965a 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 @@ -4,19 +4,26 @@ *--------------------------------------------------------------------------------------------*/ import React, { useCallback, useEffect, useRef } from 'react'; -import { useIsDark, useService } from '../util/services.js'; import { IInputBoxStyles, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'; import { defaultCheckboxStyles, defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js'; import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'; import { IDisposable } from '../../../../../../../base/common/lifecycle.js'; import { Checkbox } from '../../../../../../../base/browser/ui/toggle/toggle.js'; +import { CodeEditorWidget } from '../../../../../../../editor/browser/widget/codeEditor/codeEditorWidget.js' +import { useAccessor } from './services.js'; +// type guard +const isConstructor = (f: any) + : f is { new(...params: any[]): any } => { + return !!f.prototype && f.prototype.constructor === f; +} + export const WidgetComponent = ({ ctor, propsFn, dispose, onCreateInstance, children, className } : { - ctor: { new(...params: CtorParams): Instance }, - propsFn: (container: HTMLDivElement) => CtorParams, + ctor: { new(...params: CtorParams): Instance } | ((container: HTMLDivElement) => Instance), + propsFn: (container: HTMLDivElement) => CtorParams, // unused if fn onCreateInstance: (instance: Instance) => IDisposable[], dispose: (instance: Instance) => void, children?: React.ReactNode, @@ -26,7 +33,7 @@ export const WidgetComponent = ({ ctor, prop const containerRef = useRef(null); useEffect(() => { - const instance = new ctor(...propsFn(containerRef.current!)); + const instance = isConstructor(ctor) ? new ctor(...propsFn(containerRef.current!)) : ctor(containerRef.current!) const disposables = onCreateInstance(instance); return () => { disposables.forEach(d => d.dispose()); @@ -48,7 +55,9 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac multiline: boolean; }) => { - const contextViewProvider = useService('contextViewService'); + const accessor = useAccessor() + + const contextViewProvider = accessor.get('IContextViewService') return [ @@ -189,7 +198,8 @@ export const VoidSelectBox = ({ onChangeSelection, onCreateInstance, selectB selectBoxRef?: React.MutableRefObject; options: readonly { text: string, value: T }[]; }) => { - const contextViewProvider = useService('contextViewService'); + const accessor = useAccessor() + const contextViewProvider = accessor.get('IContextViewService') let containerRef = useRef(null); @@ -237,6 +247,61 @@ export const VoidSelectBox = ({ onChangeSelection, onCreateInstance, selectB }; + +export const VoidCodeEditor = ({ initValue, language }: { initValue: string, language: string | undefined }) => { + const divRef = useRef(null) + + const accessor = useAccessor() + const instantiationService = accessor.get('IInstantiationService') + const modelService = accessor.get('IModelService') + + return
+ + instantiationService.createInstance( + CodeEditorWidget, + container, + { + automaticLayout: true, + wordWrap: 'on', + scrollbar: { + vertical: 'hidden', + horizontal: 'auto', + } + }, + { + isSimpleWidget: true, + }) + , [instantiationService]) + } + + onCreateInstance={useCallback((editor: CodeEditorWidget) => { + + const model = modelService.createModel(initValue, null) + editor.setModel(model); + model.setLanguage(language ?? 'plaintext') + + const container = editor.getDomNode() + const parentNode = container?.parentElement + if (parentNode) + parentNode.style.height = `${editor.getScrollHeight() + 1}px` // the +1 is if there's a half pixel issue + + return [] + }, [modelService, initValue, language])} + + dispose={useCallback((editor: CodeEditorWidget) => { + editor.dispose(); + }, [])} + + // ignored + propsFn={useCallback(() => { return [] }, [])} + + /> +
+ +} + + // export const VoidScrollableElt = ({ options, children }: { options: ScrollableElementCreationOptions, children: React.ReactNode }) => { // const instanceRef = useRef(null); // const [childrenPortal, setChildrenPortal] = useState(null) @@ -270,8 +335,6 @@ export const VoidSelectBox = ({ onChangeSelection, onCreateInstance, selectB // options: readonly { text: string, value: T }[]; // onChangeSelection: (value: T) => void; // }) => { -// const contextViewProvider = useService('contextViewService'); -// const contextMenuProvider = useService('contextMenuService'); // return ({ onChangeSelection, onCreateInstance, selectB // }) => { // const containerRef = useRef(null); -// const themeService = useService('themeService'); -// const contextViewService = useService('contextViewService'); -// const hoverService = useService('hoverService'); // useEffect(() => { // if (!containerRef.current) return; diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx index b674e7d5..78df4a21 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx @@ -6,15 +6,17 @@ import React, { useEffect, useState } from 'react'; import * as ReactDOM from 'react-dom/client' import { _registerServices } from './services.js'; -import { ReactServicesType } from '../../../helpers/reactServicesHelper.js'; -export const mountFnGenerator = (Component: (params: any) => React.ReactNode) => (rootElement: HTMLElement, services: ReactServicesType, props?: any) => { + +import { ServicesAccessor } from '../../../../../../../editor/browser/editorExtensions.js'; + +export const mountFnGenerator = (Component: (params: any) => React.ReactNode) => (rootElement: HTMLElement, accessor: ServicesAccessor, props?: any) => { if (typeof document === 'undefined') { console.error('index.tsx error: document was undefined') return } - const disposables = _registerServices(services) + const disposables = _registerServices(accessor) const root = ReactDOM.createRoot(rootElement) diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx index 2cee2419..6404e108 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx @@ -3,11 +3,10 @@ * Void Editor additions licensed under the AGPL 3.0 License. *--------------------------------------------------------------------------------------------*/ -import { useState, useEffect } from 'react' +import React, { useState, useEffect } from 'react' import { ThreadsState } from '../../../threadHistoryService.js' import { RefreshableProviderName, SettingsOfProvider } from '../../../../../../../platform/void/common/voidSettingsTypes.js' import { IDisposable } from '../../../../../../../base/common/lifecycle.js' -import { ReactServicesType } from '../../../helpers/reactServicesHelper.js' import { VoidSidebarState } from '../../../sidebarStateService.js' import { VoidSettingsState } from '../../../../../../../platform/void/common/voidSettingsService.js' import { ColorScheme } from '../../../../../../../platform/theme/common/theme.js' @@ -15,9 +14,35 @@ import { VoidQuickEditState } from '../../../quickEditStateService.js' import { RefreshModelStateOfProvider } from '../../../../../../../platform/void/common/refreshModelService.js' -// normally to do this you'd use a useEffect that calls .onDidChangeState(), but useEffect mounts too late and misses initial state changes -let services: ReactServicesType + + +import { ServicesAccessor } from '../../../../../../../editor/browser/editorExtensions.js'; +import { IModelService } from '../../../../../../../editor/common/services/model.js'; +import { IClipboardService } from '../../../../../../../platform/clipboard/common/clipboardService.js'; +import { IContextViewService, IContextMenuService } from '../../../../../../../platform/contextview/browser/contextView.js'; +import { IFileService } from '../../../../../../../platform/files/common/files.js'; +import { IHoverService } from '../../../../../../../platform/hover/browser/hover.js'; +import { IThemeService } from '../../../../../../../platform/theme/common/themeService.js'; +import { ILLMMessageService } from '../../../../../../../platform/void/common/llmMessageService.js'; +import { IRefreshModelService } from '../../../../../../../platform/void/common/refreshModelService.js'; +import { IVoidSettingsService } from '../../../../../../../platform/void/common/voidSettingsService.js'; +import { IInlineDiffsService } from '../../../inlineDiffsService.js'; +import { IQuickEditStateService } from '../../../quickEditStateService.js'; +import { ISidebarStateService } from '../../../sidebarStateService.js'; +import { IThreadHistoryService } from '../../../threadHistoryService.js'; +import { IInstantiationService } from '../../../../../../../platform/instantiation/common/instantiation.js' +import { ICodeEditorService } from '../../../../../../../editor/browser/services/codeEditorService.js' +import { ICommandService } from '../../../../../../../platform/commands/common/commands.js' +import { IContextKeyService } from '../../../../../../../platform/contextkey/common/contextkey.js' +import { INotificationService } from '../../../../../../../platform/notification/common/notification.js' +import { IAccessibilityService } from '../../../../../../../platform/accessibility/common/accessibility.js' +import { ILanguageConfigurationService } from '../../../../../../../editor/common/languages/languageConfigurationRegistry.js' +import { ILanguageFeaturesService } from '../../../../../../../editor/common/services/languageFeatures.js' + + + +// normally to do this you'd use a useEffect that calls .onDidChangeState(), but useEffect mounts too late and misses initial state changes // even if React hasn't mounted yet, the variables are always updated to the latest state. // React listens by adding a setState function to these listeners. @@ -43,7 +68,7 @@ const colorThemeStateListeners: Set<(s: ColorScheme) => void> = new Set() // must call this before you can use any of the hooks below // this should only be called ONCE! this is the only place you don't need to dispose onDidChange. If you use state.onDidChange anywhere else, make sure to dispose it! let wasCalled = false -export const _registerServices = (services_: ReactServicesType) => { +export const _registerServices = (accessor: ServicesAccessor) => { const disposables: IDisposable[] = [] @@ -54,8 +79,18 @@ export const _registerServices = (services_: ReactServicesType) => { } wasCalled = true - services = services_ - const { sidebarStateService, quickEditStateService, settingsStateService, threadsStateService, refreshModelService, themeService, } = services + _registerAccessor(accessor) + + const stateServices = { + quickEditStateService: accessor.get(IQuickEditStateService), + sidebarStateService: accessor.get(ISidebarStateService), + threadsStateService: accessor.get(IThreadHistoryService), + settingsStateService: accessor.get(IVoidSettingsService), + refreshModelService: accessor.get(IRefreshModelService), + themeService: accessor.get(IThemeService), + } + + const { sidebarStateService, quickEditStateService, settingsStateService, threadsStateService, refreshModelService, themeService, } = stateServices quickEditState = quickEditStateService.state disposables.push( @@ -110,14 +145,56 @@ export const _registerServices = (services_: ReactServicesType) => { } -// -- services -- -export const useService = (serviceName: T): ReactServicesType[T] => { - if (services === null) { - throw new Error('useAccessor must be used within an AccessorProvider') - } - return services[serviceName] +const getReactAccessor = (accessor: ServicesAccessor) => { + const reactAccessor = { + IModelService: accessor.get(IModelService), + IClipboardService: accessor.get(IClipboardService), + IContextViewService: accessor.get(IContextViewService), + IContextMenuService: accessor.get(IContextMenuService), + IFileService: accessor.get(IFileService), + IHoverService: accessor.get(IHoverService), + IThemeService: accessor.get(IThemeService), + ILLMMessageService: accessor.get(ILLMMessageService), + IRefreshModelService: accessor.get(IRefreshModelService), + IVoidSettingsService: accessor.get(IVoidSettingsService), + IInlineDiffsService: accessor.get(IInlineDiffsService), + IQuickEditStateService: accessor.get(IQuickEditStateService), + ISidebarStateService: accessor.get(ISidebarStateService), + IThreadHistoryService: accessor.get(IThreadHistoryService), + + IInstantiationService: accessor.get(IInstantiationService), + ICodeEditorService: accessor.get(ICodeEditorService), + ICommandService: accessor.get(ICommandService), + IContextKeyService: accessor.get(IContextKeyService), + INotificationService: accessor.get(INotificationService), + IAccessibilityService: accessor.get(IAccessibilityService), + ILanguageConfigurationService: accessor.get(ILanguageConfigurationService), + ILanguageFeaturesService: accessor.get(ILanguageFeaturesService), + + } as const + return reactAccessor } +type ReactAccessor = ReturnType + + +let reactAccessor_: ReactAccessor | null = null +const _registerAccessor = (accessor: ServicesAccessor) => { + const reactAccessor = getReactAccessor(accessor) + reactAccessor_ = reactAccessor +} + +// -- services -- +export const useAccessor = () => { + if (!reactAccessor_) { + throw new Error(`⚠️ Void useAccessor was called before _registerServices!`) + } + + return { get: (service: S): ReactAccessor[S] => reactAccessor_![service] } +} + + + // -- state of services -- export const useQuickEditState = () => { 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 59abfcde..edb55f90 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 @@ -5,13 +5,15 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { FeatureName, featureNames, ModelSelection, modelSelectionsEqual, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidSettingsTypes.js' -import { useSettingsState, useRefreshModelState, useService } from '../util/services.js' +import { useSettingsState, useRefreshModelState, useAccessor } from '../util/services.js' import { VoidSelectBox } from '../util/inputs.js' import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js' const ModelSelectBox = ({ featureName }: { featureName: FeatureName }) => { - const voidSettingsService = useService('settingsStateService') + const accessor = useAccessor() + + const voidSettingsService = accessor.get('IVoidSettingsService') const settingsState = useSettingsState() let weChangedText = 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 cc00422e..f1d95780 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 @@ -3,7 +3,7 @@ import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox import { ProviderName, SettingName, displayInfoOfSettingName, providerNames, VoidModelInfo, featureFlagNames, displayInfoOfFeatureFlag, customSettingNamesOfProvider, RefreshableProviderName, refreshableProviderNames, displayInfoOfProviderName } from '../../../../../../../platform/void/common/voidSettingsTypes.js' import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js' import { VoidCheckBox, VoidInputBox, VoidSelectBox, VoidSwitch } from '../util/inputs.js' -import { useIsDark, useRefreshModelListener, useRefreshModelState, useService, useSettingsState } from '../util/services.js' +import { useAccessor, useIsDark, useRefreshModelListener, useRefreshModelState, useSettingsState } from '../util/services.js' import { X, RefreshCw, Loader2, Check } from 'lucide-react' import { ChatMarkdownRender } from '../markdown/ChatMarkdownRender.js' @@ -12,7 +12,9 @@ import { ChatMarkdownRender } from '../markdown/ChatMarkdownRender.js' // models const RefreshModelButton = ({ providerName }: { providerName: RefreshableProviderName }) => { const refreshModelState = useRefreshModelState() - const refreshModelService = useService('refreshModelService') + + const accessor = useAccessor() + const refreshModelService = accessor.get('IRefreshModelService') const [justFinished, setJustSucceeded] = useState(false) @@ -60,7 +62,10 @@ const RefreshableModels = () => { const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => { - const settingsStateService = useService('settingsStateService') + + const accessor = useAccessor() + const settingsStateService = accessor.get('IVoidSettingsService') + const settingsState = useSettingsState() const providerNameRef = useRef(null) @@ -147,7 +152,9 @@ const AddModelMenuFull = () => { export const ModelDump = () => { - const settingsStateService = useService('settingsStateService') + const accessor = useAccessor() + const settingsStateService = accessor.get('IVoidSettingsService') + const settingsState = useSettingsState() // a dump of all the enabled providers' models @@ -204,7 +211,9 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider const { title: providerTitle, } = displayInfoOfProviderName(providerName) const { title: settingTitle, placeholder, subTextMd } = displayInfoOfSettingName(providerName, settingName) - const voidSettingsService = useService('settingsStateService') + + const accessor = useAccessor() + const voidSettingsService = accessor.get('IVoidSettingsService') let weChangedTextRef = false @@ -243,7 +252,8 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => { const voidSettingsState = useSettingsState() - const voidSettingsService = useService('settingsStateService') + const accessor = useAccessor() + const voidSettingsService = accessor.get('IVoidSettingsService') const { enabled } = voidSettingsState.settingsOfProvider[providerName] const settingNames = customSettingNamesOfProvider(providerName) @@ -286,7 +296,9 @@ export const VoidProviderSettings = () => { export const VoidFeatureFlagSettings = () => { - const voidSettingsService = useService('settingsStateService') + const accessor = useAccessor() + const voidSettingsService = accessor.get('IVoidSettingsService') + const voidSettingsState = useSettingsState() return <> diff --git a/src/vs/workbench/contrib/void/browser/sidebarPane.ts b/src/vs/workbench/contrib/void/browser/sidebarPane.ts index bbe7cf4b..519a96c2 100644 --- a/src/vs/workbench/contrib/void/browser/sidebarPane.ts +++ b/src/vs/workbench/contrib/void/browser/sidebarPane.ts @@ -25,7 +25,7 @@ import { IViewPaneOptions, ViewPane } from '../../../browser/parts/views/viewPan import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js'; import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js'; -import { IDisposable } from '../../../../base/common/lifecycle.js'; +// import { IDisposable } from '../../../../base/common/lifecycle.js'; import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js'; import { IThemeService } from '../../../../platform/theme/common/themeService.js'; import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js'; @@ -33,16 +33,12 @@ import { IKeybindingService } from '../../../../platform/keybinding/common/keybi import { IOpenerService } from '../../../../platform/opener/common/opener.js'; import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js'; import { IHoverService } from '../../../../platform/hover/browser/hover.js'; - import { mountSidebar } from './react/out/sidebar-tsx/index.js'; -import { getReactServices } from './helpers/reactServicesHelper.js'; import { Codicon } from '../../../../base/common/codicons.js'; import { Orientation } from '../../../../base/browser/ui/sash/sash.js'; -// import { Orientation } from '../../../../base/browser/ui/sash/sash.js'; -// import { Codicon } from '../../../../base/common/codicons.js'; -// import { Codicon } from '../../../../base/common/codicons.js'; - +// import { IDisposable } from '../../../../base/common/lifecycle.js'; +import { IDisposable } from '../../../../base/common/lifecycle.js'; // compare against search.contribution.ts and debug.contribution.ts, scm.contribution.ts (source control) @@ -62,6 +58,8 @@ class SidebarViewPane extends ViewPane { @IOpenerService openerService: IOpenerService, @ITelemetryService telemetryService: ITelemetryService, @IHoverService hoverService: IHoverService, + // @ICodeEditorService private readonly editorService: ICodeEditorService, + // @IContextKeyService private readonly editorContextKeyService: IContextKeyService, ) { super(options, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, telemetryService, hoverService) @@ -76,10 +74,8 @@ class SidebarViewPane extends ViewPane { // gets set immediately this.instantiationService.invokeFunction(accessor => { - const services = getReactServices(accessor) - // mount react - const disposables: IDisposable[] | undefined = mountSidebar(parent, services); + const disposables: IDisposable[] | undefined = mountSidebar(parent, accessor); disposables?.forEach(d => this._register(d)) }); } @@ -88,8 +84,6 @@ class SidebarViewPane extends ViewPane { super.layoutBody(height, width) this.element.style.height = `${height}px` this.element.style.width = `${width}px` - - } }