Fix re-rendering triggers

sourcegraph · Jul 29, 2024 · 6f7381c · 6f7381c
1 parent e8b0abd
commit 6f7381c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git a/vscode/webviews/Chat.tsx b/vscode/webviews/Chat.tsx
@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import type React from 'react'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import type { AuthStatus, ChatMessage, CodyIDE, Guardrails } from '@sourcegraph/cody-shared'
 import { Transcript, focusLastHumanMessageEditor } from './chat/Transcript'
@@ -48,6 +48,10 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
 }) => {
     const { reload: reloadMentionProviders } = useChatContextMentionProviders()
     const telemetryRecorder = useTelemetryRecorder()
+
+    const transcriptRef = useRef(transcript)
+    transcriptRef.current = transcript
+
     const feedbackButtonsOnSubmit = useCallback(
         (text: string) => {
             enum FeedbackType {
@@ -57,7 +61,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
             telemetryRecorder.recordEvent('cody.feedback', 'submit', {
                 metadata: {
                     feedbackType: text === 'thumbsUp' ? FeedbackType.thumbsUp : FeedbackType.thumbsDown,
-                    lastChatUsedEmbeddings: transcript
+                    lastChatUsedEmbeddings: transcriptRef.current
                         .at(-1)
                         ?.contextFiles?.some(file => file.source === 'embeddings')
                         ? 1
@@ -71,12 +75,12 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
                     // V2 telemetry exports privateMetadata only for DotCom users
                     // the condition below is an aditional safegaurd measure
                     responseText: userInfo.isDotComUser
-                        ? truncateTextStart(transcript.toString(), CHAT_INPUT_TOKEN_BUDGET)
+                        ? truncateTextStart(transcriptRef.current.toString(), CHAT_INPUT_TOKEN_BUDGET)
                         : '',
                 },
             })
         },
-        [transcript, userInfo, telemetryRecorder]
+        [userInfo, telemetryRecorder]
     )
 
     const copyButtonOnSubmit = useCallback(

diff --git a/vscode/webviews/chat/Transcript.tsx b/vscode/webviews/chat/Transcript.tsx
@@ -6,6 +6,7 @@ import {
     deserializeContextItem,
     isAbortErrorOrSocketHangUp,
 } from '@sourcegraph/cody-shared'
+import isEqual from 'lodash/isEqual'
 import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import { type FC, memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import type { UserAccountInfo } from '../Chat'
@@ -63,10 +64,8 @@ export const Transcript: FC<TranscriptProps> = props => {
                     key={`${chatID}-${i}`}
                     chatID={chatID}
                     chatEnabled={chatEnabled}
-                    transcript={transcript}
                     userInfo={userInfo}
                     interaction={interaction}
-                    messageInProgress={messageInProgress}
                     guardrails={guardrails}
                     postMessage={postMessage}
                     isTranscriptError={isTranscriptError}
@@ -142,7 +141,7 @@ export function transcriptToInteractionPairs(
     return pairs
 }
 
-interface TranscriptInteractionProps extends TranscriptProps {
+interface TranscriptInteractionProps extends Omit<TranscriptProps, 'transcript' | 'messageInProgress'> {
     interaction: Interaction
     isFirstInteraction: boolean
     isLastInteraction: boolean
@@ -250,7 +249,7 @@ const TranscriptInteraction: FC<TranscriptInteractionProps> = memo(props => {
             )}
         </>
     )
-})
+}, isEqual)
 
 // TODO(sqs): Do this the React-y way.
 export function focusLastHumanMessageEditor(): void {

diff --git a/vscode/webviews/chat/cells/contextCell/ContextCell.tsx b/vscode/webviews/chat/cells/contextCell/ContextCell.tsx
@@ -2,6 +2,7 @@ import type { ContextItem, Model } from '@sourcegraph/cody-shared'
 import { pluralize } from '@sourcegraph/cody-shared'
 import { MENTION_CLASS_NAME } from '@sourcegraph/prompt-editor'
 import { clsx } from 'clsx'
+import isEqual from 'lodash/isEqual'
 import { BrainIcon, MessagesSquareIcon } from 'lucide-react'
 import { type FunctionComponent, memo } from 'react'
 import { FileLink } from '../../../components/FileLink'
@@ -156,4 +157,4 @@ export const ContextCell: FunctionComponent<{
             )}
         </Cell>
     ) : null
-})
+}, isEqual)
diff --git a/vscode/webviews/chat/cells/messageCell/assistant/AssistantMessageCell.tsx b/vscode/webviews/chat/cells/messageCell/assistant/AssistantMessageCell.tsx
@@ -9,6 +9,7 @@ import {
     reformatBotMessageForChat,
     serializedPromptEditorStateFromChatMessage,
 } from '@sourcegraph/cody-shared'
+import isEqual from 'lodash/isEqual'
 import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import { type FunctionComponent, type RefObject, memo, useMemo } from 'react'
 import type { ApiPostMessage, UserAccountInfo } from '../../../../Chat'
@@ -143,7 +144,8 @@ export const AssistantMessageCell: FunctionComponent<{
                 }
             />
         )
-    }
+    },
+    isEqual
 )
 
 export const NON_HUMAN_CELL_AVATAR_SIZE =

diff --git a/vscode/webviews/chat/cells/messageCell/human/HumanMessageCell.tsx b/vscode/webviews/chat/cells/messageCell/human/HumanMessageCell.tsx
@@ -3,6 +3,7 @@ import {
     type SerializedPromptEditorValue,
     serializedPromptEditorStateFromChatMessage,
 } from '@sourcegraph/cody-shared'
+import isEqual from 'lodash/isEqual'
 import type { PromptEditorRefAPI } from '@sourcegraph/prompt-editor'
 import { type FunctionComponent, memo, useMemo } from 'react'
 import type { UserAccountInfo } from '../../../../Chat'
@@ -96,5 +97,6 @@ export const HumanMessageCell: FunctionComponent<{
                 className={className}
             />
         )
-    }
+    },
+    isEqual
 )