feat: add currently selected model row to popover and fix responsive truncate

Author: chriswritescode-dev

frontend/src/components/message/PromptInput.tsx

@@ -1230,10 +1230,10 @@ return (
                    directory={directory}
                    onOpenFullDialog={() => onShowModelsDialog?.()}
                  >
-                   <button
-                     className="px-2.5 py-0.5 md:px-3 min-h-[36px] rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer max-w-[90px] md:max-w-[220px] dark:border-white/30 flex flex-col items-start justify-center overflow-hidden"
-                   >
-                     <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
+<button
+                      className="px-2.5 py-0.5 md:px-3 min-h-[36px] min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer w-full md:w-auto md:max-w-[220px] dark:border-white/30 flex flex-col items-start justify-center overflow-hidden"
+                    >
+                      <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
 {hasVariants && currentVariant && (
                         <span className="text-[10px] text-orange-500 truncate w-full text-center capitalize">{currentVariant}</span>
                       )}

frontend/src/components/model/ModelQuickSelect.tsx

@@ -103,6 +103,8 @@ export function ModelQuickSelect({
     toggleFavorite(model)
   }
 
+  const currentModelDisplayName = model ? getDisplayName(model.providerID, model.modelID) : ''
+  const currentProviderName = model ? getProviderName(model.providerID) : ''
   const isCurrentFavorite = model
     ? favoriteModels.some((favorite) => favorite.providerID === model.providerID && favorite.modelID === model.modelID)
     : false
@@ -116,13 +118,23 @@ export function ModelQuickSelect({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-56">
         {model && (
-          <DropdownMenuItem
-            onClick={handleCurrentFavoriteToggle}
-            className="flex items-center justify-between"
-          >
-            <span>{isCurrentFavorite ? 'Remove from favorites' : 'Add to favorites'}</span>
-            <Star className={`h-4 w-4 ${isCurrentFavorite ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-          </DropdownMenuItem>
+          <>
+            <DropdownMenuItem className="flex items-center justify-between font-medium">
+              <span className="truncate">
+                {duplicateDisplayNames.has(currentModelDisplayName)
+                  ? `${currentProviderName}/${currentModelDisplayName}`
+                  : currentModelDisplayName}
+              </span>
+              <Check className="h-4 w-4" />
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={handleCurrentFavoriteToggle}
+              className="flex items-center justify-between"
+            >
+              <span>{isCurrentFavorite ? 'Remove from favorites' : 'Add to favorites'}</span>
+              <Star className={`h-4 w-4 ${isCurrentFavorite ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+            </DropdownMenuItem>
+          </>
         )}
 
         {hasVariants && (