From ef21223f4f7fd01d3e276f94dc48d8ebda3ffb59 Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Fri, 3 Jul 2026 19:24:57 +0100
Subject: [PATCH 1/3] chore: added empty state texts

---
 .../components/model-picker-modal.tsx         | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/try-fair/components/model-picker-modal.tsx b/frontend/src/features/try-fair/components/model-picker-modal.tsx
index 9fe02b1d..ee41fead 100644
--- a/frontend/src/features/try-fair/components/model-picker-modal.tsx
+++ b/frontend/src/features/try-fair/components/model-picker-modal.tsx
@@ -69,9 +69,8 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({
       </div>
 
       <ChevronDownIcon
-        className={`w-4 h-4 shrink-0 text-grey transition-transform ${
-          isOpen ? "rotate-180" : ""
-        }`}
+        className={`w-4 h-4 shrink-0 text-grey transition-transform ${isOpen ? "rotate-180" : ""
+          }`}
       />
     </div>
   );
@@ -127,7 +126,7 @@ export const ModelPickerContent = ({
 }) => (
   <div className="bg-white rounded-xl p-4 space-y-4 max-h-[70vh] overflow-y-auto">
     <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-      {models.map((model) => {
+      {models.length > 0 ? models.map((model) => {
         const isSelected = selectedModel?.id === model.id;
         // const tasks = model.properties["mlm:tasks"] ?? [];
         return (
@@ -135,9 +134,8 @@ export const ModelPickerContent = ({
             key={model.id}
             type="button"
             onClick={() => onSelect(model)}
-            className={`text-left p-3 bg-frosted-blue rounded-lg  transition-colors ${
-              isSelected ? "border-primary border-2" : ""
-            }`}
+            className={`text-left p-3 bg-frosted-blue rounded-lg  transition-colors ${isSelected ? "border-primary border-2" : ""
+              }`}
           >
             <div className="flex space-y-2 items-start justify-between gap-2 mb-1">
               <p className="text-dark capitalize text-sm font-bold leading-tight">
@@ -145,9 +143,8 @@ export const ModelPickerContent = ({
               </p>
 
               <span
-                className={`mt-0.5 shrink-0 w-4 h-4 rounded-full  flex items-center justify-center ${
-                  isSelected ? "border-primary border-2" : ""
-                }`}
+                className={`mt-0.5 shrink-0 w-4 h-4 rounded-full  flex items-center justify-center ${isSelected ? "border-primary border-2" : ""
+                  }`}
               >
                 {isSelected && (
                   <span className="w-2 h-2 rounded-full bg-primary" />
@@ -163,7 +160,15 @@ export const ModelPickerContent = ({
             <FeatureBadge label={model?.properties?.keywords[0] ?? ""} />
           </button>
         );
-      })}
+      }) : (
+        <div className="col-span-2 flex flex-col items-center justify-center py-10 px-4 text-center">
+
+          <p className="text-dark font-semibold text-sm mb-1">No models available</p>
+          <p className="text-grey text-xs max-w-xs">
+            There are currently no models available for use.          </p>
+        </div>
+      )
+      }
     </div>
   </div>
 );

From 7daa2679f3b4a2e79be8afdda8392d27eb714fee Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Fri, 3 Jul 2026 19:25:34 +0100
Subject: [PATCH 2/3] chore: added empty state texts

---
 .../components/model-picker-modal.tsx         | 84 ++++++++++---------
 1 file changed, 45 insertions(+), 39 deletions(-)

diff --git a/frontend/src/features/try-fair/components/model-picker-modal.tsx b/frontend/src/features/try-fair/components/model-picker-modal.tsx
index ee41fead..45f6fc43 100644
--- a/frontend/src/features/try-fair/components/model-picker-modal.tsx
+++ b/frontend/src/features/try-fair/components/model-picker-modal.tsx
@@ -69,8 +69,9 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({
       </div>
 
       <ChevronDownIcon
-        className={`w-4 h-4 shrink-0 text-grey transition-transform ${isOpen ? "rotate-180" : ""
-          }`}
+        className={`w-4 h-4 shrink-0 text-grey transition-transform ${
+          isOpen ? "rotate-180" : ""
+        }`}
       />
     </div>
   );
@@ -126,49 +127,54 @@ export const ModelPickerContent = ({
 }) => (
   <div className="bg-white rounded-xl p-4 space-y-4 max-h-[70vh] overflow-y-auto">
     <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-      {models.length > 0 ? models.map((model) => {
-        const isSelected = selectedModel?.id === model.id;
-        // const tasks = model.properties["mlm:tasks"] ?? [];
-        return (
-          <button
-            key={model.id}
-            type="button"
-            onClick={() => onSelect(model)}
-            className={`text-left p-3 bg-frosted-blue rounded-lg  transition-colors ${isSelected ? "border-primary border-2" : ""
+      {models.length > 0 ? (
+        models.map((model) => {
+          const isSelected = selectedModel?.id === model.id;
+          // const tasks = model.properties["mlm:tasks"] ?? [];
+          return (
+            <button
+              key={model.id}
+              type="button"
+              onClick={() => onSelect(model)}
+              className={`text-left p-3 bg-frosted-blue rounded-lg  transition-colors ${
+                isSelected ? "border-primary border-2" : ""
               }`}
-          >
-            <div className="flex space-y-2 items-start justify-between gap-2 mb-1">
-              <p className="text-dark capitalize text-sm font-bold leading-tight">
-                {model?.properties?.title ?? ""}
-              </p>
+            >
+              <div className="flex space-y-2 items-start justify-between gap-2 mb-1">
+                <p className="text-dark capitalize text-sm font-bold leading-tight">
+                  {model?.properties?.title ?? ""}
+                </p>
 
-              <span
-                className={`mt-0.5 shrink-0 w-4 h-4 rounded-full  flex items-center justify-center ${isSelected ? "border-primary border-2" : ""
+                <span
+                  className={`mt-0.5 shrink-0 w-4 h-4 rounded-full  flex items-center justify-center ${
+                    isSelected ? "border-primary border-2" : ""
                   }`}
-              >
-                {isSelected && (
-                  <span className="w-2 h-2 rounded-full bg-primary" />
-                )}
-              </span>
-            </div>
-            <p className="text-grey text-xs mb-0.5">
-              Model: {model?.properties?.["mlm:name"] ?? ""}
-            </p>
-            <p className="text-grey text-xs mb-2">
-              By: {model?.properties?.providers[0]?.name ?? ""}
-            </p>
-            <FeatureBadge label={model?.properties?.keywords[0] ?? ""} />
-          </button>
-        );
-      }) : (
+                >
+                  {isSelected && (
+                    <span className="w-2 h-2 rounded-full bg-primary" />
+                  )}
+                </span>
+              </div>
+              <p className="text-grey text-xs mb-0.5">
+                Model: {model?.properties?.["mlm:name"] ?? ""}
+              </p>
+              <p className="text-grey text-xs mb-2">
+                By: {model?.properties?.providers[0]?.name ?? ""}
+              </p>
+              <FeatureBadge label={model?.properties?.keywords[0] ?? ""} />
+            </button>
+          );
+        })
+      ) : (
         <div className="col-span-2 flex flex-col items-center justify-center py-10 px-4 text-center">
-
-          <p className="text-dark font-semibold text-sm mb-1">No models available</p>
+          <p className="text-dark font-semibold text-sm mb-1">
+            No models available
+          </p>
           <p className="text-grey text-xs max-w-xs">
-            There are currently no models available for use.          </p>
+            There are currently no models available for use.{" "}
+          </p>
         </div>
-      )
-      }
+      )}
     </div>
   </div>
 );

From 591218cd5ae3fe8161d3d050d01b74c26e2f5069 Mon Sep 17 00:00:00 2001
From: shittu adewale <sheriffhardewale@gmail.com>
Date: Fri, 3 Jul 2026 19:41:04 +0100
Subject: [PATCH 3/3] updated models text

---
 .../src/features/try-fair/components/model-picker-modal.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/features/try-fair/components/model-picker-modal.tsx b/frontend/src/features/try-fair/components/model-picker-modal.tsx
index 45f6fc43..ca07c25d 100644
--- a/frontend/src/features/try-fair/components/model-picker-modal.tsx
+++ b/frontend/src/features/try-fair/components/model-picker-modal.tsx
@@ -57,6 +57,8 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({
       <div className="w-full md:w-28 text-left flex-1 min-w-0">
         {loading ? (
           <p className="text-grey text-xs animate-pulse">Loading models…</p>
+        ) : models.length === 0 ? (
+          <p className="text-grey text-xs">No models available</p>
         ) : selectedModel ? (
           <>
             <p className="font-medium text-dark text-xs leading-tight">