Add stable selectors

This commit is contained in:
Nate Kelley 2025-08-08 18:23:29 -06:00
parent 8911e7954f
commit 0d20155b97
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 14 additions and 14 deletions

View File

@ -4,17 +4,20 @@ import React, { useRef } from 'react';
import { useMount } from '@/hooks';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import { cn } from '@/lib/utils';
import { useChatIndividualContextSelector } from '../../ChatContext';
import { useChatIndividualContextSelector, type ChatIndividualState } from '../../ChatContext';
import { ChatInput } from './ChatInput';
import { ChatMessageBlock } from './ChatMessageBlock';
import { ChatScrollToBottom } from './ChatScrollToBottom';
import { CHAT_CONTAINER_ID } from '../ChatContainer';
import { ChatScrollToBottom } from './ChatScrollToBottom';
const autoClass = 'mx-auto max-w-[600px] w-full';
const stableChatIdSelector = (state: ChatIndividualState) => state.chatId;
const stableChatMessageIdsSelector = (state: ChatIndividualState) => state.chatMessageIds;
export const ChatContent: React.FC = React.memo(() => {
const chatId = useChatIndividualContextSelector((state) => state.chatId);
const chatMessageIds = useChatIndividualContextSelector((state) => state.chatMessageIds);
const chatId = useChatIndividualContextSelector(stableChatIdSelector);
const chatMessageIds = useChatIndividualContextSelector(stableChatMessageIdsSelector);
const containerRef = useRef<HTMLElement | null>(null);
const { isAutoScrollEnabled, scrollToBottom, enableAutoScroll } = useAutoScroll(containerRef, {
@ -31,8 +34,6 @@ export const ChatContent: React.FC = React.memo(() => {
enableAutoScroll();
});
console.log('hit chat content');
return (
<>
<div className="mb-48 flex h-full w-full flex-col">

View File

@ -1,5 +1,5 @@
import { useQueries, useQuery } from '@tanstack/react-query';
import React, { useMemo, type PropsWithChildren } from 'react';
import { useQueries } from '@tanstack/react-query';
import React, { type PropsWithChildren } from 'react';
import { createContext, useContextSelector } from 'use-context-selector';
import type { BusterChatMessage } from '@/api/asset_interfaces/chat';
import { useGetChat } from '@/api/buster_rest/chats';
@ -82,9 +82,9 @@ const useChatIndividualContext = ({
};
};
const IndividualChatContext = createContext<ReturnType<typeof useChatIndividualContext>>(
{} as ReturnType<typeof useChatIndividualContext>
);
export type ChatIndividualState = ReturnType<typeof useChatIndividualContext>;
const IndividualChatContext = createContext<ChatIndividualState>({} as ChatIndividualState);
export const ChatContextProvider = ({ children }: PropsWithChildren) => {
const chatId = useChatLayoutContextSelector((x) => x.chatId);
@ -104,6 +104,5 @@ export const ChatContextProvider = ({ children }: PropsWithChildren) => {
ChatContextProvider.displayName = 'ChatContextProvider';
export const useChatIndividualContextSelector = <T,>(
selector: (state: ReturnType<typeof useChatIndividualContext>) => T
) => useContextSelector(IndividualChatContext, selector);
export const useChatIndividualContextSelector = <T,>(selector: (state: ChatIndividualState) => T) =>
useContextSelector(IndividualChatContext, selector);