selection style

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

@@ -26,7 +26,7 @@ import { ILLMMessageService } from '../../../../../../../platform/void/common/ll
 import { IModelService } from '../../../../../../../editor/common/services/model.js';
 
 
-const IconX = ({ size, className = '' }: { size: number, className?: string }) => {
+const IconX = ({ size, className = '', ...props }: { size: number, className?: string } & React.SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'
@@ -34,8 +34,9 @@ const IconX = ({ size, className = '' }: { size: number, className?: string }) =
 			height={size}
 			viewBox='0 0 24 24'
 			fill='none'
-			stroke='black'
+			stroke='currentColor'
 			className={className}
+			{...props}
 		>
 			<path
 				strokeLinecap='round'
@@ -212,7 +213,7 @@ export const SelectedFiles = (
 	return (
 		!!selections && selections.length !== 0 && (
 			<div
-				className='flex flex-wrap gap-4 p-2 text-left'
+				className='flex flex-wrap gap-2 text-left'
 			>
 				{selections.map((selection, i) => {
 
@@ -225,13 +226,14 @@ export const SelectedFiles = (
 							{/* selection summary */}
 							<div
 								// className="relative rounded rounded-e-2xl flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default"
-								className={`grid grid-rows-2 gap-1 relative p-1
+								className={`flex items-center gap-1 relative
+									rounded-md p-1
+									w-fit h-fit
 									select-none
-									bg-vscode-editor-bg hover:brightness-90
-									border border-vscode-button-border rounded-md
-									text-vscode-commandcenter-inactive-fg
-									w-fit h-fit min-w-[81px] p-1
-							`}
+									bg-vscode-editor-bg hover:brightness-95
+									border border-vscode-commandcenter-border rounded-xs
+									text-xs text-vscode-editor-fg text-nowrap
+								`}
 								onClick={() => {
 									setSelectionIsOpened(s => {
 										const newS = [...s]
@@ -240,18 +242,37 @@ export const SelectedFiles = (
 									});
 								}}
 							>
-								<span className='truncate'>
+								<span className=''>
 									{/* file name */}
 									{getBasename(selection.fileURI.fsPath)}
 									{/* selection range */}
 									{selection.selectionStr !== null ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
 								</span>
 
-								{/* type of selection */}
-								<span className='truncate'>{selection.selectionStr !== null ? 'Selection' : 'File'}</span>
-
 								{/* X button */}
-								{type === 'staging' && // hoveredIdx === i
+								{type === 'staging' &&
+									<span
+										className='
+											cursor-pointer
+											bg-vscode-editorwidget-bg hover:bg-vscode-toolbar-hover-bg
+											rounded-md
+											z-1
+										'
+										onClick={(e) => {
+											e.stopPropagation();
+											if (type !== 'staging') return;
+											setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
+											setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
+										}}
+									>
+										<IconX size={16} className="p-[2px] stroke-[3] text-vscode-toolbar-foreground" />
+									</span>
+								}
+
+								{/* type of selection */}
+								{/* <span className='truncate'>{selection.selectionStr !== null ? 'Selection' : 'File'}</span> */}
+								{/* X button */}
+								{/* {type === 'staging' && // hoveredIdx === i
 									<span className='absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] cursor-pointer bg-white rounded-full border border-vscode-input-border z-1'
 										onClick={(e) => {
 											e.stopPropagation();
@@ -262,11 +283,12 @@ export const SelectedFiles = (
 									>
 										<IconX size={16} className="p-[2px] stroke-[3]" />
 									</span>
-								}
+								} */}
+
 							</div>
 							{/* selection text */}
 							{showSelectionText &&
-								<div className='w-full'>
+								<div className='w-full p-1 rounded-sm border-vscode-editor-border bg-vscode-editor-bg'>
 									<BlockCode text={selection.selectionStr!} language={getLanguageFromFileName(selection.fileURI.path)} />
 								</div>
 							}
@@ -483,7 +505,7 @@ export const SidebarChat = () => {
 
 		{/* input box */}
 		<div // this div is used to position the input box properly
-			className={`right-0 left-0 m-2 z-[999] ${previousMessages.length > 0 ? 'absolute bottom-0' : ''}`}
+			className={`right-0 left-0 m-2 z-[999] overflow-hidden ${previousMessages.length > 0 ? 'absolute bottom-0' : ''}`}
 		>
 			<form
 				ref={(ref) => { if (ref) { setFormHeight(ref.clientHeight); } }}
@@ -539,7 +561,13 @@ export const SidebarChat = () => {
 						//     .split(' ')
 						//     .map(style => `@@[&_div.monaco-inputbox]:!void-${style}`)
 						//     .join(' ');
-						`@@[&_textarea]:!void-bg-transparent @@[&_textarea]:!void-outline-none @@[&_textarea]:!void-text-vscode-input-fg @@[&_textarea]:!void-min-h-[81px] @@[&_textarea]:!void-max-h-[500px] @@[&_div.monaco-inputbox]:!void-border-none @@[&_div.monaco-inputbox]:!void-outline-none`
+						`@@[&_textarea]:!void-bg-transparent
+						@@[&_textarea]:!void-outline-none
+						@@[&_textarea]:!void-text-vscode-input-fg
+						@@[&_textarea]:!void-min-h-[81px]
+						@@[&_textarea]:!void-max-h-[500px]
+						@@[&_div.monaco-inputbox]:!void-border-none
+						@@[&_div.monaco-inputbox]:!void-outline-none`
 					}
 				>
 
@@ -557,7 +585,10 @@ export const SidebarChat = () => {
 					className='flex flex-row justify-between items-end gap-1'
 				>
 					{/* submit options */}
-					<div className='max-w-[150px] @@[&_select]:!void-border-none @@[&_select]:!void-outline-none'>
+					<div className='max-w-[150px]
+						@@[&_select]:!void-border-none
+						@@[&_select]:!void-outline-none'
+					>
 						<ModelDropdown featureName='Ctrl+L' />
 					</div>
 

src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx

@@ -299,7 +299,7 @@ export const VoidCodeEditor = ({ initValue, language }: { initValue: string, lan
 
 	return <div ref={divRef}>
 		<WidgetComponent
-			className='relative z-0'
+			className='relative z-0 text-sm'
 			ctor={useCallback((container) =>
 				instantiationService.createInstance(
 					CodeEditorWidget,
@@ -312,6 +312,8 @@ export const VoidCodeEditor = ({ initValue, language }: { initValue: string, lan
 							alwaysConsumeMouseWheel: false,
 							vertical: 'auto',
 							horizontal: 'auto',
+							// verticalScrollbarSize: 3,
+							// horizontalScrollbarSize: 3,
 						},
 						scrollBeyondLastLine: false,
 
@@ -335,6 +337,9 @@ export const VoidCodeEditor = ({ initValue, language }: { initValue: string, lan
 						hideCursorInOverviewRuler: true,
 						overviewRulerBorder: false,
 						glyphMargin: false,
+						stickyScroll: {
+							enabled: false
+						},
 					},
 					{
 						isSimpleWidget: true,

src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx

@@ -56,7 +56,7 @@ const DummySelectBox = () => {
 			flex items-center
 			flex-nowrap text-ellipsis
 			text-vscode-charts-yellow
-			hover:brightness-110 transition-all duration-200
+			hover:brightness-90 transition-all duration-200
 			cursor-pointer
 		`}
 		onClick={openSettings}

src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx

@@ -220,7 +220,7 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider
 	return <ErrorBoundary>
 		<div className='my-1'>
 			<VoidInputBox
-				placeholder={`Enter your ${providerTitle} ${settingTitle} (${placeholder}).`}
+				placeholder={`${providerTitle} ${settingTitle} (${placeholder}).`}
 				onChangeText={useCallback((newVal) => {
 					if (weChangedTextRef) return
 					voidSettingsService.setSettingOfProvider(providerName, settingName, newVal)

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

@@ -107,12 +107,16 @@ module.exports = {
 					"editor-bg": "var(--vscode-editor-background)",
 					"editor-fg": "var(--vscode-editor-foreground)",
 
-					// editor widget colors
-					"editorwidget-fg": "var(--vscode-editorWidget-foreground)",
-					"editorwidget-bg": "var(--vscode-editorWidget-background)",
-					"editorwidget-border": "var(--vscode-editorWidget-border)",
+
 
 					// other
+					"editorwidget-bg": "var(--vscode-editorWidget-background)",
+					"toolbar-hover-bg": "var(--vscode-toolbar-hoverBackground)",
+					"toolbar-foreground": "var(--vscode-editorActionList-foreground)",
+
+					"editorwidget-fg": "var(--vscode-editorWidget-foreground)",
+					"editorwidget-border": "var(--vscode-editorWidget-border)",
+
 					"charts-orange": "var(--vscode-charts-orange)",
 					"charts-yellow": "var(--vscode-charts-yellow)",
 				},