insforge 0.3.3 → 1.3.0

package/frontend/src/features/ai/components/AIConfigCard.tsx

@@ -1,114 +1,143 @@
-import React from 'react';
-import { Button } from '@/components/radix/Button';
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-} from '@/components/radix/Tooltip';
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/radix/DropdownMenu';
-import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from '@/components';
+
+import { MoreHorizontal, Pencil, Trash2, DollarSign } from 'lucide-react';
 import {
   //   formatTokenCount,
-  getProviderDisplayName,
-  getFriendlyModelName,
   getModalityIcon,
+  ModelOption,
 } from '../helpers';
-import { AIConfigurationWithUsageSchema } from '@insforge/shared-schemas';
-
-interface AIConfigExtended extends AIConfigurationWithUsageSchema {
-  logo?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-}
+import { cn } from '@/lib/utils/utils';
 
 interface AIModelCardProps {
-  config: AIConfigExtended;
-  onEdit: (id: string) => void;
-  onDelete: (id: string) => void;
+  config: ModelOption;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  mode?: 'configured' | 'selectable';
+  isSelected?: boolean;
+  onSelect?: () => void;
+  isDisabled?: boolean;
 }
 
-export function AIModelCard({ config, onEdit, onDelete }: AIModelCardProps) {
-  // Extract provider info
-  const companyId = config.modelId.split('/')[0];
-  const providerName = getProviderDisplayName(companyId);
-
-  // Get friendly model name from modelId
-  const modelName = getFriendlyModelName(config.modelId);
+export function AIModelCard({
+  config,
+  onEdit,
+  onDelete,
+  mode = 'configured',
+  isSelected = false,
+  onSelect,
+  isDisabled = false,
+}: AIModelCardProps) {
+  const isSelectableMode = mode === 'selectable';
 
-  const inputModality = config.inputModality;
-  const outputModality = config.outputModality;
+  const handleCardClick = () => {
+    if (isSelectableMode && !isDisabled && onSelect) {
+      onSelect();
+    }
+  };
 
   return (
     <TooltipProvider>
-      <div className="relative py-5 px-4 bg-white dark:bg-[#333333] rounded-[8px] border border-neutral-200 dark:border-neutral-700 transition-all duration-200">
-        {/* More button */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7 p-1 hover:bg-gray-100 dark:hover:bg-neutral-700 absolute top-3 right-3"
-            >
-              <MoreHorizontal className="h-4 w-4 text-gray-500 dark:text-neutral-400" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              className="flex flex-row gap-3 px-3 py-2 cursor-pointer"
-              onClick={() => onEdit(config.id)}
-            >
-              <Pencil className="w-4 h-4" /> System Prompt
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => onDelete(config.id)}
-              className="text-red-600 dark:text-red-400 flex flex-row gap-3 px-3 py-2 cursor-pointer"
-            >
-              <Trash2 className="w-4 h-4" /> Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+      <div
+        className={cn(
+          'relative py-5 px-4 bg-white dark:bg-[#333333] rounded-[8px] transition-all duration-200',
+          isSelectableMode && !isDisabled && 'cursor-pointer',
+          isSelectableMode && isSelected
+            ? 'border-2 border-zinc-700 dark:border-emerald-300'
+            : 'border-2 border-neutral-200 dark:border-neutral-700',
+          isSelectableMode &&
+            !isDisabled &&
+            !isSelected &&
+            'hover:shadow-md hover:bg-neutral-100 dark:hover:bg-neutral-700',
+          isDisabled && 'opacity-50 cursor-not-allowed'
+        )}
+        onClick={handleCardClick}
+      >
+        {/* Configured mode: More button */}
+        {mode === 'configured' && onEdit && onDelete && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 absolute top-3 right-3"
+              >
+                <MoreHorizontal className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                className="flex flex-row gap-3 px-3 py-2 cursor-pointer"
+                onClick={() => onEdit(config.id)}
+              >
+                <Pencil className="w-4 h-4" /> System Prompt
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onDelete(config.id)}
+                className="text-red-600 dark:text-red-400 flex flex-row gap-3 px-3 py-2 cursor-pointer"
+              >
+                <Trash2 className="w-4 h-4" /> Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {/* Selectable mode: Added badge */}
+        {isSelectableMode && isDisabled && (
+          <div className="absolute top-3 right-3 px-2 py-1 text-xs font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 rounded">
+            Added
+          </div>
+        )}
 
         {/* Header with logo */}
         <div className="flex items-start justify-between mb-4">
           <div className="flex items-center gap-3">
             {/* Provider Logo */}
-            <div className="w-10 h-10">
-              {config.logo ? (
-                <config.logo className="w-10 h-10 dark:text-white" />
-              ) : (
-                <div className="w-10 h-10 bg-gray-500 rounded flex items-center justify-center text-white text-sm font-bold">
-                  {companyId.charAt(0).toUpperCase()}
+            <Tooltip key={config.providerName}>
+              <TooltipTrigger asChild>
+                <div className="w-10 h-10">
+                  {config.logo ? (
+                    <config.logo className="w-10 h-10 dark:text-white" />
+                  ) : (
+                    <div className="w-10 h-10 bg-gray-500 rounded flex items-center justify-center text-white text-sm font-bold">
+                      {config.providerName.charAt(0).toUpperCase()}
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
+              </TooltipTrigger>
+              <TooltipContent side="top" sideOffset={8}>
+                <p className="capitalize">{config.providerName}</p>
+              </TooltipContent>
+            </Tooltip>
 
             {/* Model Info */}
-            <div>
-              <p
-                className="font-medium text-sm text-zinc-950 dark:text-zinc-50 line-clamp-1 mr-3"
-                title={modelName}
-              >
-                {modelName}
-              </p>
-              <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
-                {providerName}
-              </p>
-            </div>
+            <p
+              className="font-medium text-sm text-zinc-950 dark:text-zinc-50 max-h-10 line-clamp-2"
+              title={config.modelName ? config.modelName : config.providerName}
+            >
+              {config.modelName ? config.modelName : config.providerName}
+            </p>
+            {(!isSelectableMode || (isSelectableMode && isDisabled)) && <div className="w-6" />}
           </div>
         </div>
 
-        <div className="h-[1px] bg-neutral-200 dark:bg-neutral-700 my-3" />
+        <div className="h-px bg-neutral-200 dark:bg-neutral-700 my-3" />
 
-        {/* Modality indicators */}
+        {/* Modality indicators - use config modalities directly */}
         <div className="flex flex-col gap-3 items-stretch">
           <div className="flex items-center justify-between">
             <span className="text-black dark:text-white">Input</span>
             <div className="flex items-center gap-2">
-              {inputModality.map((modality) => {
+              {config.inputModality.map((modality) => {
                 const IconComponent = getModalityIcon(modality);
                 return (
                   <Tooltip key={modality}>
@@ -127,7 +156,7 @@ export function AIModelCard({ config, onEdit, onDelete }: AIModelCardProps) {
           <div className="flex items-center justify-between">
             <span className="text-black dark:text-white">Output</span>
             <div className="flex items-center gap-2">
-              {outputModality.map((modality) => {
+              {config.outputModality.map((modality) => {
                 const IconComponent = getModalityIcon(modality);
                 return (
                   <Tooltip key={modality}>
@@ -143,10 +172,27 @@ export function AIModelCard({ config, onEdit, onDelete }: AIModelCardProps) {
             </div>
           </div>
 
-          <div className="flex items-center justify-between text-sm text-black dark:text-white">
-            <span>Requests</span>
-            <span>{config.usageStats?.totalRequests || 0}</span>
-          </div>
+          {isSelectableMode ? (
+            <div className="flex items-center justify-between">
+              <span className="text-black dark:text-white">Credit Usage</span>
+              <div className="flex items-center">
+                {typeof config.priceLevel === 'number' && config.priceLevel > 0 ? (
+                  Array.from({ length: config.priceLevel }).map((_, i) => (
+                    <div key={i} className="w-5 h-5 flex items-center justify-center">
+                      <DollarSign className="w-4 h-4 text-neutral-500 dark:text-neutral-400" />
+                    </div>
+                  ))
+                ) : (
+                  <span className="text-sm text-neutral-500 dark:text-neutral-400">Free</span>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between text-sm text-black dark:text-white">
+              <span>Requests</span>
+              <span>{config.usageStats?.totalRequests || 0}</span>
+            </div>
+          )}
         </div>
       </div>
     </TooltipProvider>

package/frontend/src/features/ai/components/AIEmptyState.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
-import { Box } from 'lucide-react';
+import { Sparkles } from 'lucide-react';
 
-const AIEmptyState: React.FC = () => {
+interface AIEmptyStateProps {
+  title: string;
+  description?: string;
+}
+
+const AIEmptyState: React.FC<AIEmptyStateProps> = ({ title, description }) => {
   return (
     <div className="flex flex-col items-center justify-center py-8 text-center gap-3 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
-      <Box size={40} className="text-neutral-400 dark:text-neutral-600" />
+      <Sparkles size={40} className="text-neutral-400 dark:text-neutral-600" />
       <div className="flex flex-col items-center justify-center gap-1">
-        <p className="text-sm font-medium text-zinc-950 dark:text-white">No AI Integration Yet</p>
-        <p className="text-neutral-500 dark:text-neutral-400 text-xs">
-          Add your first integration to get started
-        </p>
+        <p className="text-sm font-medium text-zinc-950 dark:text-white">{title}</p>
+        {description && (
+          <p className="text-neutral-500 dark:text-neutral-400 text-xs max-w-md">{description}</p>
+        )}
       </div>
     </div>
   );

package/frontend/src/features/ai/components/ModalityFilterSidebar.tsx

@@ -0,0 +1,101 @@
+import { Checkbox, Label } from '@/components';
+import { ModalitySchema } from '@insforge/shared-schemas';
+
+interface ModalityFilterSidebarProps {
+  inputModalities: ModalitySchema[];
+  outputModalities: ModalitySchema[];
+  onInputChange: (modalities: ModalitySchema[]) => void;
+  onOutputChange: (modalities: ModalitySchema[]) => void;
+}
+
+const modalityOptions: Array<{
+  value: ModalitySchema;
+  label: string;
+}> = [
+  { value: 'text', label: 'Text' },
+  { value: 'image', label: 'Image' },
+];
+
+export function ModalityFilterSidebar({
+  inputModalities,
+  outputModalities,
+  onInputChange,
+  onOutputChange,
+}: ModalityFilterSidebarProps) {
+  const handleModalityToggle = (
+    type: 'input' | 'output',
+    modality: ModalitySchema,
+    checked: boolean
+  ) => {
+    const currentModalities = type === 'input' ? inputModalities : outputModalities;
+    const setModalities = type === 'input' ? onInputChange : onOutputChange;
+
+    if (checked) {
+      setModalities([...currentModalities, modality]);
+    } else {
+      setModalities(currentModalities.filter((m) => m !== modality));
+    }
+  };
+
+  return (
+    <div className="w-30 flex-shrink-0 flex flex-col gap-6">
+      <p className="text-base font-medium text-zinc-950 dark:text-neutral-50">Filters</p>
+
+      {/* Input Section */}
+      <div className="flex flex-col gap-3">
+        <Label className="text-sm font-normal text-zinc-950 dark:text-neutral-50 block">
+          Input
+        </Label>
+        <div className="flex flex-col gap-4">
+          {modalityOptions.map((option) => {
+            const isChecked = inputModalities.includes(option.value);
+            return (
+              <div key={option.value} className="flex items-center gap-x-2">
+                <Checkbox
+                  checked={isChecked}
+                  onChange={(checked: boolean) =>
+                    handleModalityToggle('input', option.value, checked)
+                  }
+                />
+                <Label
+                  className="text-sm font-normal text-zinc-950 dark:text-white cursor-pointer"
+                  onClick={() => handleModalityToggle('input', option.value, !isChecked)}
+                >
+                  {option.label}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Output Section */}
+      <div className="flex flex-col gap-3">
+        <Label className="text-sm font-normal text-zinc-950 dark:text-neutral-50 block">
+          Output
+        </Label>
+        <div className="flex flex-col gap-4">
+          {modalityOptions.map((option) => {
+            const isChecked = outputModalities.includes(option.value);
+            return (
+              <div key={option.value} className="flex items-center gap-x-2">
+                <Checkbox
+                  checked={isChecked}
+                  onChange={(checked: boolean) =>
+                    handleModalityToggle('output', option.value, checked)
+                  }
+                />
+                <Label
+                  className="text-sm font-normal text-zinc-950 dark:text-white cursor-pointer"
+                  onClick={() => handleModalityToggle('output', option.value, !isChecked)}
+                >
+                  {option.label}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/ai/components/ModelSelectionDialog.tsx

@@ -0,0 +1,135 @@
+import { useState, useEffect, useMemo } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components';
+import { CreateAIConfigurationRequest, ModalitySchema } from '@insforge/shared-schemas';
+import { useAIConfigs } from '../hooks/useAIConfigs';
+import { useToast } from '@/lib/hooks/useToast';
+import { ModalityFilterSidebar } from './ModalityFilterSidebar';
+import { ModelSelectionGrid } from './ModelSelectionGrid';
+
+interface ModelSelectionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: (data: CreateAIConfigurationRequest) => void;
+}
+
+export function ModelSelectionDialog({ open, onOpenChange, onSuccess }: ModelSelectionDialogProps) {
+  const { allAvailableModels, configuredModelIds, getFilteredModels } = useAIConfigs();
+  const { showToast } = useToast();
+
+  const [selectedInputModalities, setSelectedInputModalities] = useState<ModalitySchema[]>([]);
+  const [selectedOutputModalities, setSelectedOutputModalities] = useState<ModalitySchema[]>([]);
+  const [selectedModelId, setSelectedModelId] = useState<string>(''); // This is the modelId of the selected model
+
+  // Reset state when dialog opens/closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedInputModalities([]);
+      setSelectedOutputModalities([]);
+      setSelectedModelId('');
+    }
+  }, [open]);
+
+  // Use the existing filtered models logic from useAIConfigs
+  const filteredModels = useMemo(() => {
+    return getFilteredModels(selectedInputModalities, selectedOutputModalities);
+  }, [getFilteredModels, selectedInputModalities, selectedOutputModalities]);
+
+  // Reset model selection when modalities change
+  useEffect(() => {
+    if (selectedModelId) {
+      const stillAvailable = filteredModels.some((model) => model.modelId === selectedModelId);
+      if (!stillAvailable) {
+        setSelectedModelId('');
+      }
+    }
+  }, [selectedInputModalities, selectedOutputModalities, filteredModels, selectedModelId]);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const selectedModel = allAvailableModels.find((model) => model.modelId === selectedModelId);
+
+    if (!selectedModel) {
+      showToast('Selected model not found', 'error');
+      return;
+    }
+
+    const createData: CreateAIConfigurationRequest = {
+      provider: selectedModel.provider,
+      modelId: selectedModel.modelId,
+      inputModality: selectedModel.inputModality,
+      outputModality: selectedModel.outputModality,
+    };
+
+    onSuccess(createData);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        aria-describedby={undefined}
+        className="max-w-5xl h-[80vh] p-0 gap-0 border-zinc-200 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] flex flex-col"
+      >
+        <DialogHeader className="pl-6 pr-4 py-3 flex flex-col gap-1 justify-start border-b border-zinc-200 dark:border-neutral-700 flex-shrink-0">
+          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+            Select AI Model for Integration
+          </DialogTitle>
+        </DialogHeader>
+
+        <form
+          id="model-selection-form"
+          onSubmit={handleFormSubmit}
+          className="flex flex-col flex-1 overflow-hidden"
+        >
+          <div className="flex gap-5 py-6 pl-6 flex-1 overflow-hidden">
+            <ModalityFilterSidebar
+              inputModalities={selectedInputModalities}
+              outputModalities={selectedOutputModalities}
+              onInputChange={setSelectedInputModalities}
+              onOutputChange={setSelectedOutputModalities}
+            />
+            <div className="flex-1 overflow-y-auto">
+              <ModelSelectionGrid
+                models={filteredModels}
+                selectedModelId={selectedModelId}
+                onSelectModel={setSelectedModelId}
+                configuredModelIds={configuredModelIds}
+              />
+            </div>
+          </div>
+        </form>
+
+        <DialogFooter className="p-6 gap-3 border-t border-zinc-200 dark:border-neutral-700 flex-shrink-0">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            className="h-9 px-3 py-2 rounded-sm text-sm font-medium dark:bg-neutral-600 dark:text-zinc-300 dark:border-neutral-600 dark:hover:bg-neutral-700"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            form="model-selection-form"
+            disabled={!selectedModelId}
+            className="h-9 px-3 py-2 rounded-sm text-sm font-medium bg-zinc-950 text-white hover:bg-zinc-800 disabled:opacity-40 dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400"
+          >
+            Add Integration
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/ai/components/ModelSelectionGrid.tsx

@@ -0,0 +1,51 @@
+import { AIModelCard } from './AIConfigCard';
+import { ModelOption } from '../helpers';
+
+interface ModelSelectionGridProps {
+  models: ModelOption[];
+  selectedModelId: string;
+  onSelectModel: (modelId: string) => void;
+  configuredModelIds: string[];
+}
+
+export function ModelSelectionGrid({
+  models,
+  selectedModelId,
+  onSelectModel,
+  configuredModelIds,
+}: ModelSelectionGridProps) {
+  if (!models.length) {
+    return (
+      <div className="flex-1 flex items-center justify-center min-h-[300px] mr-6">
+        <div className="text-center">
+          <p className="text-neutral-500 dark:text-neutral-400 text-base">
+            No models match the selected filters.
+          </p>
+          <p className="text-neutral-400 dark:text-neutral-500 text-sm mt-2">
+            Try adjusting your input/output modality filters.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 grid grid-cols-3 gap-5 auto-rows-fr mr-6">
+      {models.map((model) => {
+        const isConfigured = configuredModelIds.includes(model.modelId);
+        const isSelected = selectedModelId === model.modelId;
+
+        return (
+          <AIModelCard
+            key={model.id}
+            config={model}
+            mode="selectable"
+            isSelected={isSelected}
+            isDisabled={isConfigured}
+            onSelect={() => !isConfigured && onSelectModel(model.modelId)}
+          />
+        );
+      })}
+    </div>
+  );
+}