feat: set the default muxing rule as catch all

Author: peppescg

src/components/SortableArea.tsx

@@ -22,26 +22,34 @@ type Props<T> = {
   children: (item: T, index: number) => React.ReactNode;
   setItems: (items: T[]) => void;
   items: T[];
+  disableDragByIndex?: number;
 };
 
 function ItemWrapper({
   children,
   id,
+  disabledDrag,
 }: {
   children: React.ReactNode;
   id: UniqueIdentifier;
+  disabledDrag: boolean;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id });
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
   };
+
   return (
     <div style={style} className="flex items-center w-full">
-      <div ref={setNodeRef} {...attributes} {...listeners} className="size-8">
-        <Drag />
-      </div>
+      {disabledDrag ? (
+        <div className="size-8" />
+      ) : (
+        <div ref={setNodeRef} {...attributes} {...listeners} className="size-8">
+          <Drag />
+        </div>
+      )}
       <div className="grow">{children}</div>
     </div>
   );
@@ -51,6 +59,7 @@ export function SortableArea<T extends { id: UniqueIdentifier }>({
   children,
   setItems,
   items,
+  disableDragByIndex,
 }: Props<T>) {
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -82,7 +91,11 @@ export function SortableArea<T extends { id: UniqueIdentifier }>({
     >
       <SortableContext items={items} strategy={verticalListSortingStrategy}>
         {items.map((item, index) => (
-          <ItemWrapper key={index} id={item.id}>
+          <ItemWrapper
+            key={index}
+            id={item.id}
+            disabledDrag={disableDragByIndex === index}
+          >
             {children(item, index)}
           </ItemWrapper>
         ))}

src/features/workspace/components/workspace-muxing-model.tsx

@@ -11,6 +11,9 @@ import {
   LinkButton,
   Text,
   TextField,
+  Tooltip,
+  TooltipInfoButton,
+  TooltipTrigger,
 } from "@stacklok/ui-kit";
 import { twMerge } from "tailwind-merge";
 import { useMutationPreferredModelWorkspace } from "../hooks/use-mutation-preferred-model-workspace";
@@ -59,6 +62,7 @@ type SortableItemProps = {
   models: V1ListAllModelsForAllProvidersResponse;
   isArchived: boolean;
   showRemoveButton: boolean;
+  isDefaultRule: boolean;
   setRuleItem: (rule: PreferredMuxRule) => void;
   removeRule: (index: number) => void;
 };
@@ -71,21 +75,23 @@ function SortableItem({
   models,
   showRemoveButton,
   isArchived,
+  isDefaultRule,
 }: SortableItemProps) {
+  const placeholder = isDefaultRule ? "Catch All" : "eg file type, file name";
   return (
     <div className="flex items-center gap-2" key={rule.id}>
       <div className="flex w-full justify-between">
         <TextField
           aria-labelledby="filter-by-label-id"
           onFocus={(event) => event.preventDefault()}
           value={rule?.matcher ?? ""}
-          isDisabled={isArchived}
+          isDisabled={isArchived || isDefaultRule}
           name="matcher"
           onChange={(matcher) => {
             setRuleItem({ ...rule, matcher });
           }}
         >
-          <Input placeholder="eg file type, file name" />
+          <Input placeholder={placeholder} />
         </TextField>
       </div>
       <div className="flex w-3/5 gap-2">
@@ -97,7 +103,7 @@ function SortableItem({
             setRuleItem({ ...rule, provider_id, model })
           }
         />
-        {showRemoveButton && (
+        {showRemoveButton && !isDefaultRule && (
           <Button
             aria-label="remove mux rule"
             isIcon
@@ -177,8 +183,8 @@ export function WorkspaceMuxingModel({
           <div className="flex flex-col justify-start">
             <Text className="text-primary">Model Muxing</Text>
             <Text className="flex items-center gap-1 text-secondary mb-0 text-balance">
-              Filters will be applied in order (top to bottom), empty filters
-              will apply to all.
+              Select the model you would like to use in this workspace. This
+              section applies only if you are using the MUX endpoint.
               <Link
                 variant="primary"
                 className="flex items-center gap-1 no-underline"
@@ -194,25 +200,43 @@ export function WorkspaceMuxingModel({
             <div className="flex gap-2">
               <div className="w-12">&nbsp;</div>
               <div className="w-full">
-                <Label id="filter-by-label-id">Filter by</Label>
+                <Label id="filter-by-label-id" className="flex items-center">
+                  Filter by
+                  <TooltipTrigger delay={0}>
+                    <TooltipInfoButton aria-label="Filter by description" />
+                    <Tooltip>
+                      Filters are applied in top-down order. The first rule that
+                      matches each prompt determines the chosen model. An empty
+                      filter applies to all prompts.
+                    </Tooltip>
+                  </TooltipTrigger>
+                </Label>
               </div>
               <div className="w-3/5">
                 <Label id="preferred-model-id">Preferred Model</Label>
               </div>
             </div>
-            <SortableArea items={rules} setItems={setRules}>
-              {(rule, index) => (
-                <SortableItem
-                  key={rule.id}
-                  index={index}
-                  rule={rule}
-                  setRuleItem={setRuleItem}
-                  removeRule={removeRule}
-                  models={providerModels}
-                  showRemoveButton={showRemoveButton}
-                  isArchived={!!isArchived}
-                />
-              )}
+            <SortableArea
+              items={rules}
+              setItems={setRules}
+              disableDragByIndex={rules.length - 1}
+            >
+              {(rule, index) => {
+                const isDefaultRule = rules.length - 1 === index;
+                return (
+                  <SortableItem
+                    key={rule.id}
+                    index={index}
+                    rule={rule}
+                    setRuleItem={setRuleItem}
+                    removeRule={removeRule}
+                    models={providerModels}
+                    showRemoveButton={showRemoveButton}
+                    isArchived={!!isArchived}
+                    isDefaultRule={isDefaultRule}
+                  />
+                );
+              }}
             </SortableArea>
           </div>
         </CardBody>