fix: improve desktop chat performance

This commit is contained in:
Simos Mikelatos
2026-06-24 20:49:24 +00:00
parent fe116a7138
commit 8ad18f8587
11 changed files with 153 additions and 28 deletions

View File

@@ -1,4 +1,5 @@
import { useTranslation } from 'react-i18next';
import { useMemo } from 'react';
import type {
ChangeEvent,
ClipboardEvent,
@@ -154,12 +155,17 @@ export default function ChatComposer({
sendByCtrlEnter,
}: ChatComposerProps) {
const { t } = useTranslation('chat');
const textareaRect = textareaRef.current?.getBoundingClientRect();
const commandMenuPosition = {
top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
left: textareaRect ? textareaRect.left : 16,
bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
};
const commandMenuPosition = useMemo(() => {
if (!isCommandMenuOpen) {
return { top: 0, left: 16, bottom: 90 };
}
const textareaRect = textareaRef.current?.getBoundingClientRect();
return {
top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
left: textareaRect ? textareaRect.left : 16,
bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
};
}, [input, isCommandMenuOpen, textareaRef]);
// Detect if the AskUserQuestion interactive panel is active
const hasQuestionPanel = pendingPermissionRequests.some(
@@ -170,7 +176,7 @@ export default function ChatComposer({
const hasPendingPermissions = pendingPermissionRequests.length > 0;
return (
<div className="flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
<div className="chat-composer-shell flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
{!hasPendingPermissions && (
<ActivityIndicator activity={activity} onAbort={onAbortSession} />
)}

View File

@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
import { useCallback, useMemo, useRef } from 'react';
import { memo, useCallback, useMemo, useRef } from 'react';
import type { Dispatch, RefObject, SetStateAction } from 'react';
import type { ChatMessage } from '../../types/types';
@@ -67,7 +67,7 @@ interface ChatMessagesPaneProps {
selectedProject: Project;
}
export default function ChatMessagesPane({
function ChatMessagesPane({
scrollContainerRef,
onWheel,
onTouchMove,
@@ -151,7 +151,7 @@ export default function ChatMessagesPane({
ref={scrollContainerRef}
onWheel={onWheel}
onTouchMove={onTouchMove}
className="relative flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
className="chat-messages-pane relative min-h-0 flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
>
{(isLoadingSessionMessages || isProcessing) && chatMessages.length === 0 ? (
<div className="mt-8 text-center text-gray-500 dark:text-gray-400">
@@ -308,3 +308,5 @@ export default function ChatMessagesPane({
</div>
);
}
export default memo(ChatMessagesPane);