Avoid rerender ChatConversation when edit chat config (#2573)

LAION-AI · Apr 16, 2023 · 9c05c60 · 9c05c60
1 parent b4895f4
commit 9c05c60
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/website/src/components/Chat/ChatConversation.tsx b/website/src/components/Chat/ChatConversation.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Flex, useBoolean, useToast } from "@chakra-ui/react";
-import router from "next/router";
 import { memo, useCallback, useRef, useState } from "react";
-import { useFormContext } from "react-hook-form";
+import { UseFormGetValues } from "react-hook-form";
 import { useMessageVote } from "src/hooks/chat/useMessageVote";
 import { get, post } from "src/lib/api";
 import { handleChatEventStream, QueueInfo } from "src/lib/chat_stream";
@@ -22,21 +21,20 @@ import { ChatMessageEntryProps, EditPromptParams, PendingMessageEntry } from "./
 
 interface ChatConversationProps {
   chatId: string;
+  getConfigValues: UseFormGetValues<ChatConfigFormData>;
 }
 
-export const ChatConversation = memo(function ChatConversation({ chatId }: ChatConversationProps) {
+export const ChatConversation = memo(function ChatConversation({ chatId, getConfigValues }: ChatConversationProps) {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [messages, setMessages] = useState<InferenceMessage[]>(useChatContext().messages);
 
   const [streamedResponse, setResponse] = useState<string | null>(null);
   const [queueInfo, setQueueInfo] = useState<QueueInfo | null>(null);
   const [isSending, setIsSending] = useBoolean();
 
-  const { getValues: getFormValues } = useFormContext<ChatConfigFormData>();
-
   const createAndFetchAssistantMessage = useCallback(
     async ({ parentId, chatId }: { parentId: string; chatId: string }) => {
-      const { model_config_name, ...sampling_parameters } = getFormValues();
+      const { model_config_name, ...sampling_parameters } = getConfigValues();
       const assistant_arg: InferencePostAssistantMessageParams = {
         chat_id: chatId,
         parent_id: parentId,
@@ -75,7 +73,7 @@ export const ChatConversation = memo(function ChatConversation({ chatId }: ChatC
       setResponse(null);
       setIsSending.off();
     },
-    [getFormValues, setIsSending]
+    [getConfigValues, setIsSending]
   );
   const toast = useToast();
   const sendPrompterMessage = useCallback(async () => {

diff --git a/website/src/components/Chat/ChatSection.tsx b/website/src/components/Chat/ChatSection.tsx
@@ -35,7 +35,7 @@ export const ChatSection = ({ chatId }: { chatId: string | null }) => {
     <FormProvider {...form}>
       <Card className="mx-auto" maxW={{ base: "min(64rem, 90vw)", lg: "36rem", xl: "3xl", "2xl": "5xl" }}>
         <CardBody display="flex" flexDirection="column" gap="2">
-          <ChatConversation chatId={chatId} key={chatId} />
+          <ChatConversation chatId={chatId} key={chatId} getConfigValues={form.getValues} />
           <ChatConfigSummary />
           <Divider />
           <InferencePoweredBy />