mirror of https://github.com/buster-so/buster.git
Add stable selectors
This commit is contained in:
parent
8911e7954f
commit
0d20155b97
|
@ -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">
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue