insforge 1.3.0 → 1.4.8

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

@@ -1,141 +1,147 @@
-import {
-  ModalitySchema,
-  AIModelSchema,
-  AIConfigurationWithUsageSchema,
-} from '@insforge/shared-schemas';
-export interface ModelOption {
-  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';
-import GrokIcon from '@/assets/logos/grok.svg?react';
-import GeminiIcon from '@/assets/logos/gemini.svg?react';
-import ClaudeIcon from '@/assets/logos/claude_code.svg?react';
-import OpenAIIcon from '@/assets/logos/openai.svg?react';
-import AmazonIcon from '@/assets/logos/amazon.svg?react';
-
-export const getModalityIcon = (
-  modality: ModalitySchema
-): React.FunctionComponent<React.SVGProps<SVGSVGElement>> => {
-  switch (modality) {
-    case 'text':
-      return Type;
-    case 'image':
-      return Image;
-    // case 'audio':
-    //   return Mic;
-    // case 'video':
-    //   return Video;
-    // case 'file':
-    //   return File;
-    default:
-      return Type;
-  }
-};
-
-export const formatTokenCount = (count: number): string => {
-  if (count >= 1000000) {
-    return `${(count / 1000000).toFixed(1)}M`;
-  } else if (count >= 1000) {
-    return `${(count / 1000).toFixed(1)}K`;
-  }
-  return count.toString();
-};
-
-export const getProviderDisplayName = (providerId: string): string => {
-  const providerMap: Record<string, string> = {
-    openai: 'OpenAI',
-    anthropic: 'Anthropic',
-    google: 'Google',
-    openrouter: 'OpenRouter',
-    azure: 'Azure',
-    amazon: 'Amazon',
-    'x-ai': 'xAI',
-    huggingface: 'HuggingFace',
-  };
-
-  return (
-    providerMap[providerId.toLowerCase()] ||
-    providerId.charAt(0).toUpperCase() + providerId.slice(1)
-  );
-};
-
-export const getProviderLogo = (
-  providerId: string
-): React.FunctionComponent<React.SVGProps<SVGSVGElement>> | undefined => {
-  const logoMap: Record<string, React.FunctionComponent<React.SVGProps<SVGSVGElement>>> = {
-    anthropic: ClaudeIcon,
-    openai: OpenAIIcon,
-    google: GeminiIcon,
-    'x-ai': GrokIcon,
-    amazon: AmazonIcon,
-  };
-  return logoMap[providerId];
-};
-
-// Helper function to filter AI models based on selected modalities
-export const filterModelsByModalities = (
-  models: AIModelSchema[],
-  selectedInputModalities: ModalitySchema[],
-  selectedOutputModalities: ModalitySchema[]
-): AIModelSchema[] => {
-  if (!models?.length) {
-    return [];
-  }
-
-  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 = (rawModelName: string): string => {
-  // Convert kebab-case to Title Case
-  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;
-  });
-};
+import {
+  ModalitySchema,
+  AIModelSchema,
+  AIConfigurationWithUsageSchema,
+} from '@insforge/shared-schemas';
+export interface ModelOption {
+  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, Mic } from 'lucide-react';
+import GrokIcon from '@/assets/logos/grok.svg?react';
+import GeminiIcon from '@/assets/logos/gemini.svg?react';
+import ClaudeIcon from '@/assets/logos/claude_code.svg?react';
+import OpenAIIcon from '@/assets/logos/openai.svg?react';
+import AmazonIcon from '@/assets/logos/amazon.svg?react';
+import DeepseekIcon from '@/assets/logos/deepseek.svg?react';
+import QwenIcon from '@/assets/logos/qwen.svg?react';
+
+export const getModalityIcon = (
+  modality: ModalitySchema
+): React.FunctionComponent<React.SVGProps<SVGSVGElement>> => {
+  switch (modality) {
+    case 'text':
+      return Type;
+    case 'image':
+      return Image;
+    case 'audio':
+      return Mic;
+    // case 'video':
+    //   return Video;
+    // case 'file':
+    //   return File;
+    default:
+      return Type;
+  }
+};
+
+export const formatTokenCount = (count: number): string => {
+  if (count >= 1000000) {
+    return `${(count / 1000000).toFixed(1)}M`;
+  } else if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}K`;
+  }
+  return count.toString();
+};
+
+export const getProviderDisplayName = (providerId: string): string => {
+  const providerMap: Record<string, string> = {
+    openai: 'OpenAI',
+    anthropic: 'Anthropic',
+    google: 'Google',
+    openrouter: 'OpenRouter',
+    azure: 'Azure',
+    amazon: 'Amazon',
+    'x-ai': 'xAI',
+    huggingface: 'HuggingFace',
+    deepseek: 'DeepSeek',
+    qwen: 'Qwen',
+  };
+
+  return (
+    providerMap[providerId.toLowerCase()] ||
+    providerId.charAt(0).toUpperCase() + providerId.slice(1)
+  );
+};
+
+export const getProviderLogo = (
+  providerId: string
+): React.FunctionComponent<React.SVGProps<SVGSVGElement>> | undefined => {
+  const logoMap: Record<string, React.FunctionComponent<React.SVGProps<SVGSVGElement>>> = {
+    anthropic: ClaudeIcon,
+    openai: OpenAIIcon,
+    google: GeminiIcon,
+    'x-ai': GrokIcon,
+    amazon: AmazonIcon,
+    deepseek: DeepseekIcon,
+    qwen: QwenIcon,
+  };
+  return logoMap[providerId];
+};
+
+// Helper function to filter AI models based on selected modalities
+export const filterModelsByModalities = (
+  models: AIModelSchema[],
+  selectedInputModalities: ModalitySchema[],
+  selectedOutputModalities: ModalitySchema[]
+): AIModelSchema[] => {
+  if (!models?.length) {
+    return [];
+  }
+
+  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 = (rawModelName: string): string => {
+  // Convert kebab-case to Title Case
+  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/pages/AIPage.tsx

@@ -1,166 +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>
-  );
-}
+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>
+  );
+}