From 4ea55457a53b506699f8ec6b5c0957b07c89a3ea Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Fri, 17 Apr 2026 10:47:46 +0200
Subject: [PATCH] Add model picker options and state management in App.jsx

---
 src/App.jsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index 78592c5..3927971 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -344,6 +344,20 @@ function formatRecordingDuration(milliseconds) {
   return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
 }
 
+function buildModelPickerOptions(values, currentValue, missingLabel) {
+  const uniqueValues = [...new Set((Array.isArray(values) ? values : []).filter(Boolean))]
+  const options = uniqueValues.map(value => ({ value, label: value }))
+
+  if (currentValue && !uniqueValues.includes(currentValue)) {
+    options.unshift({
+      value: currentValue,
+      label: `${currentValue} (${missingLabel})`,
+    })
+  }
+
+  return options
+}
+
 export default function App() {
   const [chatSessions, setChatSessions] = useState([])
   const [activeSessionId, setActiveSessionId] = useState(null)
@@ -367,6 +381,10 @@ export default function App() {
   const [newLibraryName, setNewLibraryName] = useState('')
   const [libraryCreateError, setLibraryCreateError] = useState('')
   const [isDbPickerOpen, setIsDbPickerOpen] = useState(false)
+  const [isChatModelPickerOpen, setIsChatModelPickerOpen] = useState(false)
+  const [availableChatModels, setAvailableChatModels] = useState([])
+  const [availableVisionModels, setAvailableVisionModels] = useState([])
+  const [isLoadingModelCatalog, setIsLoadingModelCatalog] = useState(false)
 
   // Use currentSessionId for the actual chat operations
   const [model, setModel] = useState('')
@@ -379,6 +397,7 @@ export default function App() {
   const chatRef = useRef(null)
   const textareaRef = useRef(null); // Ref for the textarea
   const dbPickerRef = useRef(null)
+  const chatModelPickerRef = useRef(null)
   const imageInputRef = useRef(null)
   const imageDragDepthRef = useRef(0)
   const [audioInputEnabled, setAudioInputEnabled] = useState(true)