insforge 0.3.1

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

@@ -0,0 +1,76 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/radix/Dialog';
+import { Button } from '@/components/radix/Button';
+import {
+  AIConfigurationWithUsageSchema,
+  CreateAIConfigurationRequest,
+  UpdateAIConfigurationRequest,
+} from '@insforge/shared-schemas';
+import { AIConfigForm } from './AIConfigForm';
+
+interface AIConfigDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode: 'create' | 'edit';
+  editingConfig?: AIConfigurationWithUsageSchema;
+  onSuccess?: (config: CreateAIConfigurationRequest | UpdateAIConfigurationRequest) => void;
+}
+
+export function AIConfigDialog({
+  open,
+  onOpenChange,
+  mode,
+  editingConfig,
+  onSuccess,
+}: AIConfigDialogProps) {
+  const handleFormSubmit = (data: CreateAIConfigurationRequest | UpdateAIConfigurationRequest) => {
+    onSuccess?.(data);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        aria-describedby={undefined}
+        className="max-w-[640px] p-0 border-zinc-200 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]"
+      >
+        <div className="flex flex-col">
+          <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">
+              {mode === 'create' ? 'New AI Integration' : 'Edit System Prompt'}
+            </DialogTitle>
+          </DialogHeader>
+
+          <AIConfigForm mode={mode} editingConfig={editingConfig} onSubmit={handleFormSubmit} />
+
+          <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="ai-config-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"
+            >
+              {mode === 'create' ? 'Add Integration' : 'Save'}
+            </Button>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,222 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useAIConfigs } from '../hooks/useAIConfigs';
+import {
+  AIConfigurationWithUsageSchema,
+  createAIConfigurationRequestSchema,
+  updateAIConfigurationRequestSchema,
+  CreateAIConfigurationRequest,
+  UpdateAIConfigurationRequest,
+  ModalitySchema,
+} from '@insforge/shared-schemas';
+import { useToast } from '@/lib/hooks/useToast';
+import { ModalityField } from './fields/ModalityField';
+import { ModelSelectionField } from './fields/ModelSelectionField';
+import { SystemPromptField } from './fields/SystemPromptField';
+
+interface AIConfigFormProps {
+  mode: 'create' | 'edit';
+  editingConfig?: AIConfigurationWithUsageSchema;
+  onSubmit: (data: CreateAIConfigurationRequest | UpdateAIConfigurationRequest) => void;
+}
+
+export function AIConfigForm({ mode, editingConfig, onSubmit }: AIConfigFormProps) {
+  const { allConfiguredModels, configurations, getFilteredModels } = useAIConfigs();
+  const { showToast } = useToast();
+  const isCreateMode = mode === 'create';
+
+  // State for create mode
+  const [selectedInputModality, setSelectedInputModality] = useState<ModalitySchema[]>(
+    isCreateMode ? ['text'] : []
+  );
+  const [selectedOutputModality, setSelectedOutputModality] = useState<ModalitySchema[]>(
+    isCreateMode ? ['text'] : []
+  );
+
+  // Initialize form based on mode
+  const getInitialValues = useCallback(():
+    | CreateAIConfigurationRequest
+    | UpdateAIConfigurationRequest => {
+    if (isCreateMode) {
+      return {
+        inputModality: ['text'],
+        outputModality: ['text'],
+        provider: 'openrouter',
+        modelId: '',
+        systemPrompt: undefined,
+      };
+    } else {
+      return {
+        systemPrompt: editingConfig?.systemPrompt ?? null,
+      };
+    }
+  }, [isCreateMode, editingConfig?.systemPrompt]);
+
+  // Create form instances
+  const createForm = useForm<CreateAIConfigurationRequest>({
+    resolver: zodResolver(createAIConfigurationRequestSchema),
+    defaultValues: isCreateMode ? (getInitialValues() as CreateAIConfigurationRequest) : undefined,
+  });
+
+  const editForm = useForm<UpdateAIConfigurationRequest>({
+    resolver: zodResolver(updateAIConfigurationRequestSchema),
+    defaultValues: !isCreateMode ? (getInitialValues() as UpdateAIConfigurationRequest) : undefined,
+  });
+
+  const form = isCreateMode ? createForm : editForm;
+
+  // Get filtered models for create mode
+  const filteredModels = useMemo(() => {
+    if (!isCreateMode) {
+      return [];
+    }
+    return getFilteredModels(selectedInputModality, selectedOutputModality);
+  }, [isCreateMode, getFilteredModels, selectedInputModality, selectedOutputModality]);
+
+  // Initialize form values
+  useEffect(() => {
+    const initialValues = getInitialValues();
+    if (isCreateMode) {
+      const createValues = initialValues as CreateAIConfigurationRequest;
+      setSelectedInputModality(createValues.inputModality);
+      setSelectedOutputModality(createValues.outputModality);
+      createForm.reset(createValues);
+    } else {
+      editForm.reset(initialValues as UpdateAIConfigurationRequest);
+    }
+  }, [isCreateMode, getInitialValues, createForm, editForm]);
+
+  // Reset model selection when modalities change (create mode only)
+  useEffect(() => {
+    if (isCreateMode) {
+      createForm.setValue('modelId', '');
+    }
+  }, [selectedInputModality, selectedOutputModality, isCreateMode, createForm]);
+
+  // Check if a model is already configured (create mode only)
+  const isModelConfigured = useCallback(
+    (modelId: string) => {
+      if (!isCreateMode || !configurations) {
+        return false;
+      }
+
+      return configurations.some((config) => config.modelId === modelId);
+    },
+    [isCreateMode, configurations]
+  );
+
+  // Check if model selection should be disabled (create mode only)
+  const isModelSelectionDisabled = useMemo(() => {
+    if (!isCreateMode) {
+      return true;
+    }
+    return selectedInputModality.length === 0 || selectedOutputModality.length === 0;
+  }, [isCreateMode, selectedInputModality.length, selectedOutputModality.length]);
+  const selectedModelId = createForm.watch('modelId');
+
+  const handleModelChange = useCallback(
+    (modelId: string) => {
+      createForm.setValue('modelId', modelId);
+    },
+    [createForm]
+  );
+
+  const handleFormSubmit = useCallback(
+    (data: CreateAIConfigurationRequest | UpdateAIConfigurationRequest) => {
+      if (isCreateMode) {
+        const createData = data as CreateAIConfigurationRequest;
+
+        // Find the selected model to get its actual architecture
+        const selectedModel = allConfiguredModels.find((model) => model.id === createData.modelId);
+
+        if (!selectedModel) {
+          showToast('Selected model not found', 'error');
+          return;
+        }
+
+        // Filter to only supported modalities (text and image)
+        const supportedModalities: ModalitySchema[] = ['text', 'image'];
+        const rawInputModality = selectedModel.architecture?.inputModalities || ['text'];
+        const rawOutputModality = selectedModel.architecture?.outputModalities || ['text'];
+
+        // Filter out unsupported modalities
+        const filteredInputModality = rawInputModality.filter(
+          (modality): modality is ModalitySchema =>
+            supportedModalities.includes(modality as ModalitySchema)
+        );
+        const filteredOutputModality = rawOutputModality.filter(
+          (modality): modality is ModalitySchema =>
+            supportedModalities.includes(modality as ModalitySchema)
+        );
+
+        const finalCreateData: CreateAIConfigurationRequest = {
+          ...createData,
+          inputModality: filteredInputModality,
+          outputModality: filteredOutputModality,
+        };
+
+        onSubmit(finalCreateData);
+      } else {
+        // Edit mode - just pass the data as is
+        onSubmit(data as UpdateAIConfigurationRequest);
+      }
+    },
+    [isCreateMode, onSubmit, allConfiguredModels, showToast]
+  );
+
+  return (
+    <form
+      id="ai-config-form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        void form.handleSubmit(handleFormSubmit)();
+      }}
+      className="flex flex-col"
+    >
+      <div className="flex flex-col gap-6 p-6">
+        <div className="flex flex-col gap-6 w-full items-stretch">
+          {isCreateMode ? (
+            <>
+              {/* Input modality field */}
+              <ModalityField
+                fieldType="input"
+                value={selectedInputModality}
+                onChange={setSelectedInputModality}
+              />
+
+              {/* Output modality field */}
+              <ModalityField
+                fieldType="output"
+                value={selectedOutputModality}
+                onChange={setSelectedOutputModality}
+              />
+
+              {/* Model selection field */}
+              <ModelSelectionField
+                models={filteredModels}
+                selectedModelId={selectedModelId}
+                onModelChange={handleModelChange}
+                isModelConfigured={isModelConfigured}
+                disabled={isModelSelectionDisabled}
+              />
+            </>
+          ) : null}
+
+          {/* System prompt field */}
+          {isCreateMode ? (
+            <SystemPromptField<CreateAIConfigurationRequest>
+              register={createForm.register}
+              error={createForm.formState.errors.systemPrompt}
+            />
+          ) : (
+            <SystemPromptField<UpdateAIConfigurationRequest>
+              register={editForm.register}
+              error={editForm.formState.errors.systemPrompt}
+            />
+          )}
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box } from 'lucide-react';
+
+const AIEmptyState: React.FC = () => {
+  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" />
+      <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>
+      </div>
+    </div>
+  );
+};
+
+export default AIEmptyState;

