insforge 0.3.3 → 1.3.0

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

@@ -0,0 +1,118 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Label,
+  Textarea,
+} from '@/components';
+import {
+  UpdateAIConfigurationRequest,
+  updateAIConfigurationRequestSchema,
+} from '@insforge/shared-schemas';
+
+interface SystemPromptDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialSystemPrompt: string | null | undefined;
+  onSuccess: (data: UpdateAIConfigurationRequest) => void;
+}
+
+export function SystemPromptDialog({
+  open,
+  onOpenChange,
+  initialSystemPrompt,
+  onSuccess,
+}: SystemPromptDialogProps) {
+  const form = useForm<UpdateAIConfigurationRequest>({
+    resolver: zodResolver(updateAIConfigurationRequestSchema),
+    defaultValues: {
+      systemPrompt: initialSystemPrompt ?? null,
+    },
+  });
+
+  // Reset form when dialog opens with new data
+  useEffect(() => {
+    if (open) {
+      form.reset({
+        systemPrompt: initialSystemPrompt ?? null,
+      });
+    }
+  }, [open, initialSystemPrompt, form]);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    void form.handleSubmit((data: UpdateAIConfigurationRequest) => {
+      onSuccess(data);
+      onOpenChange(false);
+    })();
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        aria-describedby={undefined}
+        className="max-w-[600px] p-0 gap-0 border-zinc-200 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]"
+      >
+        <DialogHeader className="px-6 py-3 flex flex-col gap-1 justify-start border-b border-zinc-200 dark:border-neutral-700">
+          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+            Edit System Prompt
+          </DialogTitle>
+        </DialogHeader>
+
+        <form id="system-prompt-form" onSubmit={handleFormSubmit} className="flex flex-col">
+          <div className="flex flex-col gap-6 p-6">
+            <div className="flex flex-row gap-10 items-start">
+              <Label
+                htmlFor="systemPrompt"
+                className="text-sm font-normal text-zinc-950 dark:text-neutral-50 whitespace-nowrap"
+              >
+                System Prompt
+              </Label>
+              <div className="flex flex-col gap-1 w-full">
+                <Textarea
+                  id="systemPrompt"
+                  {...form.register('systemPrompt')}
+                  placeholder="Enter system prompt..."
+                  className="w-full min-h-[160px] resize-none bg-transparent dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700 focus:outline-none"
+                />
+                {form.formState.errors.systemPrompt && (
+                  <p className="text-sm text-red-600 dark:text-red-500">
+                    {form.formState.errors.systemPrompt.message}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        </form>
+
+        <DialogFooter className="p-6 gap-3 border-t border-zinc-200 dark:border-neutral-700">
+          <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="system-prompt-form"
+            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"
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/ai/components/index.ts

@@ -0,0 +1,6 @@
+export { AIModelCard } from './AIConfigCard';
+export { default as AIEmptyState } from './AIEmptyState';
+export { ModalityFilterSidebar } from './ModalityFilterSidebar';
+export { ModelSelectionDialog } from './ModelSelectionDialog';
+export { ModelSelectionGrid } from './ModelSelectionGrid';
+export { SystemPromptDialog } from './SystemPromptDialog';

package/frontend/src/features/ai/helpers.ts

@@ -1,26 +1,21 @@
-import { OpenRouterModel, ModalitySchema } from '@insforge/shared-schemas';
-
-// Type for pricing information from OpenRouter model
-type ModelPricing = {
-  prompt: string;
-  completion: string;
-  image?: string;
-  request?: string;
-  webSearch?: string;
-  internalReasoning?: string;
-  inputCacheRead?: string;
-  inputCacheWrite?: string;
-};
-
-export type ModelPriceLevel = 'FREE' | '$' | '$$' | '$$$';
-
+import {
+  ModalitySchema,
+  AIModelSchema,
+  AIConfigurationWithUsageSchema,
+} from '@insforge/shared-schemas';
 export interface ModelOption {
-  value: string;
-  label: string;
-  company: string;
-  priceLevel: ModelPriceLevel;
-  priceColor: string;
+  id: string;
+  modelId: string;
+  modelName: string;
+  providerName: string;
   logo: React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;
+  inputModality: ModalitySchema[];
+  outputModality: ModalitySchema[];
+  priceLevel?: number;
+  usageStats?: {
+    totalRequests: number;
+  };
+  systemPrompt?: string | null;
 }
 
 import { Type, Image } from 'lucide-react';
@@ -66,7 +61,7 @@ export const getProviderDisplayName = (providerId: string): string => {
     openrouter: 'OpenRouter',
     azure: 'Azure',
     amazon: 'Amazon',
-    xai: 'xAI',
+    'x-ai': 'xAI',
     huggingface: 'HuggingFace',
   };
 
@@ -83,73 +78,64 @@ export const getProviderLogo = (
     anthropic: ClaudeIcon,
     openai: OpenAIIcon,
     google: GeminiIcon,
-    xai: GrokIcon,
+    'x-ai': GrokIcon,
     amazon: AmazonIcon,
   };
   return logoMap[providerId];
 };
 
-// Calculate price level based on pricing data
-export const calculatePriceLevel = (
-  pricing: ModelPricing | undefined | null
-): { level: ModelPriceLevel; color: string } => {
-  if (!pricing) {
-    return { level: 'FREE', color: 'text-green-400' };
-  }
-
-  // Check if it's free
-  if (pricing.prompt === '0' && pricing.completion === '0') {
-    return { level: 'FREE', color: 'text-green-400' };
-  }
-
-  // Calculate average cost per 1M tokens (prompt + completion)
-  // Convert from per-token to per-1M-tokens
-  const promptCostPerToken = parseFloat(pricing.prompt) || 0;
-  const completionCostPerToken = parseFloat(pricing.completion) || 0;
-  const promptCostPer1M = promptCostPerToken * 1000000;
-  const completionCostPer1M = completionCostPerToken * 1000000;
-  const avgCostPer1M = (promptCostPer1M + completionCostPer1M) / 2;
-
-  // Adjusted thresholds based on actual pricing data and user feedback
-  if (avgCostPer1M <= 3) {
-    return { level: '$', color: 'text-green-400' };
-  } // ≤$3/1M tokens (Haiku, Gemini Flash, etc.)
-  if (avgCostPer1M <= 15) {
-    return { level: '$$', color: 'text-amber-400' };
-  } // ≤$15/1M tokens (GPT-4o, Claude Sonnet, etc.)
-  return { level: '$$$', color: 'text-red-400' }; // >$15/1M tokens (Claude Opus, etc.)
-};
-
 // Helper function to filter AI models based on selected modalities
 export const filterModelsByModalities = (
-  models: OpenRouterModel[],
+  models: AIModelSchema[],
   selectedInputModalities: ModalitySchema[],
   selectedOutputModalities: ModalitySchema[]
-): OpenRouterModel[] => {
+): AIModelSchema[] => {
   if (!models?.length) {
     return [];
   }
 
-  return models
-    .filter((model) => {
-      const inputModalities = new Set(model.architecture?.inputModalities || []);
-      const outputModalities = new Set(model.architecture?.outputModalities || []);
-      return (
-        selectedInputModalities.every((m) => inputModalities.has(m)) &&
-        selectedOutputModalities.every((m) => outputModalities.has(m))
-      );
-    })
-    .sort((a, b) => a.name.localeCompare(b.name));
+  return models.filter((model) => {
+    const inputModalities = new Set(model.inputModality);
+    const outputModalities = new Set(model.outputModality);
+    return (
+      selectedInputModalities.every((m) => inputModalities.has(m)) &&
+      selectedOutputModalities.every((m) => outputModalities.has(m))
+    );
+  });
 };
 
 // Helper function to get friendly model name from model ID
-export const getFriendlyModelName = (modelId: string): string => {
-  // Extract the model name part (after the last slash)
-  const modelName = modelId.split('/').pop() || modelId;
-
+export const getFriendlyModelName = (rawModelName: string): string => {
   // Convert kebab-case to Title Case
-  return modelName
+  return rawModelName
     .split('-')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 };
+
+export function toModelOption(model: AIModelSchema | AIConfigurationWithUsageSchema): ModelOption {
+  const [rawProviderId, rawModelName] = model.modelId.split('/');
+
+  return {
+    ...model,
+    modelName: getFriendlyModelName(rawModelName),
+    providerName: getProviderDisplayName(rawProviderId),
+    logo: getProviderLogo(rawProviderId),
+  };
+}
+
+// Sort models with configured ones at the end
+export const sortModelsByConfigurationStatus = (
+  models: ModelOption[],
+  configuredModelIds: string[]
+): ModelOption[] => {
+  return [...models].sort((a, b) => {
+    const aConfigured = configuredModelIds.includes(a.modelId);
+    const bConfigured = configuredModelIds.includes(b.modelId);
+
+    if (aConfigured === bConfigured) {
+      return 0;
+    }
+    return aConfigured ? 1 : -1;
+  });
+};

package/frontend/src/features/ai/hooks/useAIConfigs.ts

@@ -1,22 +1,19 @@
 import { useMemo, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { aiService } from '@/features/ai/services/ai.service';
-import { authService } from '@/features/auth/services/auth.service';
 import {
-  ListModelsResponse,
-  AIConfigurationWithUsageSchema,
   CreateAIConfigurationRequest,
   UpdateAIConfigurationRequest,
   ModalitySchema,
-  type OpenRouterModel,
+  AIModelSchema,
+  AIConfigurationWithUsageSchema,
 } from '@insforge/shared-schemas';
 import { useToast } from '@/lib/hooks/useToast';
 import {
-  getProviderLogo,
-  calculatePriceLevel,
-  getProviderDisplayName,
   filterModelsByModalities,
+  sortModelsByConfigurationStatus,
   type ModelOption,
+  toModelOption,
 } from '../helpers';
 
 interface UseAIConfigsOptions {
@@ -31,10 +28,9 @@ export function useAIConfigs(options: UseAIConfigsOptions = {}) {
   // Fetch AI models configuration
   const {
     data: modelsData,
-    isLoading,
-    error,
-    refetch,
-  } = useQuery<ListModelsResponse>({
+    isLoading: isLoadingModels,
+    error: modelsError,
+  } = useQuery<AIModelSchema[]>({
     queryKey: ['ai-models'],
     queryFn: () => aiService.getModels(),
     enabled: enabled,
@@ -46,7 +42,6 @@ export function useAIConfigs(options: UseAIConfigsOptions = {}) {
     data: configurations,
     isLoading: isLoadingConfigurations,
     error: configurationsError,
-    refetch: refetchConfigurations,
   } = useQuery<AIConfigurationWithUsageSchema[]>({
     queryKey: ['ai-configurations'],
     queryFn: () => aiService.listConfigurations(),
@@ -54,14 +49,6 @@ export function useAIConfigs(options: UseAIConfigsOptions = {}) {
     staleTime: 5 * 60 * 1000, // Cache for 5 minutes
   });
 
-  // Fetch anonymous token (shared across all configs)
-  const { data: anonTokenData, isLoading: isLoadingAnonToken } = useQuery({
-    queryKey: ['anon-token'],
-    queryFn: () => authService.generateAnonToken(),
-    enabled: enabled,
-    staleTime: 30 * 60 * 1000, // Cache for 30 minutes since token never expires
-  });
-
   // Create configuration mutation
   const createConfigurationMutation = useMutation({
     mutationFn: (data: CreateAIConfigurationRequest) => aiService.createConfiguration(data),
@@ -99,123 +86,62 @@ export function useAIConfigs(options: UseAIConfigsOptions = {}) {
     },
   });
 
-  // Extract configured providers (memoized to maintain referential stability)
-  const configuredTextProviders = useMemo(
-    () => modelsData?.text?.filter((p) => p.configured) || [],
-    [modelsData?.text]
-  );
-  const configuredImageProviders = useMemo(
-    () => modelsData?.image?.filter((p) => p.configured) || [],
-    [modelsData?.image]
+  // Convert configurations to ModelOptions
+  const configurationOptions = useMemo(
+    () => (configurations || []).map(toModelOption),
+    [configurations]
   );
 
-  // Extract unconfigured providers
-  const unconfiguredTextProviders = modelsData?.text?.filter((p) => !p.configured) || [];
-  const unconfiguredImageProviders = modelsData?.image?.filter((p) => !p.configured) || [];
-
-  // Get all available models (flat list)
-  const allTextModels = modelsData?.text?.flatMap((p) => p.models) || [];
-  const allImageModels = modelsData?.image?.flatMap((p) => p.models) || [];
-
-  // All configured models from all providers (flattened with deduplication)
-  const allConfiguredModels = useMemo(() => {
-    const uniqueModels = new Map<string, OpenRouterModel>();
-
-    [...configuredTextProviders, ...configuredImageProviders].forEach((provider) => {
-      provider.models.forEach((model) => {
-        // Only add if we haven't seen this model.id before
-        if (!uniqueModels.has(model.id)) {
-          uniqueModels.set(model.id, model);
-        }
-      });
-    });
+  // Get configured model IDs for filtering
+  const configuredModelIds = useMemo(
+    () => configurations?.map((config) => config.modelId) || [],
+    [configurations]
+  );
 
-    return Array.from(uniqueModels.values());
-  }, [configuredTextProviders, configuredImageProviders]);
+  // All available models from all providers
+  const allAvailableModels = useMemo(() => modelsData || [], [modelsData]);
 
   // Helper function to get filtered and processed models
   const getFilteredModels = useCallback(
     (inputModality: ModalitySchema[], outputModality: ModalitySchema[]): ModelOption[] => {
-      const filteredRawModels = filterModelsByModalities(
-        allConfiguredModels,
-        inputModality,
-        outputModality
-      );
-
-      return filteredRawModels.map((model) => {
-        const companyId = model.id.split('/')[0];
-        const priceInfo = calculatePriceLevel(model.pricing);
-
-        return {
-          value: model.id,
-          label: model.name,
-          company: getProviderDisplayName(companyId),
-          priceLevel: priceInfo.level,
-          priceColor: priceInfo.color,
-          logo: getProviderLogo(companyId),
-        };
-      });
+      // If both modality arrays are empty, return all models
+      const shouldFilter = inputModality.length || outputModality.length;
+
+      const filteredRawModels = shouldFilter
+        ? filterModelsByModalities(allAvailableModels, inputModality, outputModality)
+        : allAvailableModels;
+
+      // Convert to ModelOption using centralized converter
+      const modelOptions = filteredRawModels.map(toModelOption);
+
+      // Sort with configured models at the end
+      return sortModelsByConfigurationStatus(modelOptions, configuredModelIds);
     },
-    [allConfiguredModels]
+    [allAvailableModels, configuredModelIds]
   );
 
-  // Check if any providers are configured
-  const hasConfiguredTextProviders = configuredTextProviders.length > 0;
-  const hasConfiguredImageProviders = configuredImageProviders.length > 0;
-  const hasAnyConfiguration = hasConfiguredTextProviders || hasConfiguredImageProviders;
-
   return {
-    // Raw data
-    modelsData,
-    isLoading,
-    error,
-
-    // Providers by type
-    textProviders: modelsData?.text || [],
-    imageProviders: modelsData?.image || [],
+    // Models data
+    isLoadingModels,
+    modelsError,
 
     // Configured providers
-    configuredTextProviders,
-    configuredImageProviders,
-    allConfiguredModels,
-
-    // Unconfigured providers
-    unconfiguredTextProviders,
-    unconfiguredImageProviders,
-
-    // Models lists
-    allTextModels,
-    allImageModels,
-
-    // Status checks
-    hasConfiguredTextProviders,
-    hasConfiguredImageProviders,
-    hasAnyConfiguration,
+    allAvailableModels,
 
     // Configurations data
-    configurations: configurations || [],
     isLoadingConfigurations,
     configurationsError,
 
-    // Anonymous token data
-    anonKey: anonTokenData?.accessToken,
-    isLoadingAnonToken,
-
     // Configuration mutations
     createConfiguration: createConfigurationMutation.mutate,
     updateConfiguration: updateConfigurationMutation.mutate,
     deleteConfiguration: deleteConfigurationMutation.mutate,
 
-    // Mutation states
-    isCreating: createConfigurationMutation.isPending,
-    isUpdating: updateConfigurationMutation.isPending,
-    isDeleting: deleteConfigurationMutation.isPending,
-
-    // Operations
-    refetch,
-    refetchConfigurations,
-
     // Helper functions
     getFilteredModels,
+
+    // Return converted configurations instead of raw data
+    configurationOptions,
+    configuredModelIds,
   };
 }

package/frontend/src/features/ai/hooks/useAIUsage.ts

@@ -70,8 +70,6 @@ export function useAIRemainingCredits(enabled = true) {
     queryKey: ['ai-remaining-credits'],
     queryFn: () => aiService.getRemainingCredits(),
     enabled: enabled,
-    staleTime: 30 * 1000, // Cache for 30 seconds
-    refetchInterval: 60 * 1000, // Refetch every minute
     retry: false,
   });
 }

package/frontend/src/features/ai/pages/AIPage.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import { Plus, Loader2 } from 'lucide-react';
+import { Button, ConfirmDialog } from '@/components';
+import { useAIConfigs } from '../hooks/useAIConfigs';
+import { useAIRemainingCredits } from '../hooks/useAIUsage';
+import {
+  CreateAIConfigurationRequest,
+  UpdateAIConfigurationRequest,
+} from '@insforge/shared-schemas';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import {
+  AIEmptyState,
+  ModelSelectionDialog,
+  SystemPromptDialog,
+  AIModelCard,
+} from '@/features/ai/components';
+import { isInsForgeCloudProject } from '@/lib/utils/utils';
+
+export default function AIPage() {
+  const {
+    configurationOptions,
+    isLoadingConfigurations,
+    createConfiguration,
+    updateConfiguration,
+    deleteConfiguration,
+  } = useAIConfigs();
+
+  const { data: credits, error: getAICreditsError } =
+    useAIRemainingCredits(!isInsForgeCloudProject());
+
+  const { confirm, confirmDialogProps } = useConfirm();
+
+  // Format credits display
+  const formatCredits = (remaining: number) => {
+    if (remaining >= 1000) {
+      return `${(remaining / 1000).toFixed(1)}K`;
+    }
+    return remaining.toFixed(2);
+  };
+
+  const [modelSelectionOpen, setModelSelectionOpen] = useState(false);
+  const [systemPromptOpen, setSystemPromptOpen] = useState(false);
+  const [editingConfigId, setEditingConfigId] = useState<string | undefined>();
+
+  const handleEdit = (id: string) => {
+    setEditingConfigId(id);
+    setSystemPromptOpen(true);
+  };
+
+  const handleDelete = async (id: string) => {
+    const shouldDelete = await confirm({
+      title: 'Delete AI Configuration',
+      description:
+        'Are you certain you wish to remove this AI Integration? This action is irreversible.',
+      confirmText: 'Delete',
+      destructive: true,
+    });
+
+    if (shouldDelete) {
+      deleteConfiguration(id);
+    }
+  };
+
+  const handleCreate = () => {
+    setModelSelectionOpen(true);
+  };
+
+  const handleModelSelectionSuccess = (configData: CreateAIConfigurationRequest) => {
+    createConfiguration({
+      inputModality: configData.inputModality,
+      outputModality: configData.outputModality,
+      provider: configData.provider,
+      modelId: configData.modelId,
+    });
+  };
+
+  // Derive the editing config from the ID
+  const editingConfig = configurationOptions.find((c) => c.id === editingConfigId);
+
+  const handleSystemPromptSuccess = (configData: UpdateAIConfigurationRequest) => {
+    if (editingConfigId) {
+      updateConfiguration({
+        id: editingConfigId,
+        data: {
+          systemPrompt: configData.systemPrompt || null,
+        },
+      });
+    }
+  };
+
+  return (
+    <div className="flex h-full bg-white dark:bg-neutral-800 pt-8 pb-6">
+      <div className="max-w-[1080px] mx-auto flex-1 flex flex-col gap-6 overflow-hidden">
+        {/* Header Section */}
+        <div className="w-full flex items-start justify-between">
+          <div className="flex flex-col items-start gap-2">
+            <div className="flex items-center gap-3">
+              <h1 className="text-xl font-semibold text-black dark:text-white">AI Integration</h1>
+              {credits?.remaining && (
+                <span className="text-sm font-normal text-neutral-700 dark:text-emerald-300 mt-[2.5px]">
+                  {formatCredits(credits.remaining)} credit{credits.remaining !== 1 ? 's' : ''} left
+                </span>
+              )}
+            </div>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              Your models are ready — build LLM-powered features or add more integrations.
+            </p>
+          </div>
+          <Button
+            className="h-9 py-2 pl-2 pr-3 text-sm font-medium gap-2 dark:text-white dark:bg-neutral-700 dark:hover:bg-neutral-600"
+            onClick={handleCreate}
+          >
+            <Plus className="w-5 h-5" />
+            New Integration
+          </Button>
+        </div>
+
+        {/* Content Section */}
+        <div className="flex-1 overflow-auto">
+          {getAICreditsError ? (
+            <AIEmptyState title="Configuration Error" description={getAICreditsError.message} />
+          ) : isLoadingConfigurations ? (
+            <div className="flex-1 flex items-center justify-center h-full">
+              <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+            </div>
+          ) : configurationOptions.length ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {configurationOptions.map((modelOption) => (
+                <AIModelCard
+                  key={modelOption.id}
+                  config={modelOption}
+                  mode="configured"
+                  onEdit={handleEdit}
+                  onDelete={() => void handleDelete(modelOption.id)}
+                />
+              ))}
+            </div>
+          ) : (
+            <AIEmptyState
+              title="No AI Integration Yet"
+              description="Add your first integration to get started"
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Model Selection Dialog */}
+      <ModelSelectionDialog
+        open={modelSelectionOpen}
+        onOpenChange={setModelSelectionOpen}
+        onSuccess={handleModelSelectionSuccess}
+      />
+
+      {/* System Prompt Dialog */}
+      <SystemPromptDialog
+        open={systemPromptOpen}
+        onOpenChange={setSystemPromptOpen}
+        initialSystemPrompt={editingConfig?.systemPrompt}
+        onSuccess={handleSystemPromptSuccess}
+      />
+
+      {/* Confirm Dialog */}
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}