Group vendors (disabled)

enricoros · May 7, 2024 · cc0085a · cc0085a
1 parent f28e243
commit cc0085a
Showing 1 changed file with 75 additions and 44 deletions.
diff --git a/src/modules/llms/models-modal/ModelsSourceSelector.tsx b/src/modules/llms/models-modal/ModelsSourceSelector.tsx
@@ -78,48 +78,79 @@ export function ModelsSourceSelector(props: {
 
 
   // vendor list items
-  const vendorItems = React.useMemo(() => findAllVendors()
-    .filter(v => !!v.instanceLimit)
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .map(vendor => {
-        const sourceInstanceCount = modelSources.filter(source => source.vId === vendor.id).length;
-        const enabled = vendor.instanceLimit > sourceInstanceCount;
-        const backendCaps = getBackendCapabilities();
-        return {
-          vendor,
-          enabled,
-          component: (
-            <MenuItem key={vendor.id} disabled={!enabled} onClick={() => handleAddSourceFromVendor(vendor.id)}>
-              <ListItemDecorator>
-                {vendorIcon(vendor, vendorHasBackendCap(vendor, backendCaps))}
-              </ListItemDecorator>
-              {vendor.name}
-
-              {/*{sourceInstanceCount > 0 && ` (added)`}*/}
-
-              {/* Free indication */}
-              {!!vendor.hasFreeModels && ` 🎁`}
-
-              {/* Multiple instance hint */}
-              {vendor.instanceLimit > 1 && !!sourceInstanceCount && enabled && (
-                <Typography component='span' level='body-sm'>
-                  #{sourceInstanceCount + 1}
-                  {/*/{vendor.instanceLimit}*/}
-                </Typography>
-              )}
-
-              {/* Local chip */}
-              {/*{vendor.location === 'local' && (*/}
-              {/*  <Chip variant='solid' size='sm'>*/}
-              {/*    local*/}
-              {/*  </Chip>*/}
-              {/*)}*/}
-            </MenuItem>
-          ),
-        };
-      },
-    ), [handleAddSourceFromVendor, modelSources]);
-
+  const vendorComponents = React.useMemo(() => {
+
+    // prepare the items
+    const vendorItems = findAllVendors()
+      .filter(v => !!v.instanceLimit)
+      .sort((a, b) => {
+        // sort first by 'cloud' on top (vs. 'local'), then by name
+        // if (a.location !== b.location)
+        //   return a.location === 'cloud' ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      })
+      .map(vendor => {
+          const sourceInstanceCount = modelSources.filter(source => source.vId === vendor.id).length;
+          const enabled = vendor.instanceLimit > sourceInstanceCount;
+          const backendCaps = getBackendCapabilities();
+          return {
+            vendor,
+            enabled,
+            component: (
+              <MenuItem key={vendor.id} disabled={!enabled} onClick={() => handleAddSourceFromVendor(vendor.id)}>
+                <ListItemDecorator>
+                  {vendorIcon(vendor, vendorHasBackendCap(vendor, backendCaps))}
+                </ListItemDecorator>
+                {vendor.name}
+
+                {/*{sourceInstanceCount > 0 && ` (added)`}*/}
+
+                {/* Free indication */}
+                {/*{!!vendor.hasFreeModels && ` 🎁`}*/}
+
+                {/* Multiple instance hint */}
+                {vendor.instanceLimit > 1 && !!sourceInstanceCount && enabled && (
+                  <Typography component='span' level='body-sm'>
+                    #{sourceInstanceCount + 1}
+                    {/*/{vendor.instanceLimit}*/}
+                  </Typography>
+                )}
+
+                {/* Local chip */}
+                {/*{vendor.location === 'local' && (*/}
+                {/*  <Chip variant='solid' size='sm'>*/}
+                {/*    local*/}
+                {/*  </Chip>*/}
+                {/*)}*/}
+              </MenuItem>
+            ),
+          };
+        },
+      );
+
+    // prepend headers
+    // const components: React.ReactNode[] = [];
+    // let lastLocation: 'cloud' | 'local' | null = null;
+    // vendorItems.forEach(item => {
+    //   if (item.vendor.location !== lastLocation) {
+    //     lastLocation = item.vendor.location;
+    //     components.push(
+    //       <Typography key={lastLocation} level='body-xs' sx={{
+    //         color: 'text.tertiary',
+    //         mx: 1.5,
+    //         mt: 1,
+    //         mb: 1,
+    //       }}>
+    //         {lastLocation === 'cloud' ? 'Cloud Services' : 'Local Services'}
+    //       </Typography>,
+    //     );
+    //   }
+    //   components.push(item.component);
+    // });
+    // return components;
+
+    return vendorItems.map(item => item.component);
+  }, [handleAddSourceFromVendor, modelSources]);
 
   // source items
   const sourceItems = React.useMemo(() => modelSources
@@ -186,9 +217,9 @@ export function ModelsSourceSelector(props: {
       <CloseableMenu
         placement='bottom-start' zIndex={themeZIndexOverMobileDrawer}
         open={!!vendorsMenuAnchor} anchorEl={vendorsMenuAnchor} onClose={closeVendorsMenu}
-        sx={{ minWidth: 220 }}
+        sx={{ minWidth: 200 }}
       >
-        {vendorItems.map(item => item.component)}
+        {vendorComponents}
       </CloseableMenu>
 
       {/* source delete confirmation */}