insforge 0.3.2 → 1.2.10

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

@@ -1,76 +0,0 @@
-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

@@ -1,222 +0,0 @@
-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/fields/ModalityField.tsx

@@ -1,87 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

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

package/frontend/src/features/auth/components/AddOAuthDialog.tsx

@@ -1,106 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from '@/components/radix/Button';
-import { Checkbox } from '@/components/Checkbox';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/radix/Dialog';
-import { OAuthProviderInfo } from './AuthMethodTab';
-
-interface AddOAuthDialogProps {
-  providers: OAuthProviderInfo[];
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: (selectedId: 'google' | 'github') => void;
-  enabledProviders: Record<'google' | 'github', boolean>;
-}
-
-export function AddOAuthDialog({
-  providers,
-  open,
-  onOpenChange,
-  onConfirm,
-  enabledProviders,
-}: AddOAuthDialogProps) {
-  const [selectedId, setSelectedId] = useState<'google' | 'github' | null>(null);
-
-  // Reset selection when dialog opens
-  useEffect(() => {
-    if (open) {
-      setSelectedId(null);
-    }
-  }, [open]);
-
-  const hasSelection = selectedId !== null;
-
-  // Filter out already enabled providers
-  const availableProviders = providers.filter((provider) => !enabledProviders[provider.id]);
-
-  const selectProvider = (id: 'google' | 'github') => {
-    setSelectedId(id);
-  };
-
-  const handleConfirm = () => {
-    if (selectedId) {
-      onConfirm(selectedId);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[600px] p-0 gap-0 dark:bg-neutral-800">
-        <DialogHeader className="pl-6 pr-4 py-3 border-b border-zinc-200 dark:border-neutral-700">
-          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
-            Add Authentication
-          </DialogTitle>
-        </DialogHeader>
-        <div className="p-6">
-          {availableProviders.length > 0 ? (
-            <div className="grid grid-cols-2 gap-3">
-              {availableProviders.map((p) => (
-                <button
-                  key={p.id}
-                  onClick={() => selectProvider(p.id)}
-                  className="flex items-center justify-start gap-6 rounded-[8px] p-3 bg-white hover:bg-zinc-100 dark:bg-[#333333] dark:hover:bg-neutral-700 border border-neutral-200 dark:border-neutral-700 transition-colors"
-                >
-                  <div className="w-4 h-4" onClick={(e) => e.stopPropagation()}>
-                    <Checkbox checked={selectedId === p.id} onChange={() => selectProvider(p.id)} />
-                  </div>
-                  <div className="flex items-center gap-3">
-                    {p.icon}
-                    <p className="text-sm font-medium text-zinc-950 dark:text-white">{p.name}</p>
-                  </div>
-                </button>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-8">
-              <p className="text-sm text-zinc-500 dark:text-neutral-400">
-                All authentication methods have been added.
-              </p>
-            </div>
-          )}
-        </div>
-        <DialogFooter className="px-6 py-4 border-t border-zinc-200 dark:border-neutral-700">
-          <Button
-            variant="outline"
-            className="w-fit h-9 px-3 py-2 rounded-sm dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
-            onClick={() => onOpenChange(false)}
-          >
-            Cancel
-          </Button>
-          <Button
-            className="h-9 px-3 py-2 rounded-sm dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400"
-            onClick={handleConfirm}
-            disabled={!hasSelection}
-          >
-            Add OAuth
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}