insforge 1.3.0 → 1.4.8

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

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

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

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

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

@@ -1,6 +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';
+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';