🪶 refactor: Chat Input Focus for Conversation Navigations & ChatForm Optimizations (#7100)

* refactor: improve ChatView layout by keeping ChatForm mounted

* feat: implement focusChat functionality for new conversations and navigations

* refactor: reset artifacts when navigating to prevent any from rendering in a conversation when none exist; edge case, artifacts get created by search route (TODO: use a different artifact renderer for Search markdown)
This commit is contained in:
Danny Avila 2025-04-27 18:28:28 -04:00 committed by GitHub
parent 6826c0ed43
commit fc30482f65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 68 additions and 41 deletions

View file

@ -15,6 +15,7 @@ import {
useHandleKeyUp,
useQueryParams,
useSubmitMessage,
useFocusChatEffect,
} from '~/hooks';
import { mainTextareaId, BadgeItem } from '~/common';
import AttachFileChat from './Files/AttachFileChat';
@ -36,6 +37,7 @@ import store from '~/store';
const ChatForm = memo(({ index = 0 }: { index?: number }) => {
const submitButtonRef = useRef<HTMLButtonElement>(null);
const textAreaRef = useRef<HTMLTextAreaElement>(null);
useFocusChatEffect(textAreaRef);
const [isCollapsed, setIsCollapsed] = useState(false);
const [, setIsScrollable] = useState(false);
@ -43,7 +45,6 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
const [backupBadges, setBackupBadges] = useState<Pick<BadgeItem, 'id'>[]>([]);
const search = useRecoilValue(store.search);
const SpeechToText = useRecoilValue(store.speechToText);
const TextToSpeech = useRecoilValue(store.textToSpeech);
const chatDirection = useRecoilValue(store.chatDirection);