fix: unconditional hook calls in ChatProfiles and FeedbackButtons

frontend/src/components/chat/Messages/Message/Buttons/FeedbackButtons.tsx

@@ -47,10 +47,6 @@ export function FeedbackButtons({ message }: FeedbackButtonsProps) {
   const firstInteraction = useRecoilValue(firstUserInteraction);
   const { idToResume } = useChatSession();
 
-  if (!showFeedbackButtons) {
-    return null;
-  }
-
   const handleFeedbackChange = useCallback(
     (newFeedback?: number, newComment?: string) => {
       if (newFeedback === undefined) {
@@ -97,6 +93,10 @@ export function FeedbackButtons({ message }: FeedbackButtonsProps) {
 
   const isDisabled = message.streaming || !(firstInteraction || idToResume);
 
+  if (!showFeedbackButtons) {
+    return null;
+  }
+
   return (
     <div className="flex items-center">
       <TooltipProvider>

frontend/src/components/header/ChatProfiles.tsx

@@ -41,29 +41,31 @@ export default function ChatProfiles({ navigate }: Props) {
   const [newChatProfile, setNewChatProfile] = useState<string | null>(null);
   const [openDialog, setOpenDialog] = useState(false);
 
-  // Early return check to prevent unnecessary renders and resource waste
-  if (!config?.chatProfiles?.length || config.chatProfiles.length <= 1) {
-    return null;
-  }
+  const profiles = config?.chatProfiles;
+  const hasMultipleProfiles = !!profiles && profiles.length > 1;
 
-  // Handle case when no profile is selected
+  // Auto-select the first profile when none is selected
   useEffect(() => {
-    if (!chatProfile) {
-      setChatProfile(config.chatProfiles[0].name);
+    if (hasMultipleProfiles && !chatProfile) {
+      setChatProfile(profiles![0].name);
     }
-  }, [chatProfile, config.chatProfiles, setChatProfile]);
+  }, [hasMultipleProfiles, chatProfile, profiles, setChatProfile]);
 
-  // Handle case when selected profile becomes invalid
+  // Reset to first profile when the current selection becomes invalid
   useEffect(() => {
-    if (chatProfile) {
-      const profileExists = config.chatProfiles.some(
+    if (hasMultipleProfiles && chatProfile) {
+      const profileExists = profiles!.some(
         (profile) => profile.name === chatProfile
       );
       if (!profileExists) {
-        setChatProfile(config.chatProfiles[0].name);
+        setChatProfile(profiles![0].name);
       }
     }
-  }, [chatProfile, config.chatProfiles, setChatProfile]);
+  }, [hasMultipleProfiles, chatProfile, profiles, setChatProfile]);
+
+  if (!hasMultipleProfiles) {
+    return null;
+  }
 
   const handleClose = () => {
     setOpenDialog(false);

frontend/tests/ChatProfiles.spec.tsx

@@ -0,0 +1,87 @@
+import { render } from '@testing-library/react';
+import { createContext } from 'react';
+import { RecoilRoot } from 'recoil';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import ChatProfiles from '@/components/header/ChatProfiles';
+
+let mockConfig: any = undefined;
+const setChatProfileMock = vi.fn();
+const clearMock = vi.fn();
+
+vi.mock('@chainlit/react-client', () => ({
+  useConfig: () => ({ config: mockConfig }),
+  useChatSession: () => ({
+    chatProfile: undefined,
+    setChatProfile: setChatProfileMock
+  }),
+  useChatMessages: () => ({ firstInteraction: undefined }),
+  useChatInteract: () => ({ clear: clearMock }),
+  ChainlitContext: createContext({ buildEndpoint: (p: string) => p })
+}));
+
+vi.mock('@/components/Markdown', () => ({
+  Markdown: ({ children }: any) => <div>{children}</div>
+}));
+
+vi.mock('@/components/header/NewChat', () => ({
+  NewChatDialog: () => null
+}));
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <RecoilRoot>{children}</RecoilRoot>
+);
+
+describe('ChatProfiles', () => {
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    mockConfig = undefined;
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('does not violate the Rules of Hooks when config is cleared between renders', () => {
+    // Reproduces the React invariant 300/310 caused by hooks placed below
+    // the early `return null`. `useConfig` clears `config` to undefined when
+    // the chat profile changes, so `config?.chatProfiles?.length` flips
+    // between truthy and falsy across consecutive renders. If any hooks live
+    // below the guard, the hook count differs between renders and React
+    // throws "Rendered fewer/more hooks than during the previous render".
+    const twoProfiles = {
+      chatProfiles: [
+        { name: 'GPT-3.5', markdown_description: 'a', icon: '' },
+        { name: 'GPT-4', markdown_description: 'b', icon: '' }
+      ],
+      features: {}
+    };
+
+    // Render 1: config populated -> dropdown renders.
+    mockConfig = twoProfiles;
+    const { rerender } = render(<ChatProfiles />, { wrapper });
+
+    // Render 2: config cleared (mirrors useConfig's setConfig(undefined)
+    // when chatProfile changes). The early-return path now activates.
+    mockConfig = undefined;
+    rerender(<ChatProfiles />);
+
+    // Render 3: config returns -> dropdown renders again.
+    mockConfig = twoProfiles;
+    rerender(<ChatProfiles />);
+
+    const hooksOrderError = consoleErrorSpy.mock.calls
+      .map((call) => String(call[0]))
+      .find(
+        (msg) =>
+          /Rendered (fewer|more) hooks than during the previous render/.test(
+            msg
+          ) || /change in the order of Hooks/.test(msg)
+      );
+
+    expect(hooksOrderError).toBeUndefined();
+  });
+});

frontend/tests/FeedbackButtons.spec.tsx

@@ -0,0 +1,93 @@
+import { MessageContext } from '@/contexts/MessageContext';
+import { render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { IStep } from '@chainlit/react-client';
+
+import { FeedbackButtons } from '@/components/chat/Messages/Message/Buttons/FeedbackButtons';
+
+import { IMessageContext } from '@/types/messageContext';
+
+vi.mock('recoil', async () => {
+  const actual = await vi.importActual<typeof import('recoil')>('recoil');
+  return {
+    ...actual,
+    useRecoilValue: () => undefined
+  };
+});
+
+vi.mock('@chainlit/react-client', () => ({
+  useChatSession: () => ({ idToResume: undefined }),
+  firstUserInteraction: { __mock: 'firstUserInteraction' }
+}));
+
+vi.mock('@/components/i18n/Translator', () => ({
+  __esModule: true,
+  useTranslation: () => ({ t: (key: string) => key }),
+  default: ({ path }: { path: string }) => <span>{path}</span>
+}));
+
+const baseContext: IMessageContext = {
+  cot: 'hidden',
+  editable: false,
+  loading: false,
+  showFeedbackButtons: true,
+  uiName: '',
+  onError: () => undefined
+};
+
+const message: IStep = {
+  id: 'step_1',
+  type: 'assistant_message',
+  name: 'Assistant',
+  output: 'hello',
+  createdAt: Date.now(),
+  streaming: false
+};
+
+describe('FeedbackButtons', () => {
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('does not violate the Rules of Hooks when showFeedbackButtons flips between renders', () => {
+    // Reproduces the React invariant 300/310 caused by hooks placed below
+    // the `if (!showFeedbackButtons) return null` guard. `showFeedbackButtons`
+    // is derived from `!!config?.dataPersistence`, so when `useConfig` clears
+    // `config` to undefined during a chat-profile switch, the guard flips.
+    // Hooks below the guard are then skipped and React detects a hook-count
+    // mismatch on the next render.
+    const tree = (ctx: IMessageContext) => (
+      <MessageContext.Provider value={ctx}>
+        <FeedbackButtons message={message} />
+      </MessageContext.Provider>
+    );
+
+    // Render 1: showFeedbackButtons=true -> buttons render, all hooks invoked.
+    const { rerender } = render(tree(baseContext));
+
+    // Render 2: showFeedbackButtons=false (mirrors config-clear flipping
+    // dataPersistence to undefined). Early-return path activates.
+    rerender(tree({ ...baseContext, showFeedbackButtons: false }));
+
+    // Render 3: showFeedbackButtons=true again -> buttons render again.
+    rerender(tree(baseContext));
+
+    const hooksOrderError = consoleErrorSpy.mock.calls
+      .map((call) => String(call[0]))
+      .find(
+        (msg) =>
+          /Rendered (fewer|more) hooks than during the previous render/.test(
+            msg
+          ) || /change in the order of Hooks/.test(msg)
+      );
+
+    expect(hooksOrderError).toBeUndefined();
+  });
+});