From a0672f845d8c14d5e8e8224b65c1c6ffb6b05abb Mon Sep 17 00:00:00 2001 From: Mathew Pareles Date: Mon, 6 Jan 2025 18:38:02 -0800 Subject: [PATCH] selection ui --- .../browser/react/src/sidebar-tsx/Sidebar.tsx | 15 ++-- .../react/src/sidebar-tsx/SidebarChat.tsx | 88 +++++++++++++------ .../void/browser/react/src/util/inputs.tsx | 8 +- .../src/void-settings-tsx/ModelDropdown.tsx | 4 +- 4 files changed, 73 insertions(+), 42 deletions(-) diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx index 4a5f23b1..edbedbcc 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx @@ -13,17 +13,18 @@ import { useIsDark, useSidebarState } from '../util/services.js'; // import { SidebarChat } from './SidebarChat.js'; import '../styles.css' -import { SidebarThreadSelector } from './SidebarThreadSelector.js'; import { SidebarChat } from './SidebarChat.js'; import ErrorBoundary from './ErrorBoundary.js'; export const Sidebar = ({ className }: { className: string }) => { const sidebarState = useSidebarState() - const { isHistoryOpen, currentTab: tab } = sidebarState + const { currentTab: tab } = sidebarState - const isDark = useIsDark() - // ${isDark ? 'dark' : ''} - return
+ // const isDark = useIsDark() + return
{ sidebarStateService.setState({ currentTab: tabs[(index + 1) % tabs.length] as any }) }}>clickme {tab} */} -
+ {/*
-
+
*/}
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 e34209ae..66fb4c99 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,7 +6,7 @@ import React, { ButtonHTMLAttributes, FormEvent, FormHTMLAttributes, Fragment, useCallback, useEffect, useRef, useState } from 'react'; -import { useAccessor, useThreadsState } from '../util/services.js'; +import { useAccessor, useSidebarState, useThreadsState } from '../util/services.js'; import { ChatMessage, CodeSelection, CodeStagingSelection, IThreadHistoryService } from '../../../threadHistoryService.js'; import { BlockCode, getLanguageFromFileName } from '../markdown/BlockCode.js'; @@ -24,6 +24,7 @@ import { chat_systemMessage, chat_prompt } 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'; +import { SidebarThreadSelector } from './SidebarThreadSelector.js'; const IconX = ({ size, className = '', ...props }: { size: number, className?: string } & React.SVGProps) => { @@ -54,7 +55,7 @@ const IconArrowUp = ({ size, className = '' }: { size: number, className?: strin width={size} height={size} className={className} - viewBox="0 0 32 32" + viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > @@ -62,10 +63,9 @@ const IconArrowUp = ({ size, className = '' }: { size: number, className?: strin fill="black" fillRule="evenodd" clipRule="evenodd" - d="M15.1918 8.90615C15.6381 8.45983 16.3618 8.45983 16.8081 8.90615L21.9509 14.049C22.3972 14.4953 22.3972 15.2189 21.9509 15.6652C21.5046 16.1116 20.781 16.1116 20.3347 15.6652L17.1428 12.4734V22.2857C17.1428 22.9169 16.6311 23.4286 15.9999 23.4286C15.3688 23.4286 14.8571 22.9169 14.8571 22.2857V12.4734L11.6652 15.6652C11.2189 16.1116 10.4953 16.1116 10.049 15.6652C9.60265 15.2189 9.60265 14.4953 10.049 14.049L15.1918 8.90615Z" + d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" > - ); }; @@ -174,26 +174,27 @@ export const ButtonSubmit = ({ className, disabled, ...props }: ButtonProps & Re return } export const ButtonStop = ({ className, ...props }: ButtonHTMLAttributes) => { return } @@ -269,6 +270,9 @@ export const SelectedFiles = ( // index -> isOpened const [selectionIsOpened, setSelectionIsOpened] = useState<(boolean)[]>(selections?.map(() => false) ?? []) + const accessor = useAccessor() + const commandService = accessor.get('ICommandService') + return ( !!selections && selections.length !== 0 && (
{ const isThisSelectionOpened = !!(selection.selectionStr && selectionIsOpened[i]) + const isThisSelectionAFile = selection.selectionStr === null + + return (
{ - setSelectionIsOpened(s => { - const newS = [...s] - newS[i] = !newS[i] - return newS - }); + // open the file if it is a file + if (isThisSelectionAFile) { + commandService.executeCommand('vscode.open', selection.fileURI, { + preview: true, + // preserveFocus: false, + }); + } else { + // open the selection if it is a text-selection + setSelectionIsOpened(s => { + const newS = [...s] + newS[i] = !newS[i] + return newS + }); + } }} > - + {/* file name */} {getBasename(selection.fileURI.fsPath)} {/* selection range */} - {selection.selectionStr !== null ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''} + {!isThisSelectionAFile ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''} {/* X button */} @@ -378,15 +396,22 @@ const ChatBubble = ({ chatMessage, isLoading }: { } return
- {chatbubbleContents} - {isLoading && } +
+ {chatbubbleContents} + {isLoading && } +
} @@ -411,6 +436,8 @@ export const SidebarChat = () => { return () => disposables.forEach(d => d.dispose()) }, [sidebarStateService, inputBoxRef]) + const { currentTab, isHistoryOpen } = useSidebarState() + // threads state const threadsState = useThreadsState() const threadsStateService = accessor.get('IThreadHistoryService') @@ -433,6 +460,7 @@ export const SidebarChat = () => { const [sidebarRef, sidebarDimensions] = useResizeObserver() const [formRef, formDimensions] = useResizeObserver() + const [historyRef, historyDimensions] = useResizeObserver() // const [formHeight, setFormHeight] = useState(0) // TODO should use resize observer instead // const [sidebarHeight, setSidebarHeight] = useState(0) @@ -551,6 +579,14 @@ export const SidebarChat = () => { ref={sidebarRef} className={`w-full h-full`} > + {/* thread selector */} +
+ +
+ + {/* previous messages + current stream */} { overflow-x-hidden overflow-y-auto `} - style={{ maxHeight: sidebarDimensions.height - formDimensions.height - 30 }} + style={{ maxHeight: sidebarDimensions.height - historyDimensions.height - formDimensions.height - 30 }} // the height of the previousMessages is determined by all other heights > {/* previous messages */} {previousMessages.map((message, i) => )} @@ -566,12 +602,6 @@ export const SidebarChat = () => { {/* message stream */} - {/* {_test_messages.map((_, i) =>
div {i}
)} -
{`totalHeight: ${sidebarHeight - formHeight - 30}`}
-
{`sidebarHeight: ${sidebarHeight}`}
-
{`formHeight: ${formHeight}`}
- */} - 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 029e0000..c1bfdb06 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 @@ -306,9 +306,9 @@ export const VoidCodeEditor = ({ initValue, language }: { initValue: string, lan initValue = normalizeIndentation(initValue) - return
+ return
{ return instantiationService.createInstance( CodeEditorWidget, @@ -321,8 +321,8 @@ export const VoidCodeEditor = ({ initValue, language }: { initValue: string, lan alwaysConsumeMouseWheel: false, vertical: 'hidden', horizontal: 'hidden', - verticalScrollbarSize: 0, - horizontalScrollbarSize: 0, + verticalScrollbarSize: 8, + horizontalScrollbarSize: 8, }, scrollBeyondLastLine: false, 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 1a3bd734..9a77c73c 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 @@ -75,10 +75,10 @@ const MemoizedModelSelectBox = ({ featureName }: { featureName: FeatureName }) = const DummySelectBox = () => { const accessor = useAccessor() - const comandService = accessor.get('ICommandService') + const commandService = accessor.get('ICommandService') const openSettings = () => { - comandService.executeCommand(VOID_OPEN_SETTINGS_ACTION_ID); + commandService.executeCommand(VOID_OPEN_SETTINGS_ACTION_ID); }; return