mirror of
https://github.com/voideditor/void
synced 2026-05-24 09:58:23 +00:00
Sidebar restructure
This commit is contained in:
mp
parent
24fdb1ca0d
commit
051f8f38e7
4 changed files with 159 additions and 67 deletions
|
|
@ -1,13 +1,16 @@
|
|||
|
||||
import { CodeSelection } from '../registerThreads.js';
|
||||
|
||||
export const filesStr = (selections: CodeSelection[]) => {
|
||||
export const stringifySelections = (selections: CodeSelection[]) => {
|
||||
|
||||
|
||||
|
||||
return selections.map(({ fileURI, content, selectionStr }) =>
|
||||
`\
|
||||
File: ${fileURI.fsPath}
|
||||
\`\`\`
|
||||
${content}
|
||||
${content // this was the enite file which is foolish
|
||||
}
|
||||
\`\`\`${selectionStr === null ? '' : `
|
||||
Selection: ${selectionStr}`}
|
||||
`).join('\n')
|
||||
|
|
@ -17,7 +20,7 @@ Selection: ${selectionStr}`}
|
|||
export const userInstructionsStr = (instructions: string, selections: CodeSelection[] | null) => {
|
||||
let str = '';
|
||||
if (selections && selections.length > 0) {
|
||||
str += filesStr(selections);
|
||||
str += stringifySelections(selections);
|
||||
str += `Please edit the selected code following these instructions:\n`
|
||||
}
|
||||
str += `${instructions}`;
|
||||
|
|
@ -5,9 +5,9 @@
|
|||
import React, { FormEvent, Fragment, useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
|
||||
import { useConfigState, useService, useThreadsState } from '../util/services.js';
|
||||
import { useConfigState, useService, useSidebarState, useThreadsState } from '../util/services.js';
|
||||
import { generateDiffInstructions } from '../../../prompt/systemPrompts.js';
|
||||
import { userInstructionsStr } from '../../../prompt/stringifyFiles.js';
|
||||
import { userInstructionsStr } from '../../../prompt/stringifySelections.js';
|
||||
import { ChatMessage, CodeSelection, CodeStagingSelection } from '../../../registerThreads.js';
|
||||
|
||||
import { BlockCode } from '../markdown/BlockCode.js';
|
||||
|
|
@ -22,6 +22,68 @@ import { getCmdKey } from '../../../getCmdKey.js'
|
|||
import { HistoryInputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
|
||||
import { VoidInputBox } from './inputs.js';
|
||||
|
||||
|
||||
const IconX = ({ size, className = '' }: { size: number, className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
d='M6 18 18 6M6 6l12 12'
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const IconArrowUp = ({ size, className = '' }: { size: number, className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const IconSquare = ({ size, className = '' }: { size: number, className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="2" y="2" width="20" height="20" rx="4" ry="4" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// read files from VSCode
|
||||
const VSReadFile = async (modelService: IModelService, uri: URI): Promise<string | null> => {
|
||||
const model = modelService.getModel(uri)
|
||||
|
|
@ -42,49 +104,67 @@ export const SelectedFiles = (
|
|||
| { type: 'past', selections: CodeSelection[] | null; setStaging?: undefined }
|
||||
| { type: 'staging', selections: CodeStagingSelection[] | null; setStaging: ((files: CodeStagingSelection[]) => void) }
|
||||
) => {
|
||||
|
||||
// index -> isOpened
|
||||
const [selectionIsOpened, setSelectionIsOpened] = useState<(boolean)[]>(selections?.map(() => false) ?? [])
|
||||
|
||||
return (
|
||||
!!selections && selections.length !== 0 && (
|
||||
<div className='flex flex-wrap -mx-1 -mb-1'>
|
||||
{selections.map((selection, i) => (
|
||||
<Fragment key={i}>
|
||||
{/* selection display summary */}
|
||||
<button
|
||||
disabled={!setStaging}
|
||||
className={`btn btn-secondary btn-sm border border-vscode-input-border rounded flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default`}
|
||||
type='button'
|
||||
onClick={() => {
|
||||
if (type !== 'staging') return
|
||||
setStaging([...selections.slice(0, i), ...selections.slice(i + 1, Infinity)])
|
||||
}}
|
||||
{/* selection summary */}
|
||||
<div
|
||||
className={`relative rounded rounded-e-2xl flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default border-vscode-input-border`}
|
||||
>
|
||||
<span>{getBasename(selection.fileURI.fsPath)}</span>
|
||||
<div
|
||||
className="grid grid-rows-2 gap-2 border border-white rounded-sm bg-vscode-button-secondary-bg"
|
||||
onClick={() => {
|
||||
setSelectionIsOpened(s => {
|
||||
const newS = [...s]
|
||||
newS[i] = !newS[i]
|
||||
return newS
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
{/* file name */}
|
||||
<span className='truncate'>{getBasename(selection.fileURI.fsPath)}</span>
|
||||
|
||||
{/* type of selection */}
|
||||
<span className='truncate text-opacity-75'>{selection.selectionStr ? 'Selection' : 'File'}</span>
|
||||
|
||||
</div>
|
||||
|
||||
{/* X button */}
|
||||
{type === 'staging' && <span className=''>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
stroke='currentColor'
|
||||
className='size-4'
|
||||
{type === 'staging' && // hoveredIdx === i
|
||||
<span className='absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] cursor-pointer bg-white rounded-full border-2 border-black'
|
||||
onClick={() => {
|
||||
if (type !== 'staging') return;
|
||||
setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
|
||||
}}
|
||||
>
|
||||
<path
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
d='M6 18 18 6M6 6l12 12'
|
||||
/>
|
||||
</svg>
|
||||
</span>}
|
||||
</button>
|
||||
<IconX size={20} className="p-[3px] stroke-[2]" />
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
{/* selection full text */}
|
||||
{type === 'staging' && selection.selectionStr && <BlockCode text={selection.selectionStr}
|
||||
buttonsOnHover={(<button
|
||||
onClick={() => {
|
||||
setStaging([...selections.slice(0, i), { ...selection, selectionStr: null }, ...selections.slice(i + 1, Infinity)])
|
||||
}}
|
||||
className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
|
||||
>Remove</button>
|
||||
)} />}
|
||||
{type === 'staging' && selection.selectionStr && selectionIsOpened[i] &&
|
||||
<BlockCode
|
||||
text={selection.selectionStr}
|
||||
// buttonsOnHover={(<button
|
||||
// // onClick={() => { // clear the selection string but keep the file
|
||||
// // setStaging([...selections.slice(0, i), { ...selection, selectionStr: null }, ...selections.slice(i + 1, Infinity)])
|
||||
// // }}
|
||||
// onClick={() => {
|
||||
// if (type !== 'staging') return
|
||||
// setStaging([...selections.slice(0, i), ...selections.slice(i + 1, Infinity)])
|
||||
// }}
|
||||
// className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
|
||||
// >Remove</button>
|
||||
// )}
|
||||
/>
|
||||
}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -171,19 +251,33 @@ export const SidebarChat = () => {
|
|||
if (isLoading) return
|
||||
|
||||
|
||||
const currSelns = threadsStateService.state._currentStagingSelections
|
||||
|
||||
const currSelns = threadsStateService.state._currentStagingSelections ?? []
|
||||
const selections = !currSelns ? null : await Promise.all(
|
||||
currSelns.map(async (sel) => ({ ...sel, content: await VSReadFile(modelService, sel.fileURI) }))
|
||||
).then(
|
||||
(files) => files.filter(file => file.content !== null) as CodeSelection[]
|
||||
)
|
||||
|
||||
|
||||
// // TODO don't save files to the thread history
|
||||
// const selectedSnippets = currSelns.filter(sel => sel.selectionStr !== null)
|
||||
// const selectedFiles = await Promise.all( // do not add these to the context history
|
||||
// currSelns.filter(sel => sel.selectionStr === null)
|
||||
// .map(async (sel) => ({ ...sel, content: await VSReadFile(modelService, sel.fileURI) }))
|
||||
// ).then(
|
||||
// (files) => files.filter(file => file.content !== null) as CodeSelection[]
|
||||
// )
|
||||
// const contextToSendToLLM = ''
|
||||
// const contextToAddToHistory = ''
|
||||
|
||||
|
||||
// add system message to chat history
|
||||
const systemPromptElt: ChatMessage = { role: 'system', content: generateDiffInstructions }
|
||||
threadsStateService.addMessageToCurrentThread(systemPromptElt)
|
||||
|
||||
// add user's message to chat history
|
||||
const userHistoryElt: ChatMessage = { role: 'user', content: userInstructionsStr(instructions, selections), displayContent: instructions, selections }
|
||||
const userHistoryElt: ChatMessage = { role: 'user', content: userInstructionsStr(instructions, selections), displayContent: instructions, selections: selections }
|
||||
threadsStateService.addMessageToCurrentThread(userHistoryElt)
|
||||
|
||||
const currentThread = threadsStateService.getCurrentThread(threadsStateService.state) // the the instant state right now, don't wait for the React state
|
||||
|
|
@ -264,15 +358,17 @@ export const SidebarChat = () => {
|
|||
<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream || null }} />
|
||||
</div>
|
||||
|
||||
{/* user input box */}
|
||||
<div className="shrink-0 py-4">
|
||||
{/* input box */}
|
||||
<div className="text-left">
|
||||
<div className="relative">
|
||||
<div className="input">
|
||||
{/* selections */}
|
||||
{(selections && selections.length !== 0) && <div className="p-2 pb-0 space-y-2">
|
||||
<SelectedFiles type='staging' selections={selections} setStaging={threadsStateService.setStaging.bind(threadsStateService)} />
|
||||
</div>}
|
||||
{(selections && selections.length !== 0) &&
|
||||
<div className="p-2 pb-0 space-y-2">
|
||||
<SelectedFiles type='staging' selections={selections} setStaging={threadsStateService.setStaging.bind(threadsStateService)} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{/* error message */}
|
||||
{latestError === null ? null :
|
||||
|
|
@ -282,7 +378,6 @@ export const SidebarChat = () => {
|
|||
/>
|
||||
}
|
||||
|
||||
{/* user input box */}
|
||||
<form
|
||||
ref={formRef}
|
||||
className={`flex flex-row items-center rounded-md p-2`}
|
||||
|
|
@ -303,39 +398,24 @@ export const SidebarChat = () => {
|
|||
initVal=''
|
||||
/>
|
||||
|
||||
{/* <textarea
|
||||
ref={chatInputRef}
|
||||
placeholder={`Press ${getCmdKey()}+L to select.`}
|
||||
onChange={(e) => { setInstructions(e.target.value) }}
|
||||
className={`w-full p-2 leading-tight resize-none max-h-[50vh] overflow-auto bg-transparent border-none !outline-none`}
|
||||
rows={1}
|
||||
onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
|
||||
/> */}
|
||||
|
||||
{/* submit/stop button */}
|
||||
{isLoading ?
|
||||
// stop button
|
||||
<button
|
||||
className="p-[5px] bg-white rounded-full cursor-pointer"
|
||||
onClick={onAbort}
|
||||
type='button'
|
||||
className="font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
|
||||
>
|
||||
<svg
|
||||
className='scale-50'
|
||||
stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 24H0V0h24v24z"></path>
|
||||
</svg>
|
||||
<IconSquare size={24} className="stroke-[2]" />
|
||||
</button>
|
||||
:
|
||||
// submit button (up arrow)
|
||||
<button
|
||||
className="font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
|
||||
className="bg-white rounded-full cursor-pointer"
|
||||
disabled={isDisabled}
|
||||
type='submit'
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="12" y1="19" x2="12" y2="5"></line>
|
||||
<polyline points="5 12 12 5 19 12"></polyline>
|
||||
</svg>
|
||||
<IconArrowUp size={24} className="stroke-[2]" />
|
||||
</button>
|
||||
}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,15 @@ export const VoidInputBox = ({ onChangeText, initVal, placeholder, inputBoxRef,
|
|||
}, [inputBoxRef, contextViewProvider, placeholder, multiline, initVal, onChangeText]);
|
||||
|
||||
return <div ref={containerRef} className="w-full" />;
|
||||
|
||||
// return <textarea
|
||||
// ref={chatInputRef}
|
||||
// placeholder={`Press ${getCmdKey()}+L to select.`}
|
||||
// onChange={(e) => { setInstructions(e.target.value) }}
|
||||
// className={`w-full p-2 leading-tight resize-none max-h-[50vh] overflow-auto bg-transparent border-none !outline-none`}
|
||||
// rows={1}
|
||||
// onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ import { URI } from '../../../../base/common/uri.js';
|
|||
import { Emitter, Event } from '../../../../base/common/event.js';
|
||||
import { IAutocompleteService } from './registerAutocomplete.js';
|
||||
|
||||
// if selectionStr is null, it means just send the whole file
|
||||
export type CodeSelection = {
|
||||
selectionStr: string | null;
|
||||
fileURI: URI;
|
||||
content: string;
|
||||
content: string; // TODO remove this
|
||||
}
|
||||
|
||||
// if selectionStr is null, it means to use the entire file at send time
|
||||
export type CodeStagingSelection = {
|
||||
selectionStr: string | null;
|
||||
fileURI: URI;
|
||||
|
|
|
|||
Loading…
Reference in a new issue