Elgato_dark/void
1
0
Fork 0
mirror of https://github.com/voideditor/void synced 2026-05-24 09:58:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tool UI step 1 (BROKEN)

Browse source
This commit is contained in:
Andrew Pareles 2025-03-11 21:00:45 -07:00
parent fa1f407b76
commit 1ef8011bb0
4 changed files with 73 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/vs/workbench/contrib/void/browser/autocompleteService.ts
View file

@ -942,4 +942,3 @@ export class AutocompleteService extends Disposable implements IAutocompleteServ
registerWorkbenchContribution2(AutocompleteService.ID, AutocompleteService, WorkbenchPhase.BlockRestore); registerWorkbenchContribution2(AutocompleteService.ID, AutocompleteService, WorkbenchPhase.BlockRestore);

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

@ -29,7 +29,7 @@ import { filenameToVscodeLanguage } from '../../../../common/helpers/detectLangu
import { getModelSelectionState, getModelCapabilities } from '../../../../common/modelCapabilities.js'; import { getModelSelectionState, getModelCapabilities } from '../../../../common/modelCapabilities.js';
import { AlertTriangle, ChevronRight, Dot, Pencil, X } from 'lucide-react'; import { AlertTriangle, ChevronRight, Dot, Pencil, X } from 'lucide-react';
import { ChatMessage, StagingSelectionItem, ToolMessage, ToolRequestApproval } from '../../../../common/chatThreadServiceTypes.js'; import { ChatMessage, StagingSelectionItem, ToolMessage, ToolRequestApproval } from '../../../../common/chatThreadServiceTypes.js';
import { ToolCallParams, ToolName } from '../../../../common/toolsServiceTypes.js'; import { ToolCallParams, ToolName, ToolNameWithApproval } from '../../../../common/toolsServiceTypes.js';
@ -654,25 +654,29 @@ export const SelectedFiles = (
const ReasoningComponent = ({ children }: { children: React.ReactNode }) => {
return children
interface DropdownComponentProps {
title: string;
desc1: string;
desc2?: React.ReactNode;
numResults?: number;
children?: React.ReactNode;
onClick?: () => void;
} }
const DropdownComponent = ({
const ToolComponent = ({
title, title,
desc1, desc1,
desc2, desc2,
numResults, numResults,
children, children,
onClick, onClick,
}: DropdownComponentProps) => { }: {
title: string;
desc1: string;
desc2?: React.ReactNode;
numResults?: number;
children?: React.ReactNode;
onClick?: () => void;
}) => {
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const isDropdown = !!children const isDropdown = !!children
@ -690,7 +694,7 @@ const DropdownComponent = ({
> >
{isDropdown && ( {isDropdown && (
<ChevronRight <ChevronRight
className={`text-void-fg-3 mr-0.5 h-5 w-5 flex-shrink-0 transition-transform duration-100 ease-[cubic-bezier(0.4,0,0.2,1)] ${isExpanded ? 'rotate-90' : ''}`} className={`text-void-fg-3 mr-0.5 h-4 w-4 flex-shrink-0 transition-transform duration-100 ease-[cubic-bezier(0.4,0,0.2,1)] ${isExpanded ? 'rotate-90' : ''}`}
/> />
)} )}
<div className="flex items-center justify-between w-full flex-nowrap whitespace-nowrap gap-x-2"> <div className="flex items-center justify-between w-full flex-nowrap whitespace-nowrap gap-x-2">
@ -964,17 +968,14 @@ const AssistantMessageComponent = ({ chatMessage, isLoading, messageIdx, isLast
> >
{/* reasoning token */} {/* reasoning token */}
{hasReasoning && <DropdownComponent {hasReasoning && <ReasoningComponent>
title="Reasoning"
desc1=""
>
<ChatMarkdownRender <ChatMarkdownRender
string={reasoningStr} string={reasoningStr}
chatMessageLocation={chatMessageLocation} chatMessageLocation={chatMessageLocation}
isApplyEnabled={false} isApplyEnabled={false}
isLinkDetectionEnabled={true} isLinkDetectionEnabled={true}
/> />
</DropdownComponent>} </ReasoningComponent>}
{/* assistant message */} {/* assistant message */}
<ChatMarkdownRender <ChatMarkdownRender
@ -1003,7 +1004,7 @@ const ToolError = ({ title, desc1, errorMessage }: { title: string, desc1: strin
// <div className='text-sm opacity-90'>{errorMessage}</div> // <div className='text-sm opacity-90'>{errorMessage}</div>
// </div> // </div>
// </div> // </div>
<DropdownComponent <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
desc2={ desc2={
@ -1013,8 +1014,8 @@ const ToolError = ({ title, desc1, errorMessage }: { title: string, desc1: strin
</span> </span>
} }
> >
<div className='text-wrap whitespace-pre-wrap break-all break-words'>{errorMessage}</div> <div className='text-xs text-wrap whitespace-pre-wrap break-all break-words'>{errorMessage}</div>
</DropdownComponent> </ToolComponent>
) )
} }
@ -1066,7 +1067,6 @@ const toolNameToDesc = (toolName: ToolName, _toolParams: ToolCallParams[ToolName
} }
const ToolRequestAcceptRejectButtons = ({ toolRequest, messageIdx, isLast }: { toolRequest: ToolRequestApproval<ToolName> } & Omit<ChatBubbleProps, 'chatMessage'>) => { const ToolRequestAcceptRejectButtons = ({ toolRequest, messageIdx, isLast }: { toolRequest: ToolRequestApproval<ToolName> } & Omit<ChatBubbleProps, 'chatMessage'>) => {
const accessor = useAccessor() const accessor = useAccessor()
const chatThreadsService = accessor.get('IChatThreadService') const chatThreadsService = accessor.get('IChatThreadService')
@ -1130,19 +1130,11 @@ const ToolRequestAcceptRejectButtons = ({ toolRequest, messageIdx, isLast }: { t
} }
const toolNameToComponent: { [T in ToolName]: { const toolNameToComponent: { [T in ToolName]: {
requestWrapper: (props: { toolRequest: ToolRequestApproval<T> }) => React.ReactNode, requestWrapper: T extends ToolNameWithApproval ? ((props: { toolRequest: ToolRequestApproval<T> }) => React.ReactNode) : null,
resultWrapper: (props: { toolMessage: ToolMessage<T> }) => React.ReactNode, resultWrapper: (props: { toolMessage: ToolMessage<T> }) => React.ReactNode,
} } = { } } = {
'read_file': { 'read_file': {
requestWrapper: ({ toolRequest }) => { requestWrapper: null,
const accessor = useAccessor()
const commandService = accessor.get('ICommandService')
const title = toolNameToTitle[toolRequest.name]
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
return <DropdownComponent title={title} desc1={desc1}
onClick={() => { commandService.executeCommand('vscode.open', toolRequest.params.uri, { preview: true }) }}
/>
},
resultWrapper: ({ toolMessage }) => { resultWrapper: ({ toolMessage }) => {
const accessor = useAccessor() const accessor = useAccessor()
const commandService = accessor.get('ICommandService') const commandService = accessor.get('ICommandService')
@ -1155,7 +1147,7 @@ const toolNameToComponent: { [T in ToolName]: {
const { value, params } = toolMessage.result const { value, params } = toolMessage.result
return <DropdownComponent title={title} desc1={desc1}> return <ToolComponent title={title} desc1={desc1}>
<div <div
className="hover:brightness-125 hover:cursor-pointer transition-all duration-200 flex items-center flex-nowrap" className="hover:brightness-125 hover:cursor-pointer transition-all duration-200 flex items-center flex-nowrap"
onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }} onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }}
@ -1165,15 +1157,11 @@ const toolNameToComponent: { [T in ToolName]: {
</div> </div>
{toolMessage.result.value.hasNextPage && (<div className="italic">AI can scroll for more content...</div>)} {toolMessage.result.value.hasNextPage && (<div className="italic">AI can scroll for more content...</div>)}
</DropdownComponent> </ToolComponent>
}, },
}, },
'list_dir': { 'list_dir': {
requestWrapper: ({ toolRequest }) => { requestWrapper: null,
const title = toolNameToTitle[toolRequest.name]
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
return <DropdownComponent title={title} desc1={desc1} />
},
resultWrapper: ({ toolMessage }) => { resultWrapper: ({ toolMessage }) => {
const accessor = useAccessor() const accessor = useAccessor()
const commandService = accessor.get('ICommandService') const commandService = accessor.get('ICommandService')
@ -1187,7 +1175,7 @@ const toolNameToComponent: { [T in ToolName]: {
const { value, params } = toolMessage.result const { value, params } = toolMessage.result
return <DropdownComponent return <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
numResults={value.children?.length} numResults={value.children?.length}
@ -1210,15 +1198,11 @@ const toolNameToComponent: { [T in ToolName]: {
{value.itemsRemaining} more items... {value.itemsRemaining} more items...
</div> </div>
)} )}
</DropdownComponent> </ToolComponent>
} }
}, },
'pathname_search': { 'pathname_search': {
requestWrapper: ({ toolRequest }) => { requestWrapper: null,
const title = toolNameToTitle[toolRequest.name]
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
return <DropdownComponent title={title} desc1={desc1} />
},
resultWrapper: ({ toolMessage }) => { resultWrapper: ({ toolMessage }) => {
const accessor = useAccessor() const accessor = useAccessor()
const commandService = accessor.get('ICommandService') const commandService = accessor.get('ICommandService')
@ -1232,7 +1216,7 @@ const toolNameToComponent: { [T in ToolName]: {
const { value, params } = toolMessage.result const { value, params } = toolMessage.result
return ( return (
<DropdownComponent <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
numResults={value.uris.length} numResults={value.uris.length}
@ -1254,16 +1238,12 @@ const toolNameToComponent: { [T in ToolName]: {
More results available... More results available...
</div> </div>
)} )}
</DropdownComponent> </ToolComponent>
) )
} }
}, },
'search': { 'search': {
requestWrapper: ({ toolRequest }) => { requestWrapper: null,
const title = toolNameToTitle[toolRequest.name]
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
return <DropdownComponent title={title} desc1={desc1} />
},
resultWrapper: ({ toolMessage }) => { resultWrapper: ({ toolMessage }) => {
const accessor = useAccessor() const accessor = useAccessor()
const commandService = accessor.get('ICommandService') const commandService = accessor.get('ICommandService')
@ -1277,7 +1257,7 @@ const toolNameToComponent: { [T in ToolName]: {
const { value, params } = toolMessage.result const { value, params } = toolMessage.result
return ( return (
<DropdownComponent <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
numResults={value.uris.length} numResults={value.uris.length}
@ -1292,15 +1272,18 @@ const toolNameToComponent: { [T in ToolName]: {
</div> </div>
))} ))}
{value.hasNextPage && (<div className="italic">More results available...</div>)} {value.hasNextPage && (<div className="italic">More results available...</div>)}
</DropdownComponent> </ToolComponent>
) )
} }
}, },
// ---
'create_uri': { 'create_uri': {
requestWrapper: ({ toolRequest }) => { requestWrapper: ({ toolRequest }) => {
const title = toolNameToTitle[toolRequest.name] const title = toolNameToTitle[toolRequest.name]
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params) const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
return <DropdownComponent title={title} desc1={desc1} /> return <ToolComponent title={title} desc1={desc1} />
}, },
resultWrapper: ({ toolMessage }) => { resultWrapper: ({ toolMessage }) => {
const accessor = useAccessor() const accessor = useAccessor()
@ -1315,7 +1298,7 @@ const toolNameToComponent: { [T in ToolName]: {
const { params } = toolMessage.result const { params } = toolMessage.result
return ( return (
<DropdownComponent <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }} onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }}
@ -1329,7 +1312,7 @@ const toolNameToComponent: { [T in ToolName]: {
const commandService = accessor.get('ICommandService') const commandService = accessor.get('ICommandService')
const title = toolNameToTitle[toolRequest.name] const title = toolNameToTitle[toolRequest.name]
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params) const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
return <DropdownComponent title={title} desc1={desc1} return <ToolComponent title={title} desc1={desc1}
onClick={() => { commandService.executeCommand('vscode.open', toolRequest.params.uri, { preview: true }) }} onClick={() => { commandService.executeCommand('vscode.open', toolRequest.params.uri, { preview: true }) }}
/> />
}, },
@ -1346,7 +1329,7 @@ const toolNameToComponent: { [T in ToolName]: {
const { params } = toolMessage.result const { params } = toolMessage.result
return ( return (
<DropdownComponent <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }} onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }}
@ -1360,14 +1343,11 @@ const toolNameToComponent: { [T in ToolName]: {
const commandService = accessor.get('ICommandService') const commandService = accessor.get('ICommandService')
const title = toolNameToTitle[toolRequest.name] const title = toolNameToTitle[toolRequest.name]
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params) const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
return <DropdownComponent title={title} desc1={desc1} return <ToolComponent title={title} desc1={desc1}
onClick={() => { commandService.executeCommand('vscode.open', toolRequest.params.uri, { preview: true }) }} onClick={() => { commandService.executeCommand('vscode.open', toolRequest.params.uri, { preview: true }) }}
> >
<ChatMarkdownRender <ChatMarkdownRender string={toolRequest.params.changeDescription} chatMessageLocation={undefined} />
string={toolRequest.params.changeDescription} </ToolComponent>
chatMessageLocation={undefined}
/>
</DropdownComponent>
}, },
resultWrapper: ({ toolMessage }) => { resultWrapper: ({ toolMessage }) => {
const accessor = useAccessor() const accessor = useAccessor()
@ -1382,7 +1362,7 @@ const toolNameToComponent: { [T in ToolName]: {
const { params } = toolMessage.result const { params } = toolMessage.result
return ( return (
<DropdownComponent <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }} onClick={() => { commandService.executeCommand('vscode.open', params.uri, { preview: true }) }}
@ -1398,7 +1378,7 @@ const toolNameToComponent: { [T in ToolName]: {
const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params) const desc1 = toolNameToDesc(toolRequest.name, toolRequest.params)
const { waitForCompletion, command, proposedTerminalId } = toolRequest.params const { waitForCompletion, command, proposedTerminalId } = toolRequest.params
return <DropdownComponent title={title} desc1={desc1} desc2={waitForCompletion ? '(background task)' : null} return <ToolComponent title={title} desc1={desc1} desc2={waitForCompletion ? null : '(background task)'}
// TODO!!! open terminal // TODO!!! open terminal
/> />
}, },
@ -1417,29 +1397,27 @@ const toolNameToComponent: { [T in ToolName]: {
const { terminalId, resolveReason, result } = toolMessage.result.value const { terminalId, resolveReason, result } = toolMessage.result.value
return ( return (
<DropdownComponent <ToolComponent
title={title} title={title}
desc1={desc1} desc1={desc1}
desc2={resolveReason.type === 'bgtask' ? '(background task)' : null} desc2={resolveReason.type === 'bgtask' ? '(background task)' : null}
> >
<div
className="hover:brightness-125 hover:cursor-pointer transition-all duration-200 flex items-center flex-nowrap" <div className='font-mono whitespace-pre text-nowrap text-xs overflow-auto bg-void-bg-1'>
// TODO!!! open terminal {resolveReason.type === 'bgtask' ? 'Result so far:' : null}
> {result}
<div> {
<div className="flex-shrink-0"><svg className="w-1 h-1 opacity-60 mr-1.5 fill-current" viewBox="0 0 100 40"><rect x="0" y="15" width="100" height="10" /></svg></div> resolveReason.type === 'done' ? (resolveReason.exitCode !== 0 ? `
{resolveReason.type === 'bgtask' ? 'Result so far:' : null} Error: exit code ${resolveReason.exitCode}` : null)
<ChatMarkdownRender string={`\`\`\`\n${result}\n\`\`\``} chatMessageLocation={undefined} /> : resolveReason.type === 'bgtask' ? null :
{ resolveReason.type === 'timeout' ? `
resolveReason.type === 'done' ? (resolveReason.exitCode !== 0 ? `Error: exit code ${resolveReason.exitCode}` : null) (partial results; request timed out)` :
: resolveReason.type === 'bgtask' ? null : resolveReason.type === 'toofull' ? `
resolveReason.type === 'timeout' ? `(partial results; request timed out)` : (truncated)`
resolveReason.type === 'toofull' ? `(truncated)` : null
: null }
}
</div>
</div> </div>
</DropdownComponent> </ToolComponent>
) )
} }
} }
@ -1473,16 +1451,10 @@ const ChatBubble = ({ chatMessage, isLoading, messageIdx, isLast }: ChatBubblePr
const isLastMessage = true // TODO!!! fix this const isLastMessage = true // TODO!!! fix this
if (!isLastMessage) return null if (!isLastMessage) return null
const ToolRequestWrapper = toolNameToComponent[chatMessage.name].requestWrapper as React.FC<{ toolRequest: any }> // ts isnt smart enough... const ToolRequestWrapper = toolNameToComponent[chatMessage.name].requestWrapper as React.FC<{ toolRequest: any }> // ts isnt smart enough...
return <> return <ToolRequestWrapper toolRequest={chatMessage} />
<ToolRequestWrapper toolRequest={chatMessage} />
<ToolRequestAcceptRejectButtons toolRequest={chatMessage} messageIdx={messageIdx} isLast={isLast} />
</>
} }
else if (role === 'tool') { else if (role === 'tool') {
const title = toolNameToTitle[chatMessage.name]
// if (chatMessage.result.type === 'error') return <ToolError title={title} params={chatMessage.result.params} errorMessage={chatMessage.result.value} />
const ToolResultWrapper = toolNameToComponent[chatMessage.name].resultWrapper as React.FC<{ toolMessage: any }> // ts isnt smart enough... const ToolResultWrapper = toolNameToComponent[chatMessage.name].resultWrapper as React.FC<{ toolMessage: any }> // ts isnt smart enough...
return <ToolResultWrapper toolMessage={chatMessage} /> return <ToolResultWrapper toolMessage={chatMessage} />
} }
@ -1692,3 +1664,4 @@ export const SidebarChat = () => {
</div> </div>
} }

8
src/vs/workbench/contrib/void/browser/terminalToolService.ts
View file

@ -4,6 +4,7 @@
*--------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------*/
import { Disposable, IDisposable } from '../../../../base/common/lifecycle.js'; import { Disposable, IDisposable } from '../../../../base/common/lifecycle.js';
import { removeAnsiEscapeCodes } from '../../../../base/common/strings.js';
import { registerSingleton, InstantiationType } from '../../../../platform/instantiation/common/extensions.js'; import { registerSingleton, InstantiationType } from '../../../../platform/instantiation/common/extensions.js';
import { createDecorator } from '../../../../platform/instantiation/common/instantiation.js'; import { createDecorator } from '../../../../platform/instantiation/common/instantiation.js';
import { TerminalLocation } from '../../../../platform/terminal/common/terminal.js'; import { TerminalLocation } from '../../../../platform/terminal/common/terminal.js';
@ -171,6 +172,11 @@ export class TerminalToolService extends Disposable implements ITerminalToolServ
console.log('res', { terminalId, didCreateTerminal, result, resolveReason }) console.log('res', { terminalId, didCreateTerminal, result, resolveReason })
result = removeAnsiEscapeCodes(result)
.split('\n').slice(1, -1) // remove first and last line (first = command, last = andrewpareles/void %)
.join('\n')
console.log('TerminalToolService: Command completed:', JSON.stringify(result))
return { terminalId, didCreateTerminal, result, resolveReason } return { terminalId, didCreateTerminal, result, resolveReason }
} }
@ -180,5 +186,3 @@ export class TerminalToolService extends Disposable implements ITerminalToolServ
} }
registerSingleton(ITerminalToolService, TerminalToolService, InstantiationType.Delayed); registerSingleton(ITerminalToolService, TerminalToolService, InstantiationType.Delayed);

4
src/vs/workbench/contrib/void/common/toolsServiceTypes.ts
View file

@ -137,7 +137,9 @@ export const isAToolName = (toolName: string): toolName is ToolName => {
} }
export const toolNamesThatRequireApproval = new Set<ToolName>(['create_uri', 'delete_uri', 'edit', 'terminal_command'] satisfies ToolName[]) const toolNamesWithApproval = ['create_uri', 'delete_uri', 'edit', 'terminal_command'] as const satisfies readonly ToolName[]
export type ToolNameWithApproval = typeof toolNamesWithApproval[number]
export const toolNamesThatRequireApproval = new Set<ToolName>(toolNamesWithApproval)
export type ToolCallParams = { export type ToolCallParams = {
'read_file': { uri: URI, pageNumber: number }, 'read_file': { uri: URI, pageNumber: number },