Initial commit

src/shared/components/ModelSelectModal.js

@@ -0,0 +1,183 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import Modal from "./Modal";
+import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
+import { AI_PROVIDERS } from "@/shared/constants/providers";
+
+export default function ModelSelectModal({
+  isOpen,
+  onClose,
+  onSelect,
+  selectedModel,
+  activeProviders = [],
+  title = "Select Model",
+  modelAliases = {},
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // Group models by provider
+  const groupedModels = useMemo(() => {
+    const groups = {};
+    
+    // Get active provider IDs
+    const activeProviderIds = activeProviders.length > 0 
+      ? activeProviders.map(p => p.provider)
+      : Object.keys(AI_PROVIDERS);
+
+    activeProviderIds.forEach((providerId) => {
+      const alias = PROVIDER_ID_TO_ALIAS[providerId] || providerId;
+      const providerInfo = AI_PROVIDERS[providerId] || { name: providerId, color: "#666" };
+      
+      // For passthrough providers, get models from aliases
+      if (providerInfo.passthroughModels) {
+        const aliasModels = Object.entries(modelAliases)
+          .filter(([, fullModel]) => fullModel.startsWith(`${alias}/`))
+          .map(([aliasName, fullModel]) => ({
+            id: fullModel.replace(`${alias}/`, ""),
+            name: aliasName,
+            value: fullModel,
+          }));
+        
+        if (aliasModels.length > 0) {
+          groups[providerId] = {
+            name: providerInfo.name,
+            alias: alias,
+            color: providerInfo.color,
+            models: aliasModels,
+          };
+        }
+      } else {
+        const models = getModelsByProviderId(providerId);
+        if (models.length > 0) {
+          groups[providerId] = {
+            name: providerInfo.name,
+            alias: alias,
+            color: providerInfo.color,
+            models: models.map((m) => ({
+              id: m.id,
+              name: m.name,
+              value: `${alias}/${m.id}`,
+            })),
+          };
+        }
+      }
+    });
+
+    return groups;
+  }, [activeProviders, modelAliases]);
+
+  // Filter models by search query
+  const filteredGroups = useMemo(() => {
+    if (!searchQuery.trim()) return groupedModels;
+
+    const query = searchQuery.toLowerCase();
+    const filtered = {};
+
+    Object.entries(groupedModels).forEach(([providerId, group]) => {
+      const matchedModels = group.models.filter(
+        (m) =>
+          m.name.toLowerCase().includes(query) ||
+          m.id.toLowerCase().includes(query) ||
+          group.name.toLowerCase().includes(query)
+      );
+
+      if (matchedModels.length > 0) {
+        filtered[providerId] = {
+          ...group,
+          models: matchedModels,
+        };
+      }
+    });
+
+    return filtered;
+  }, [groupedModels, searchQuery]);
+
+  const handleSelect = (model) => {
+    onSelect(model);
+    onClose();
+    setSearchQuery("");
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        setSearchQuery("");
+      }}
+      title={title}
+      size="md"
+      className="!p-4"
+    >
+      {/* Search - compact */}
+      <div className="mb-3">
+        <div className="relative">
+          <span className="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted text-[16px]">
+            search
+          </span>
+          <input
+            type="text"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-8 pr-3 py-1.5 bg-surface border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+          />
+        </div>
+      </div>
+
+      {/* Models grouped by provider - compact */}
+      <div className="max-h-[300px] overflow-y-auto space-y-3">
+        {Object.entries(filteredGroups).map(([providerId, group]) => (
+          <div key={providerId}>
+            {/* Provider header */}
+            <div className="flex items-center gap-1.5 mb-1.5 sticky top-0 bg-surface py-0.5">
+              <div
+                className="w-2 h-2 rounded-full"
+                style={{ backgroundColor: group.color }}
+              />
+              <span className="text-xs font-medium text-primary">
+                {group.name}
+              </span>
+              <span className="text-[10px] text-text-muted">
+                ({group.models.length})
+              </span>
+            </div>
+
+            {/* Models as wrap chips - compact */}
+            <div className="flex flex-wrap gap-1.5">
+              {group.models.map((model) => {
+                const isSelected = selectedModel === model.value;
+                return (
+                  <button
+                    key={model.id}
+                    onClick={() => handleSelect(model)}
+                    className={`
+                      px-2 py-1 rounded-xl text-xs font-medium transition-all border hover:cursor-pointer
+                      ${isSelected 
+                        ? "bg-primary text-white border-primary" 
+                        : "bg-surface border-border text-text-main hover:border-primary/50 hover:bg-primary/5"
+                      }
+                    `}
+                  >
+                    {model.name}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+
+        {Object.keys(filteredGroups).length === 0 && (
+          <div className="text-center py-4 text-text-muted">
+            <span className="material-symbols-outlined text-2xl mb-1 block">
+              search_off
+            </span>
+            <p className="text-xs">No models found</p>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+