package/frontend/src/features/ai/components/fields/ModalityField.tsx

@@ -0,0 +1,87 @@
+import { Label } from '@/components/radix/Label';
+import { Checkbox } from '@/components/Checkbox';
+import { getModalityIcon } from '../../helpers';
+import { ModalitySchema } from '@insforge/shared-schemas';
+
+interface ModalityFieldProps {
+  fieldType: 'input' | 'output';
+  value: ModalitySchema[];
+  onChange: (value: ModalitySchema[]) => void;
+  isReadOnly?: boolean;
+}
+
+const modalityOptions: Array<{
+  value: ModalitySchema;
+  label: string;
+  icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+}> = [
+  {
+    value: 'text',
+    label: 'Text',
+    icon: getModalityIcon('text'),
+  },
+  {
+    value: 'image',
+    label: 'Image',
+    icon: getModalityIcon('image'),
+  },
+];
+
+export function ModalityField({
+  fieldType,
+  value,
+  onChange,
+  isReadOnly = false,
+}: ModalityFieldProps) {
+  const label = fieldType.charAt(0).toUpperCase() + fieldType.slice(1);
+
+  const handleCheckboxChange = (modalityValue: ModalitySchema, checked: boolean) => {
+    if (checked) {
+      onChange([...value, modalityValue]);
+    } else {
+      onChange(value.filter((v) => v !== modalityValue));
+    }
+  };
+
+  if (isReadOnly) {
+    return (
+      <div className="flex flex-row gap-10 items-center">
+        <Label className="w-34 text-sm font-normal text-zinc-950 dark:text-neutral-50">
+          {label} <span className="text-red-500">*</span>
+        </Label>
+        <div className="w-full flex items-center h-9 px-3 py-2 text-sm bg-zinc-50 dark:bg-neutral-900 border border-zinc-200 dark:border-neutral-700 rounded-md text-zinc-600 dark:text-zinc-400">
+          {value.length > 0 ? value.join(', ') : 'None selected'}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-row gap-10 items-center">
+      <Label className="w-34 text-sm font-normal text-zinc-950 dark:text-neutral-50">
+        {label} <span className="text-red-500">*</span>
+      </Label>
+      <div className="w-full flex flex-row gap-10">
+        {modalityOptions.map((option) => {
+          const isChecked = value.includes(option.value);
+
+          return (
+            <div key={option.value} className="flex items-center space-x-2">
+              <Checkbox
+                checked={isChecked}
+                onChange={(checked: boolean) => handleCheckboxChange(option.value, checked)}
+                className="data-[state=checked]:bg-zinc-950 data-[state=checked]:border-zinc-950 dark:data-[state=checked]:bg-emerald-300 dark:data-[state=checked]:border-emerald-300"
+              />
+              <Label
+                className="flex items-center gap-2 text-sm font-normal text-zinc-950 dark:text-neutral-50 cursor-pointer"
+                onClick={() => handleCheckboxChange(option.value, !isChecked)}
+              >
+                {option.label}
+              </Label>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/ai/components/fields/ModelSelectionField.tsx

@@ -0,0 +1,134 @@
+import { Label } from '@/components/radix/Label';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/radix/Select';
+import { ModelOption } from '../../helpers';
+
+interface ModelSelectionFieldProps {
+  models: ModelOption[];
+  selectedModelId?: string;
+  onModelChange: (modelId: string) => void;
+  isReadOnly?: boolean;
+  readOnlyModelId?: string;
+  isModelConfigured?: (modelId: string) => boolean;
+  disabled?: boolean;
+}
+
+export function ModelSelectionField({
+  models,
+  selectedModelId,
+  onModelChange,
+  isReadOnly = false,
+  readOnlyModelId,
+  isModelConfigured,
+  disabled = false,
+}: ModelSelectionFieldProps) {
+  const hasModels = models.length > 0;
+
+  if (isReadOnly) {
+    return (
+      <div className="flex flex-row gap-10 items-center">
+        <Label className="w-34 text-sm font-normal text-zinc-950 dark:text-neutral-50">
+          AI Model <span className="text-red-500">*</span>
+        </Label>
+        <div className="w-full flex items-center h-9 px-3 py-2 text-sm bg-zinc-50 dark:bg-neutral-900 border border-zinc-200 dark:border-neutral-700 rounded-md text-zinc-600 dark:text-zinc-400">
+          {readOnlyModelId}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-row gap-10 items-center">
+      <Label className="w-34 text-sm font-normal text-zinc-950 dark:text-neutral-50">
+        AI Model <span className="text-red-500">*</span>
+      </Label>
+      <Select
+        value={selectedModelId || ''}
+        onValueChange={(value) => {
+          if (value) {
+            onModelChange(value);
+          }
+        }}
+        disabled={!hasModels || disabled}
+      >
+        <SelectTrigger
+          id="model"
+          className="w-full h-9 bg-transparent dark:bg-neutral-900 dark:border-neutral-700 dark:text-white"
+        >
+          <div className="flex items-center justify-between w-full">
+            {selectedModelId ? (
+              (() => {
+                const selectedModel = models.find((m) => m.value === selectedModelId);
+                if (selectedModel) {
+                  return (
+                    <>
+                      <div className="flex items-center gap-2">
+                        {selectedModel.logo ? (
+                          <selectedModel.logo className="w-5 h-5" />
+                        ) : (
+                          <div className="w-5 h-5 bg-gray-500 rounded flex items-center justify-center text-white text-xs font-bold">
+                            {selectedModel.company.slice(0, 1).toUpperCase()}
+                          </div>
+                        )}
+                        <span className="truncate">{selectedModel.label}</span>
+                      </div>
+                      <div className={`text-xs font-medium ${selectedModel.priceColor}`}>
+                        {selectedModel.priceLevel}
+                      </div>
+                    </>
+                  );
+                }
+                return <span className="text-zinc-500 dark:text-zinc-400">{selectedModelId}</span>;
+              })()
+            ) : (
+              <span className="text-zinc-500 dark:text-zinc-400">
+                {hasModels ? 'Select model' : 'No models available'}
+              </span>
+            )}
+          </div>
+        </SelectTrigger>
+        <SelectContent className="dark:bg-neutral-900 dark:border-neutral-700">
+          {hasModels ? (
+            models.map((modelOption, index) => {
+              const isConfigured = isModelConfigured?.(modelOption.value) ?? false;
+              return (
+                <SelectItem
+                  key={`${modelOption.value}-${index}`}
+                  value={modelOption.value}
+                  disabled={isConfigured}
+                  className={
+                    isConfigured
+                      ? 'dark:text-zinc-500 text-zinc-400 cursor-not-allowed'
+                      : 'dark:text-white dark:hover:bg-neutral-700'
+                  }
+                >
+                  <div className="flex items-center justify-between w-full">
+                    <div className="flex items-center gap-2">
+                      {modelOption.logo ? (
+                        <modelOption.logo className="w-5 h-5" />
+                      ) : (
+                        <span className="w-5 h-5 bg-gray-500 rounded flex items-center justify-center text-white text-xs font-bold">
+                          {modelOption.company.slice(0, 1).toUpperCase()}
+                        </span>
+                      )}
+                      <span className="truncate flex-1">
+                        {modelOption.label}
+                        {isConfigured && <span className="text-sm"> (Already configured)</span>}
+                      </span>
+                    </div>
+                    <span className={`items-end text-xs font-medium ${modelOption.priceColor}`}>
+                      {modelOption.priceLevel}
+                    </span>
+                  </div>
+                </SelectItem>
+              );
+            })
+          ) : (
+            <SelectItem value="no-models" disabled className="dark:text-zinc-400">
+              No models available for selected input/output combination
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/frontend/src/features/ai/components/fields/SystemPromptField.tsx

@@ -0,0 +1,33 @@
+import { UseFormRegister, FieldError, FieldValues, Path } from 'react-hook-form';
+import { Label } from '@/components/radix/Label';
+import { Textarea } from '@/components/radix/Textarea';
+
+interface SystemPromptFieldProps<T extends FieldValues> {
+  register: UseFormRegister<T>;
+  error?: FieldError;
+}
+
+export function SystemPromptField<T extends FieldValues>({
+  register,
+  error,
+}: SystemPromptFieldProps<T>) {
+  return (
+    <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"
+          {...register('systemPrompt' as Path<T>)}
+          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"
+        />
+        {error && <p className="text-sm text-red-600 dark:text-red-500">{error.message}</p>}
+      </div>
+    </div>
+  );
+}