mirror of
https://github.com/voideditor/void
synced 2026-05-23 09:28:23 +00:00
minor UI improvements
This commit is contained in:
parent
8cc68989dd
commit
e74cc15d71
3 changed files with 27 additions and 10 deletions
|
|
@ -412,17 +412,20 @@ export const ButtonStop = ({ className, ...props }: ButtonHTMLAttributes<HTMLBut
|
|||
}
|
||||
|
||||
|
||||
|
||||
const scrollToBottom = (divRef: { current: HTMLElement | null }) => {
|
||||
if (divRef.current) {
|
||||
divRef.current.scrollTop = divRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const ScrollToBottomContainer = ({ children, className, style, scrollContainerRef }: { children: React.ReactNode, className?: string, style?: React.CSSProperties, scrollContainerRef: React.MutableRefObject<HTMLDivElement | null> }) => {
|
||||
const [isAtBottom, setIsAtBottom] = useState(true); // Start at bottom
|
||||
|
||||
const divRef = scrollContainerRef
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (divRef.current) {
|
||||
divRef.current.scrollTop = divRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
const onScroll = () => {
|
||||
const div = divRef.current;
|
||||
if (!div) return;
|
||||
|
|
@ -437,13 +440,13 @@ const ScrollToBottomContainer = ({ children, className, style, scrollContainerRe
|
|||
// When children change (new messages added)
|
||||
useEffect(() => {
|
||||
if (isAtBottom) {
|
||||
scrollToBottom();
|
||||
scrollToBottom(divRef);
|
||||
}
|
||||
}, [children, isAtBottom]); // Dependency on children to detect new messages
|
||||
|
||||
// Initial scroll to bottom
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
scrollToBottom(divRef);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -806,7 +809,7 @@ const SimplifiedToolHeader = ({
|
|||
|
||||
|
||||
|
||||
const UserMessageComponent = ({ chatMessage, messageIdx, isCommitted }: { chatMessage: ChatMessage & { role: 'user' }, messageIdx: number, isCommitted: boolean, }) => {
|
||||
const UserMessageComponent = ({ chatMessage, messageIdx, isCommitted, _scrollToBottom }: { chatMessage: ChatMessage & { role: 'user' }, messageIdx: number, isCommitted: boolean, _scrollToBottom: (() => void) | null }) => {
|
||||
|
||||
const accessor = useAccessor()
|
||||
const chatThreadsService = accessor.get('IChatThreadService')
|
||||
|
|
@ -907,6 +910,7 @@ const UserMessageComponent = ({ chatMessage, messageIdx, isCommitted }: { chatMe
|
|||
console.error('Error while editing message:', e)
|
||||
}
|
||||
sidebarStateService.fireFocusChat()
|
||||
requestAnimationFrame(() => _scrollToBottom?.())
|
||||
}
|
||||
|
||||
const onAbort = () => {
|
||||
|
|
@ -1816,9 +1820,10 @@ type ChatBubbleProps = {
|
|||
chatIsRunning: IsRunningType,
|
||||
threadId: string,
|
||||
isToolBeingWritten: boolean,
|
||||
_scrollToBottom: (() => void) | null,
|
||||
}
|
||||
|
||||
const ChatBubble = ({ chatMessage, isCommitted, messageIdx, isLast, chatIsRunning, threadId, isToolBeingWritten }: ChatBubbleProps) => {
|
||||
const ChatBubble = ({ chatMessage, isCommitted, messageIdx, isLast, chatIsRunning, threadId, isToolBeingWritten, _scrollToBottom }: ChatBubbleProps) => {
|
||||
const role = chatMessage.role
|
||||
|
||||
if (role === 'user') {
|
||||
|
|
@ -1826,6 +1831,7 @@ const ChatBubble = ({ chatMessage, isCommitted, messageIdx, isLast, chatIsRunnin
|
|||
chatMessage={chatMessage}
|
||||
messageIdx={messageIdx}
|
||||
isCommitted={isCommitted}
|
||||
_scrollToBottom={_scrollToBottom}
|
||||
/>
|
||||
}
|
||||
else if (role === 'assistant') {
|
||||
|
|
@ -1999,6 +2005,7 @@ export const SidebarChat = () => {
|
|||
isLast={isLast}
|
||||
threadId={threadId}
|
||||
isToolBeingWritten={toolIsLoading}
|
||||
_scrollToBottom={() => scrollToBottom(scrollContainerRef)}
|
||||
/>
|
||||
})
|
||||
}, [previousMessages, isRunning, currentThread, numMessages])
|
||||
|
|
@ -2019,6 +2026,7 @@ export const SidebarChat = () => {
|
|||
isLast={true}
|
||||
threadId={threadId}
|
||||
isToolBeingWritten={toolIsLoading}
|
||||
_scrollToBottom={null}
|
||||
/> : null
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ import { ILanguageService } from '../../../../../../../editor/common/languages/l
|
|||
import { IVoidModelService } from '../../../../common/voidModelService.js'
|
||||
import { IWorkspaceContextService } from '../../../../../../../platform/workspace/common/workspace.js'
|
||||
import { IVoidCommandBarService } from '../../../voidCommandBarService.js'
|
||||
import { INativeHostService } from '../../../../../../../platform/native/common/native.js';
|
||||
|
||||
|
||||
// normally to do this you'd use a useEffect that calls .onDidChangeState(), but useEffect mounts too late and misses initial state changes
|
||||
|
|
@ -213,6 +214,7 @@ const getReactAccessor = (accessor: ServicesAccessor) => {
|
|||
IWorkspaceContextService: accessor.get(IWorkspaceContextService),
|
||||
|
||||
IVoidCommandBarService: accessor.get(IVoidCommandBarService),
|
||||
INativeHostService: accessor.get(INativeHostService),
|
||||
|
||||
} as const
|
||||
return reactAccessor
|
||||
|
|
|
|||
|
|
@ -665,6 +665,8 @@ const OneClickSwitchButton = () => {
|
|||
const GeneralTab = () => {
|
||||
const accessor = useAccessor()
|
||||
const commandService = accessor.get('ICommandService')
|
||||
const environmentService = accessor.get('IEnvironmentService')
|
||||
const nativeHostService = accessor.get('INativeHostService')
|
||||
|
||||
return <>
|
||||
|
||||
|
|
@ -696,6 +698,11 @@ const GeneralTab = () => {
|
|||
Theme Settings
|
||||
</VoidButton>
|
||||
</div>
|
||||
<div className='my-4'>
|
||||
<VoidButton onClick={() => { nativeHostService.showItemInFolder(environmentService.logsHome.fsPath) }}>
|
||||
Open Logs
|
||||
</VoidButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue