feat: auto-open model selector if user selects deprecated model (#427)

https://github.com/user-attachments/assets/d254dff6-f1f9-4492-9dfd-d185c38d3a75

codex-cli/src/components/chat/terminal-chat-response-item.tsx

@@ -1,3 +1,4 @@
+import type { OverlayModeType } from "./terminal-chat";
 import type { TerminalRendererOptions } from "marked-terminal";
 import type {
   ResponseFunctionToolCallItem,
@@ -14,18 +15,25 @@ import chalk, { type ForegroundColorName } from "chalk";
 import { Box, Text } from "ink";
 import { parse, setOptions } from "marked";
 import TerminalRenderer from "marked-terminal";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 
 export default function TerminalChatResponseItem({
   item,
   fullStdout = false,
+  setOverlayMode,
 }: {
   item: ResponseItem;
   fullStdout?: boolean;
+  setOverlayMode?: React.Dispatch<React.SetStateAction<OverlayModeType>>;
 }): React.ReactElement {
   switch (item.type) {
     case "message":
-      return <TerminalChatResponseMessage message={item} />;
+      return (
+        <TerminalChatResponseMessage
+          setOverlayMode={setOverlayMode}
+          message={item}
+        />
+      );
     case "function_call":
       return <TerminalChatResponseToolCall message={item} />;
     case "function_call_output":
@@ -98,9 +106,23 @@ const colorsByRole: Record<string, ForegroundColorName> = {
 
 function TerminalChatResponseMessage({
   message,
+  setOverlayMode,
 }: {
   message: ResponseInputMessageItem | ResponseOutputMessage;
+  setOverlayMode?: React.Dispatch<React.SetStateAction<OverlayModeType>>;
 }) {
+  // auto switch to model mode if the system message contains "has been deprecated"
+  useEffect(() => {
+    if (message.role === "system") {
+      const systemMessage = message.content.find(
+        (c) => c.type === "input_text",
+      )?.text;
+      if (systemMessage?.includes("has been deprecated")) {
+        setOverlayMode?.("model");
+      }
+    }
+  }, [message, setOverlayMode]);
+
   return (
     <Box flexDirection="column">
       <Text bold color={colorsByRole[message.role] || "gray"}>