+
{/*
{
const tabs = ['chat', 'settings', 'threadSelector']
@@ -27,21 +33,32 @@ const Sidebar = () => {
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 fb289f375..6ac2126cb 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
@@ -1,25 +1,89 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Glass Devtools, Inc. All rights reserved.
- * Void Editor additions licensed under the AGPLv3 License.
+ * Void Editor additions licensed under the AGPL 3.0 License.
*--------------------------------------------------------------------------------------------*/
+
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 { CodeSelection, CodeStagingSelection } from '../../../registerThreads.js';
+import { userInstructionsStr } from '../../../prompt/stringifySelections.js';
+import { ChatMessage, CodeSelection, CodeStagingSelection } from '../../../registerThreads.js';
import { BlockCode } from '../markdown/BlockCode.js';
-import { MarkdownRender } from '../markdown/MarkdownRender.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';
-import { ErrorDisplay } from '../util/ErrorDisplay.js';
-import { LLMMessageServiceParams } from '../../../../../../../platform/void/common/llmMessageTypes.js';
+import { ErrorDisplay } from './ErrorDisplay.js';
+import { OnError, ServiceSendLLMMessageParams } from '../../../../../../../platform/void/common/llmMessageTypes.js';
+import { getCmdKey } from '../../../getCmdKey.js'
+import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
+import { VoidInputBox } from './inputs.js';
+
+
+const IconX = ({ size, className = '' }: { size: number, className?: string }) => {
+ return (
+
+ );
+};
+
+
+const IconArrowUp = ({ size, className = '' }: { size: number, className?: string }) => {
+ return (
+
+
+ );
+};
+
+
+const IconSquare = ({ size, className = '' }: { size: number, className?: string }) => {
+ return (
+
+ );
+};
-// import { } from '@vscode/webview-ui-toolkit/react';
// read files from VSCode
const VSReadFile = async (modelService: IModelService, uri: URI): Promise
=> {
@@ -29,27 +93,6 @@ const VSReadFile = async (modelService: IModelService, uri: URI): Promise {
// 'unixify' path
pathStr = pathStr.replace(/[/\\]+/g, '/') // replace any / or \ or \\ with /
@@ -62,63 +105,84 @@ 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 && (
-
+
{selections.map((selection, i) => (
-
-
- {/* selection text */}
- {type === 'staging' && selection.selectionStr && {
- 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
- )} />}
+
+
+ }
+
+ {/* selection full text */}
+ {type === 'staging' && selection.selectionStr && selectionIsOpened[i] &&
+
{ // 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
+ // )}
+ />
+ }
- ))}
+ ))
+ }
@@ -144,7 +208,7 @@ const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
export const SidebarChat = () => {
- const chatInputRef = useRef
(null)
+ const inputBoxRef: React.MutableRefObject = useRef(null);
const modelService = useService('modelService')
@@ -154,36 +218,37 @@ export const SidebarChat = () => {
useEffect(() => {
const disposables: IDisposable[] = []
disposables.push(
- sidebarStateService.onDidFocusChat(() => { chatInputRef.current?.focus() }),
- sidebarStateService.onDidBlurChat(() => { chatInputRef.current?.blur() })
+ sidebarStateService.onDidFocusChat(() => { inputBoxRef.current?.focus() }),
+ sidebarStateService.onDidBlurChat(() => { inputBoxRef.current?.blur() })
)
return () => disposables.forEach(d => d.dispose())
- }, [sidebarStateService, chatInputRef])
+ }, [sidebarStateService, inputBoxRef])
// config state
- const configState = useConfigState()
- const { voidConfig } = configState
+ const voidConfigState = useConfigState()
// threads state
const threadsState = useThreadsState()
const threadsStateService = useService('threadsStateService')
// ----- SIDEBAR CHAT state (local) -----
- // state of current message
- const [instructions, setInstructions] = useState('') // the user's instructions
// state of chat
- const [messageStream, setMessageStream] = useState('')
+ const [messageStream, setMessageStream] = useState(null)
const [isLoading, setIsLoading] = useState(false)
const latestRequestIdRef = useRef(null)
- const [latestError, setLatestError] = useState(null)
+ const [latestError, setLatestError] = useState[0] | null>(null)
- const sendLLMMessageService = useService('sendLLMMessageService')
+ const llmMessageService = useService('llmMessageService')
+ // state of current message
+ const [instructions, setInstructions] = useState('') // the user's instructions
+ const onChangeText = useCallback((newStr: string) => { setInstructions(newStr) }, [setInstructions])
const isDisabled = !instructions
-
const formRef = useRef(null)
+
+
const onSubmit = async (e: FormEvent) => {
e.preventDefault()
@@ -191,76 +256,91 @@ 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)
- const userContent = userInstructionsStr(instructions, selections)
- const newHistoryElt: ChatMessage = { role: 'user', content: userContent, displayContent: instructions, selections }
- threadsStateService.addMessageToCurrentThread(newHistoryElt)
+ // add user's message to chat history
+ 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
-
// send message to LLM
+ setIsLoading(true) // must come before message is sent so onError will work
+ setLatestError(null)
+ if (inputBoxRef.current) {
+ inputBoxRef.current.value = ''; // this triggers onDidChangeText
+ inputBoxRef.current.blur();
+ }
- const object: LLMMessageServiceParams = {
+ const object: ServiceSendLLMMessageParams = {
logging: { loggingName: 'Chat' },
- messages: [...(currentThread?.messages ?? []).map(m => ({ role: m.role, content: m.content })),],
+ messages: [...(currentThread?.messages ?? []).map(m => ({ role: m.role, content: m.content || '(null)' })),],
onText: ({ newText, fullText }) => setMessageStream(fullText),
onFinalMessage: ({ fullText: content }) => {
console.log('chat: running final message')
// add assistant's message to chat history, and clear selection
- const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content }
- threadsStateService.addMessageToCurrentThread(newHistoryElt)
- setMessageStream('')
+ const assistantHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content || null }
+ threadsStateService.addMessageToCurrentThread(assistantHistoryElt)
+ setMessageStream(null)
setIsLoading(false)
},
- onError: ({ error }) => {
- console.log('chat: running error', error)
+ onError: ({ message, fullError }) => {
+ console.log('chat: running error', message, fullError)
// add assistant's message to chat history, and clear selection
- let content = messageStream; // just use the current content
- const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
- threadsStateService.addMessageToCurrentThread(newHistoryElt)
+ let content = messageStream ?? ''; // just use the current content
+ const assistantHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content || null, }
+ threadsStateService.addMessageToCurrentThread(assistantHistoryElt)
setMessageStream('')
setIsLoading(false)
- setLatestError(error)
+ setLatestError({ message, fullError })
},
- voidConfig,
+ featureName: 'Ctrl+L',
+
}
- const latestRequestId = sendLLMMessageService.sendLLMMessage(object)
+ const latestRequestId = llmMessageService.sendLLMMessage(object)
latestRequestIdRef.current = latestRequestId
-
- setIsLoading(true)
- setInstructions('');
- formRef.current?.reset(); // reset the form's text when clear instructions or unexpected behavior happens
threadsStateService.setStaging([]) // clear staging
- setLatestError(null)
}
const onAbort = () => {
- // abort the LLM
+ // abort the LLM call
if (latestRequestIdRef.current)
- sendLLMMessageService.abort(latestRequestIdRef.current)
+ llmMessageService.abort(latestRequestIdRef.current)
// if messageStream was not empty, add it to the history
- const llmContent = messageStream || '(null)'
- const newHistoryElt: ChatMessage = { role: 'assistant', content: llmContent, displayContent: messageStream, }
- threadsStateService.addMessageToCurrentThread(newHistoryElt)
+ const llmContent = messageStream ?? ''
+ const assistantHistoryElt: ChatMessage = { role: 'assistant', content: llmContent, displayContent: messageStream || null, }
+ threadsStateService.addMessageToCurrentThread(assistantHistoryElt)
setMessageStream('')
setIsLoading(false)
@@ -278,77 +358,84 @@ export const SidebarChat = () => {
{currentThread !== null && currentThread?.messages.map((message, i) =>
)}
+
{/* message stream */}
-
+
- {/* selection */}
-
-
-
- {/* selections */}
- {(selections && selections.length !== 0) &&
-
-
}
-
-