minor UI improvements

This commit is contained in:
Andrew Pareles 2025-03-30 20:44:06 -07:00
parent 8cc68989dd
commit e74cc15d71
3 changed files with 27 additions and 10 deletions

View file

@ -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

View file

@ -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

View file

@ -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>