insforge 1.3.0 → 1.4.8

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

@@ -1,200 +1,200 @@
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-} from '@/components';
-
-import { MoreHorizontal, Pencil, Trash2, DollarSign } from 'lucide-react';
-import {
-  //   formatTokenCount,
-  getModalityIcon,
-  ModelOption,
-} from '../helpers';
-import { cn } from '@/lib/utils/utils';
-
-interface AIModelCardProps {
-  config: ModelOption;
-  onEdit?: (id: string) => void;
-  onDelete?: (id: string) => void;
-  mode?: 'configured' | 'selectable';
-  isSelected?: boolean;
-  onSelect?: () => void;
-  isDisabled?: boolean;
-}
-
-export function AIModelCard({
-  config,
-  onEdit,
-  onDelete,
-  mode = 'configured',
-  isSelected = false,
-  onSelect,
-  isDisabled = false,
-}: AIModelCardProps) {
-  const isSelectableMode = mode === 'selectable';
-
-  const handleCardClick = () => {
-    if (isSelectableMode && !isDisabled && onSelect) {
-      onSelect();
-    }
-  };
-
-  return (
-    <TooltipProvider>
-      <div
-        className={cn(
-          'relative py-5 px-4 bg-white dark:bg-[#333333] rounded-[8px] transition-all duration-200',
-          isSelectableMode && !isDisabled && 'cursor-pointer',
-          isSelectableMode && isSelected
-            ? 'border-2 border-zinc-700 dark:border-emerald-300'
-            : 'border-2 border-neutral-200 dark:border-neutral-700',
-          isSelectableMode &&
-            !isDisabled &&
-            !isSelected &&
-            'hover:shadow-md hover:bg-neutral-100 dark:hover:bg-neutral-700',
-          isDisabled && 'opacity-50 cursor-not-allowed'
-        )}
-        onClick={handleCardClick}
-      >
-        {/* Configured mode: More button */}
-        {mode === 'configured' && onEdit && onDelete && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 absolute top-3 right-3"
-              >
-                <MoreHorizontal className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                className="flex flex-row gap-3 px-3 py-2 cursor-pointer"
-                onClick={() => onEdit(config.id)}
-              >
-                <Pencil className="w-4 h-4" /> System Prompt
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => onDelete(config.id)}
-                className="text-red-600 dark:text-red-400 flex flex-row gap-3 px-3 py-2 cursor-pointer"
-              >
-                <Trash2 className="w-4 h-4" /> Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-
-        {/* Selectable mode: Added badge */}
-        {isSelectableMode && isDisabled && (
-          <div className="absolute top-3 right-3 px-2 py-1 text-xs font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 rounded">
-            Added
-          </div>
-        )}
-
-        {/* Header with logo */}
-        <div className="flex items-start justify-between mb-4">
-          <div className="flex items-center gap-3">
-            {/* Provider Logo */}
-            <Tooltip key={config.providerName}>
-              <TooltipTrigger asChild>
-                <div className="w-10 h-10">
-                  {config.logo ? (
-                    <config.logo className="w-10 h-10 dark:text-white" />
-                  ) : (
-                    <div className="w-10 h-10 bg-gray-500 rounded flex items-center justify-center text-white text-sm font-bold">
-                      {config.providerName.charAt(0).toUpperCase()}
-                    </div>
-                  )}
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="top" sideOffset={8}>
-                <p className="capitalize">{config.providerName}</p>
-              </TooltipContent>
-            </Tooltip>
-
-            {/* Model Info */}
-            <p
-              className="font-medium text-sm text-zinc-950 dark:text-zinc-50 max-h-10 line-clamp-2"
-              title={config.modelName ? config.modelName : config.providerName}
-            >
-              {config.modelName ? config.modelName : config.providerName}
-            </p>
-            {(!isSelectableMode || (isSelectableMode && isDisabled)) && <div className="w-6" />}
-          </div>
-        </div>
-
-        <div className="h-px bg-neutral-200 dark:bg-neutral-700 my-3" />
-
-        {/* Modality indicators - use config modalities directly */}
-        <div className="flex flex-col gap-3 items-stretch">
-          <div className="flex items-center justify-between">
-            <span className="text-black dark:text-white">Input</span>
-            <div className="flex items-center gap-2">
-              {config.inputModality.map((modality) => {
-                const IconComponent = getModalityIcon(modality);
-                return (
-                  <Tooltip key={modality}>
-                    <TooltipTrigger asChild>
-                      <IconComponent className="w-5 h-5 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white transition-colors duration-200" />
-                    </TooltipTrigger>
-                    <TooltipContent side="top" sideOffset={8}>
-                      <p className="capitalize">{modality}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                );
-              })}
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <span className="text-black dark:text-white">Output</span>
-            <div className="flex items-center gap-2">
-              {config.outputModality.map((modality) => {
-                const IconComponent = getModalityIcon(modality);
-                return (
-                  <Tooltip key={modality}>
-                    <TooltipTrigger asChild>
-                      <IconComponent className="w-5 h-5 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white transition-colors duration-200" />
-                    </TooltipTrigger>
-                    <TooltipContent side="top" sideOffset={8}>
-                      <p className="capitalize">{modality}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                );
-              })}
-            </div>
-          </div>
-
-          {isSelectableMode ? (
-            <div className="flex items-center justify-between">
-              <span className="text-black dark:text-white">Credit Usage</span>
-              <div className="flex items-center">
-                {typeof config.priceLevel === 'number' && config.priceLevel > 0 ? (
-                  Array.from({ length: config.priceLevel }).map((_, i) => (
-                    <div key={i} className="w-5 h-5 flex items-center justify-center">
-                      <DollarSign className="w-4 h-4 text-neutral-500 dark:text-neutral-400" />
-                    </div>
-                  ))
-                ) : (
-                  <span className="text-sm text-neutral-500 dark:text-neutral-400">Free</span>
-                )}
-              </div>
-            </div>
-          ) : (
-            <div className="flex items-center justify-between text-sm text-black dark:text-white">
-              <span>Requests</span>
-              <span>{config.usageStats?.totalRequests || 0}</span>
-            </div>
-          )}
-        </div>
-      </div>
-    </TooltipProvider>
-  );
-}
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from '@/components';
+
+import { MoreHorizontal, Pencil, Trash2, DollarSign } from 'lucide-react';
+import {
+  //   formatTokenCount,
+  getModalityIcon,
+  ModelOption,
+} from '../helpers';
+import { cn } from '@/lib/utils/utils';
+
+interface AIModelCardProps {
+  config: ModelOption;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  mode?: 'configured' | 'selectable';
+  isSelected?: boolean;
+  onSelect?: () => void;
+  isDisabled?: boolean;
+}
+
+export function AIModelCard({
+  config,
+  onEdit,
+  onDelete,
+  mode = 'configured',
+  isSelected = false,
+  onSelect,
+  isDisabled = false,
+}: AIModelCardProps) {
+  const isSelectableMode = mode === 'selectable';
+
+  const handleCardClick = () => {
+    if (isSelectableMode && !isDisabled && onSelect) {
+      onSelect();
+    }
+  };
+
+  return (
+    <TooltipProvider>
+      <div
+        className={cn(
+          'relative py-5 px-4 bg-white dark:bg-[#333333] rounded-[8px] transition-all duration-200',
+          isSelectableMode && !isDisabled && 'cursor-pointer',
+          isSelectableMode && isSelected
+            ? 'border-2 border-zinc-700 dark:border-emerald-300'
+            : 'border-2 border-neutral-200 dark:border-neutral-700',
+          isSelectableMode &&
+            !isDisabled &&
+            !isSelected &&
+            'hover:shadow-md hover:bg-neutral-100 dark:hover:bg-neutral-700',
+          isDisabled && 'opacity-50 cursor-not-allowed'
+        )}
+        onClick={handleCardClick}
+      >
+        {/* Configured mode: More button */}
+        {mode === 'configured' && onEdit && onDelete && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 absolute top-3 right-3"
+              >
+                <MoreHorizontal className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                className="flex flex-row gap-3 px-3 py-2 cursor-pointer"
+                onClick={() => onEdit(config.id)}
+              >
+                <Pencil className="w-4 h-4" /> System Prompt
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onDelete(config.id)}
+                className="text-red-600 dark:text-red-400 flex flex-row gap-3 px-3 py-2 cursor-pointer"
+              >
+                <Trash2 className="w-4 h-4" /> Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {/* Selectable mode: Added badge */}
+        {isSelectableMode && isDisabled && (
+          <div className="absolute top-3 right-3 px-2 py-1 text-xs font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 rounded">
+            Added
+          </div>
+        )}
+
+        {/* Header with logo */}
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            {/* Provider Logo */}
+            <Tooltip key={config.providerName}>
+              <TooltipTrigger asChild>
+                <div className="w-10 h-10">
+                  {config.logo ? (
+                    <config.logo className="w-10 h-10 dark:text-white" />
+                  ) : (
+                    <div className="w-10 h-10 bg-gray-500 rounded flex items-center justify-center text-white text-sm font-bold">
+                      {config.providerName.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="top" sideOffset={8}>
+                <p className="capitalize">{config.providerName}</p>
+              </TooltipContent>
+            </Tooltip>
+
+            {/* Model Info */}
+            <p
+              className="font-medium text-sm text-zinc-950 dark:text-zinc-50 max-h-10 line-clamp-2"
+              title={config.modelName ? config.modelName : config.providerName}
+            >
+              {config.modelName ? config.modelName : config.providerName}
+            </p>
+            {(!isSelectableMode || (isSelectableMode && isDisabled)) && <div className="w-6" />}
+          </div>
+        </div>
+
+        <div className="h-px bg-neutral-200 dark:bg-neutral-700 my-3" />
+
+        {/* Modality indicators - use config modalities directly */}
+        <div className="flex flex-col gap-3 items-stretch">
+          <div className="flex items-center justify-between">
+            <span className="text-black dark:text-white">Input</span>
+            <div className="flex items-center gap-2">
+              {config.inputModality.map((modality) => {
+                const IconComponent = getModalityIcon(modality);
+                return (
+                  <Tooltip key={modality}>
+                    <TooltipTrigger asChild>
+                      <IconComponent className="w-5 h-5 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white transition-colors duration-200" />
+                    </TooltipTrigger>
+                    <TooltipContent side="top" sideOffset={8}>
+                      <p className="capitalize">{modality}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <span className="text-black dark:text-white">Output</span>
+            <div className="flex items-center gap-2">
+              {config.outputModality.map((modality) => {
+                const IconComponent = getModalityIcon(modality);
+                return (
+                  <Tooltip key={modality}>
+                    <TooltipTrigger asChild>
+                      <IconComponent className="w-5 h-5 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white transition-colors duration-200" />
+                    </TooltipTrigger>
+                    <TooltipContent side="top" sideOffset={8}>
+                      <p className="capitalize">{modality}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                );
+              })}
+            </div>
+          </div>
+
+          {isSelectableMode ? (
+            <div className="flex items-center justify-between">
+              <span className="text-black dark:text-white">Credit Usage</span>
+              <div className="flex items-center">
+                {typeof config.priceLevel === 'number' && config.priceLevel > 0 ? (
+                  Array.from({ length: config.priceLevel }).map((_, i) => (
+                    <div key={i} className="w-5 h-5 flex items-center justify-center">
+                      <DollarSign className="w-4 h-4 text-neutral-500 dark:text-neutral-400" />
+                    </div>
+                  ))
+                ) : (
+                  <span className="text-sm text-neutral-500 dark:text-neutral-400">Free</span>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between text-sm text-black dark:text-white">
+              <span>Requests</span>
+              <span>{config.usageStats?.totalRequests || 0}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}

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

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Sparkles } from 'lucide-react';
-
-interface AIEmptyStateProps {
-  title: string;
-  description?: string;
-}
-
-const AIEmptyState: React.FC<AIEmptyStateProps> = ({ title, description }) => {
-  return (
-    <div className="flex flex-col items-center justify-center py-8 text-center gap-3 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
-      <Sparkles 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">{title}</p>
-        {description && (
-          <p className="text-neutral-500 dark:text-neutral-400 text-xs max-w-md">{description}</p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default AIEmptyState;
+import React from 'react';
+import { Sparkles } from 'lucide-react';
+
+interface AIEmptyStateProps {
+  title: string;
+  description?: string;
+}
+
+const AIEmptyState: React.FC<AIEmptyStateProps> = ({ title, description }) => {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center gap-3 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
+      <Sparkles 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">{title}</p>
+        {description && (
+          <p className="text-neutral-500 dark:text-neutral-400 text-xs max-w-md">{description}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AIEmptyState;

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

@@ -1,101 +1,102 @@
-import { Checkbox, Label } from '@/components';
-import { ModalitySchema } from '@insforge/shared-schemas';
-
-interface ModalityFilterSidebarProps {
-  inputModalities: ModalitySchema[];
-  outputModalities: ModalitySchema[];
-  onInputChange: (modalities: ModalitySchema[]) => void;
-  onOutputChange: (modalities: ModalitySchema[]) => void;
-}
-
-const modalityOptions: Array<{
-  value: ModalitySchema;
-  label: string;
-}> = [
-  { value: 'text', label: 'Text' },
-  { value: 'image', label: 'Image' },
-];
-
-export function ModalityFilterSidebar({
-  inputModalities,
-  outputModalities,
-  onInputChange,
-  onOutputChange,
-}: ModalityFilterSidebarProps) {
-  const handleModalityToggle = (
-    type: 'input' | 'output',
-    modality: ModalitySchema,
-    checked: boolean
-  ) => {
-    const currentModalities = type === 'input' ? inputModalities : outputModalities;
-    const setModalities = type === 'input' ? onInputChange : onOutputChange;
-
-    if (checked) {
-      setModalities([...currentModalities, modality]);
-    } else {
-      setModalities(currentModalities.filter((m) => m !== modality));
-    }
-  };
-
-  return (
-    <div className="w-30 flex-shrink-0 flex flex-col gap-6">
-      <p className="text-base font-medium text-zinc-950 dark:text-neutral-50">Filters</p>
-
-      {/* Input Section */}
-      <div className="flex flex-col gap-3">
-        <Label className="text-sm font-normal text-zinc-950 dark:text-neutral-50 block">
-          Input
-        </Label>
-        <div className="flex flex-col gap-4">
-          {modalityOptions.map((option) => {
-            const isChecked = inputModalities.includes(option.value);
-            return (
-              <div key={option.value} className="flex items-center gap-x-2">
-                <Checkbox
-                  checked={isChecked}
-                  onChange={(checked: boolean) =>
-                    handleModalityToggle('input', option.value, checked)
-                  }
-                />
-                <Label
-                  className="text-sm font-normal text-zinc-950 dark:text-white cursor-pointer"
-                  onClick={() => handleModalityToggle('input', option.value, !isChecked)}
-                >
-                  {option.label}
-                </Label>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Output Section */}
-      <div className="flex flex-col gap-3">
-        <Label className="text-sm font-normal text-zinc-950 dark:text-neutral-50 block">
-          Output
-        </Label>
-        <div className="flex flex-col gap-4">
-          {modalityOptions.map((option) => {
-            const isChecked = outputModalities.includes(option.value);
-            return (
-              <div key={option.value} className="flex items-center gap-x-2">
-                <Checkbox
-                  checked={isChecked}
-                  onChange={(checked: boolean) =>
-                    handleModalityToggle('output', option.value, checked)
-                  }
-                />
-                <Label
-                  className="text-sm font-normal text-zinc-950 dark:text-white cursor-pointer"
-                  onClick={() => handleModalityToggle('output', option.value, !isChecked)}
-                >
-                  {option.label}
-                </Label>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
+import { Checkbox, Label } from '@/components';
+import { ModalitySchema } from '@insforge/shared-schemas';
+
+interface ModalityFilterSidebarProps {
+  inputModalities: ModalitySchema[];
+  outputModalities: ModalitySchema[];
+  onInputChange: (modalities: ModalitySchema[]) => void;
+  onOutputChange: (modalities: ModalitySchema[]) => void;
+}
+
+const modalityOptions: Array<{
+  value: ModalitySchema;
+  label: string;
+}> = [
+  { value: 'text', label: 'Text' },
+  { value: 'image', label: 'Image' },
+  { value: 'audio', label: 'Audio' },
+];
+
+export function ModalityFilterSidebar({
+  inputModalities,
+  outputModalities,
+  onInputChange,
+  onOutputChange,
+}: ModalityFilterSidebarProps) {
+  const handleModalityToggle = (
+    type: 'input' | 'output',
+    modality: ModalitySchema,
+    checked: boolean
+  ) => {
+    const currentModalities = type === 'input' ? inputModalities : outputModalities;
+    const setModalities = type === 'input' ? onInputChange : onOutputChange;
+
+    if (checked) {
+      setModalities([...currentModalities, modality]);
+    } else {
+      setModalities(currentModalities.filter((m) => m !== modality));
+    }
+  };
+
+  return (
+    <div className="w-30 flex-shrink-0 flex flex-col gap-6">
+      <p className="text-base font-medium text-zinc-950 dark:text-neutral-50">Filters</p>
+
+      {/* Input Section */}
+      <div className="flex flex-col gap-3">
+        <Label className="text-sm font-normal text-zinc-950 dark:text-neutral-50 block">
+          Input
+        </Label>
+        <div className="flex flex-col gap-4">
+          {modalityOptions.map((option) => {
+            const isChecked = inputModalities.includes(option.value);
+            return (
+              <div key={option.value} className="flex items-center gap-x-2">
+                <Checkbox
+                  checked={isChecked}
+                  onChange={(checked: boolean) =>
+                    handleModalityToggle('input', option.value, checked)
+                  }
+                />
+                <Label
+                  className="text-sm font-normal text-zinc-950 dark:text-white cursor-pointer"
+                  onClick={() => handleModalityToggle('input', option.value, !isChecked)}
+                >
+                  {option.label}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Output Section */}
+      <div className="flex flex-col gap-3">
+        <Label className="text-sm font-normal text-zinc-950 dark:text-neutral-50 block">
+          Output
+        </Label>
+        <div className="flex flex-col gap-4">
+          {modalityOptions.map((option) => {
+            const isChecked = outputModalities.includes(option.value);
+            return (
+              <div key={option.value} className="flex items-center gap-x-2">
+                <Checkbox
+                  checked={isChecked}
+                  onChange={(checked: boolean) =>
+                    handleModalityToggle('output', option.value, checked)
+                  }
+                />
+                <Label
+                  className="text-sm font-normal text-zinc-950 dark:text-white cursor-pointer"
+                  onClick={() => handleModalityToggle('output', option.value, !isChecked)}
+                >
+                  {option.label}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}