feat(Inputbar): cache mentioned models state between renders (#10197)

Use a ref to track mentioned models state and cache it in a module-level variable when component unmounts to preserve state between renders

Author: EurFelux

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -71,6 +71,7 @@ interface Props {
 
 let _text = ''
 let _files: FileType[] = []
+let _mentionedModelsCache: Model[] = []
 
 const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) => {
   const [text, setText] = useState(_text)
@@ -103,7 +104,8 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
   const spaceClickTimer = useRef<NodeJS.Timeout>(null)
   const [isTranslating, setIsTranslating] = useState(false)
   const [selectedKnowledgeBases, setSelectedKnowledgeBases] = useState<KnowledgeBase[]>([])
-  const [mentionedModels, setMentionedModels] = useState<Model[]>([])
+  const [mentionedModels, setMentionedModels] = useState<Model[]>(_mentionedModelsCache)
+  const mentionedModelsRef = useRef(mentionedModels)
   const [isDragging, setIsDragging] = useState(false)
   const [isFileDragging, setIsFileDragging] = useState(false)
   const [textareaHeight, setTextareaHeight] = useState<number>()
@@ -114,6 +116,10 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
   const isGenerateImageAssistant = useMemo(() => isGenerateImageModel(model), [model])
   const { setTimeoutTimer } = useTimer()
 
+  useEffect(() => {
+    mentionedModelsRef.current = mentionedModels
+  }, [mentionedModels])
+
   const isVisionSupported = useMemo(
     () =>
       (mentionedModels.length > 0 && isVisionModels(mentionedModels)) ||
@@ -179,6 +185,13 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
   _text = text
   _files = files
 
+  useEffect(() => {
+    // 利用useEffect清理函数在卸载组件时更新状态缓存
+    return () => {
+      _mentionedModelsCache = mentionedModelsRef.current
+    }
+  }, [])
+
   const focusTextarea = useCallback(() => {
     textareaRef.current?.focus()
   }, [])