Add useEvent hook. Make stable references to onSubmitPrompt and feedback callbacks

Author: jahooma

cli/src/chat.tsx

@@ -32,11 +32,14 @@ import { useFeedbackStore } from './state/feedback-store'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { loadLocalAgents } from './utils/local-agent-registry'
 import { buildMessageTree } from './utils/message-tree-utils'
-import { getStatusIndicatorState, type AuthStatus } from './utils/status-indicator-state'
+import {
+  getStatusIndicatorState,
+  type AuthStatus,
+} from './utils/status-indicator-state'
 import { authQueryKeys } from './hooks/use-auth-query'
 import { RECONNECTION_MESSAGE_DURATION_MS } from '@codebuff/sdk'
 import { useQueryClient } from '@tanstack/react-query'
-import { startTransition, useTransition } from 'react'
+import { useTransition } from 'react'
 import { computeInputLayoutMetrics } from './utils/text-layout'
 import { createMarkdownPalette } from './utils/theme-system'
 
@@ -48,6 +51,8 @@ import type { FileTreeNode } from '@codebuff/common/util/file'
 import type { ScrollBoxRenderable } from '@opentui/core'
 import type { UseMutationResult } from '@tanstack/react-query'
 import type { Dispatch, SetStateAction } from 'react'
+import { useEvent } from './hooks/use-event'
+import { AgentMode } from './utils/constants'
 
 export const Chat = ({
   headerContent,
@@ -573,39 +578,41 @@ export const Chat = ({
   retryPendingMessagesRef.current = retryPendingMessages
   processFailedMessagesRef.current = processFailedMessages
 
+  const onSubmitPrompt = useEvent((content: string, mode: AgentMode) => {
+    return routeUserPrompt({
+      abortControllerRef,
+      agentMode: mode,
+      inputRef,
+      inputValue: content,
+      isChainInProgressRef,
+      isStreaming,
+      logoutMutation,
+      streamMessageIdRef,
+      addToQueue,
+      clearMessages,
+      clearQueue,
+      handleCtrlC,
+      saveToHistory,
+      scrollToLatest,
+      sendMessage,
+      setCanProcessQueue,
+      setInputFocused,
+      setInputValue,
+      setIsAuthenticated,
+      setMessages,
+      setUser,
+      stopStreaming,
+    })
+  })
+
   const { inputWidth, handleBuildFast, handleBuildMax } = useChatInput({
     inputValue,
     setInputValue,
     agentMode,
     setAgentMode,
     separatorWidth,
     initialPrompt,
-    onSubmitPrompt: (content, mode) => {
-      return routeUserPrompt({
-        abortControllerRef,
-        agentMode: mode,
-        inputRef,
-        inputValue: content,
-        isChainInProgressRef,
-        isStreaming,
-        logoutMutation,
-        streamMessageIdRef,
-        addToQueue,
-        clearMessages,
-        clearQueue,
-        handleCtrlC,
-        saveToHistory,
-        scrollToLatest,
-        sendMessage,
-        setCanProcessQueue,
-        setInputFocused,
-        setInputValue,
-        setIsAuthenticated,
-        setMessages,
-        setUser,
-        stopStreaming,
-      })
-    },
+    onSubmitPrompt,
   })
 
   const {
@@ -779,7 +786,6 @@ export const Chat = ({
     [messages],
   )
 
-
   const hasSlashSuggestions =
     slashContext.active && slashSuggestionItems.length > 0
   const hasMentionSuggestions =

cli/src/components/message-block.tsx

@@ -1,14 +1,13 @@
 import { TextAttributes } from '@opentui/core'
 import { pluralize } from '@codebuff/common/util/string'
-import React, { memo, useCallback, type ReactNode } from 'react'
+import React, { memo, useCallback, useMemo, type ReactNode } from 'react'
 
 import { AgentBranchItem } from './agent-branch-item'
 import { ElapsedTimer } from './elapsed-timer'
 import { FeedbackIconButton } from './feedback-icon-button'
 import { useTheme } from '../hooks/use-theme'
 import { useWhyDidYouUpdateById } from '../hooks/use-why-did-you-update'
 import { isTextBlock, isToolBlock } from '../types/chat'
-import { logger } from '../utils/logger'
 import { type MarkdownPalette } from '../utils/markdown-renderer'
 import {
   useFeedbackStore,
@@ -86,22 +85,37 @@ export const MessageBlock = memo((props: MessageBlockProps): ReactNode => {
   })
 
   const theme = useTheme()
-  const isFeedbackOpen = useFeedbackStore(selectIsFeedbackOpenForMessage(messageId))
-  const hasSubmittedFeedback = useFeedbackStore(selectHasSubmittedFeedback(messageId))
-  const selectedFeedbackCategory = useFeedbackStore(selectMessageFeedbackCategory(messageId))
+  
+  // Memoize selectors to prevent new function references on every render
+  const selectIsFeedbackOpenMemo = useMemo(
+    () => selectIsFeedbackOpenForMessage(messageId),
+    [messageId],
+  )
+  const selectHasSubmittedFeedbackMemo = useMemo(
+    () => selectHasSubmittedFeedback(messageId),
+    [messageId],
+  )
+  const selectMessageFeedbackCategoryMemo = useMemo(
+    () => selectMessageFeedbackCategory(messageId),
+    [messageId],
+  )
+  
+  const isFeedbackOpen = useFeedbackStore(selectIsFeedbackOpenMemo)
+  const hasSubmittedFeedback = useFeedbackStore(selectHasSubmittedFeedbackMemo)
+  const selectedFeedbackCategory = useFeedbackStore(selectMessageFeedbackCategoryMemo)
 
   const resolvedTextColor = textColor ?? theme.foreground
   const shouldShowLoadingTimer = isAi && isLoading && !isComplete
   const shouldShowCompletionFooter = isAi && isComplete
-  const canRequestFeedback =
-    shouldShowCompletionFooter && !hasSubmittedFeedback
+  const canRequestFeedback = shouldShowCompletionFooter && !hasSubmittedFeedback
   const isGoodOrBadSelection =
     selectedFeedbackCategory === 'good_result' ||
     selectedFeedbackCategory === 'bad_result'
   const shouldShowSubmittedFeedbackState =
     shouldShowCompletionFooter && hasSubmittedFeedback && isGoodOrBadSelection
   const shouldRenderFeedbackButton =
-    Boolean(onFeedback) && (canRequestFeedback || shouldShowSubmittedFeedbackState)
+    Boolean(onFeedback) &&
+    (canRequestFeedback || shouldShowSubmittedFeedbackState)
 
   const handleFeedbackOpen = useCallback(() => {
     if (!canRequestFeedback || !onFeedback) return

cli/src/hooks/use-event.ts

@@ -0,0 +1,34 @@
+import { useCallback, useRef } from 'react'
+
+/**
+ * Returns a stable function reference that always calls the latest version of the provided callback.
+ * Similar to React's proposed useEvent RFC.
+ *
+ * The returned function has a stable identity across renders, but always calls the most recent
+ * version of the callback you pass in. This is useful for event handlers and callbacks that
+ * need to access the latest props/state without causing re-renders of child components.
+ *
+ * @param callback - The function to wrap
+ * @returns A stable function reference that calls the latest version of the callback
+ *
+ * @example
+ * const handleClick = useEvent(() => {
+ *   console.log(count) // Always logs the latest count
+ * })
+ *
+ * // handleClick has a stable reference, so it won't cause child re-renders
+ * <ChildComponent onClick={handleClick} />
+ */
+export function useEvent<T extends (...args: any[]) => any>(callback: T): T {
+  const callbackRef = useRef<T>(callback)
+
+  // Update the ref to the latest callback on every render
+  // This ensures the ref is always in sync with the current render
+  callbackRef.current = callback
+
+  // Return a stable function that calls the latest callback
+  return useCallback(
+    ((...args: any[]) => callbackRef.current(...args)) as T,
+    [], // Empty deps array ensures the function identity is stable
+  )
+}