@hed-hog/catalog 0.0.297 → 0.0.299

package/hedhog/frontend/app/_components/catalog-ai-form-assist-dialog.tsx.ejs

@@ -1,340 +1,340 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp } from '@hed-hog/next-app-provider';
-import { Loader2, Sparkles } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { toast } from 'sonner';
-import {
-  getCatalogLocalizedText,
-  type CatalogFormFieldDefinition,
-  type CatalogResourceDefinition,
-} from '../_lib/catalog-resources';
-
-type CatalogRecord = Record<string, unknown>;
-
-type CatalogAiSuggestionResponse = {
-  fields?: Record<string, unknown>;
-  applied_fields?: Array<{
-    key: string;
-    label: string;
-    type: string;
-    value: unknown;
-  }>;
-  product_attributes?: Array<Record<string, unknown>>;
-  warnings?: string[];
-};
-
-type CatalogAiFormAssistDialogProps = {
-  resource: string;
-  resourceConfig: CatalogResourceDefinition;
-  disabled?: boolean;
-  getCurrentValues: () => Record<string, unknown>;
-  getCurrentAttributeValues?: () => Array<Record<string, unknown>>;
-  onApply: (payload: CatalogAiSuggestionResponse) => void;
-};
-
-function serializeFieldDefinition(
-  field: CatalogFormFieldDefinition,
-  localeCode?: string | null,
-) {
-  return {
-    key: field.key,
-    label: getCatalogLocalizedText(field.label, localeCode),
-    type: field.type,
-    required: Boolean(field.required),
-    options: (field.options ?? []).map((option) => ({
-      value: option.value,
-      label: getCatalogLocalizedText(option.label, localeCode),
-    })),
-    relation: field.relation
-      ? {
-          endpoint: field.relation.endpoint,
-          resource: field.relation.resource,
-          labelKeys: field.relation.labelKeys,
-        }
-      : null,
-  };
-}
-
-function renderSuggestionValue(value: unknown) {
-  if (value === null || value === undefined || value === '') {
-    return '-';
-  }
-
-  if (typeof value === 'object') {
-    return JSON.stringify(value);
-  }
-
-  return String(value);
-}
-
-export function CatalogAiFormAssistDialog({
-  resource,
-  resourceConfig,
-  disabled,
-  getCurrentValues,
-  getCurrentAttributeValues,
-  onApply,
-}: CatalogAiFormAssistDialogProps) {
-  const { request, currentLocaleCode } = useApp();
-  const t = useTranslations('catalog');
-  const [open, setOpen] = useState(false);
-  const [prompt, setPrompt] = useState('');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [suggestion, setSuggestion] = useState<CatalogAiSuggestionResponse | null>(
-    null,
-  );
-  const [generationError, setGenerationError] = useState<string | null>(null);
-  const fieldContext = useMemo(
-    () =>
-      resourceConfig.formSections.flatMap((section) =>
-        section.fields.map((field) =>
-          serializeFieldDefinition(field, currentLocaleCode),
-        ),
-      ),
-    [currentLocaleCode, resourceConfig],
-  );
-
-  const handleGenerate = async () => {
-    const trimmedPrompt = prompt.trim();
-
-    if (!trimmedPrompt) {
-      toast.error(t('aiAssist.errors.promptRequired'));
-      return;
-    }
-
-    setIsGenerating(true);
-    setGenerationError(null);
-
-    try {
-      const response = await request<CatalogAiSuggestionResponse>({
-        url: `/catalog/forms/${resource}/ai-assist`,
-        method: 'POST',
-        data: {
-          prompt: trimmedPrompt,
-          fields: fieldContext,
-          current_values: getCurrentValues(),
-          current_attribute_values: getCurrentAttributeValues?.() ?? [],
-        },
-      });
-
-      setSuggestion((response.data ?? null) as CatalogAiSuggestionResponse | null);
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : t('aiAssist.errors.generate');
-      setGenerationError(message);
-      toast.error(message);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleApply = () => {
-    if (!suggestion) {
-      return;
-    }
-
-    onApply(suggestion);
-    setOpen(false);
-    toast.success(t('aiAssist.toasts.applied'));
-  };
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(nextOpen) => {
-        setOpen(nextOpen);
-
-        if (!nextOpen) {
-          setGenerationError(null);
-        }
-      }}
-    >
-      <DialogTrigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          disabled={disabled}
-        >
-          <Sparkles className="mr-2 h-4 w-4" />
-          {t('aiAssist.button')}
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>{t('aiAssist.title')}</DialogTitle>
-          <DialogDescription>
-            {t('aiAssist.description', {
-              resource: getCatalogLocalizedText(
-                resourceConfig.singularLabel,
-                currentLocaleCode,
-              ),
-            })}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <div className="text-sm font-medium">{t('aiAssist.promptLabel')}</div>
-            <Textarea
-              value={prompt}
-              onChange={(event) => setPrompt(event.target.value)}
-              placeholder={t('aiAssist.promptPlaceholder')}
-              className="min-h-32"
-            />
-            <p className="text-xs text-muted-foreground">
-              {t('aiAssist.promptHint')}
-            </p>
-          </div>
-
-          {generationError ? (
-            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
-              {generationError}
-            </div>
-          ) : null}
-
-          {suggestion ? (
-            <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
-              <div className="space-y-1">
-                <div className="text-sm font-medium">
-                  {t('aiAssist.previewTitle')}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  {t('aiAssist.previewDescription')}
-                </p>
-              </div>
-
-              <ScrollArea className="max-h-72 pr-4">
-                <div className="space-y-4">
-                  {suggestion.applied_fields?.length ? (
-                    <div className="space-y-2">
-                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t('aiAssist.sections.fields')}
-                      </div>
-                      <div className="space-y-2">
-                        {suggestion.applied_fields.map((field) => (
-                          <div
-                            key={field.key}
-                            className="rounded-md border bg-background p-3"
-                          >
-                            <div className="text-sm font-medium">{field.label}</div>
-                            <div className="text-xs text-muted-foreground">
-                              {field.key}
-                            </div>
-                            <div className="mt-2 text-sm">
-                              {renderSuggestionValue(field.value)}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-
-                  {suggestion.product_attributes?.length ? (
-                    <div className="space-y-2">
-                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t('aiAssist.sections.productAttributes')}
-                      </div>
-                      <div className="space-y-2">
-                        {suggestion.product_attributes.map((attribute) => (
-                          <div
-                            key={String(attribute.attribute_id ?? attribute.attribute_slug)}
-                            className="rounded-md border bg-background p-3"
-                          >
-                            <div className="flex items-center justify-between gap-2">
-                              <div className="text-sm font-medium">
-                                {String(
-                                  attribute.attribute_name ??
-                                    attribute.attribute_slug ??
-                                    attribute.attribute_id,
-                                )}
-                              </div>
-                              {attribute.group_name ? (
-                                <Badge variant="secondary">
-                                  {String(attribute.group_name)}
-                                </Badge>
-                              ) : null}
-                            </div>
-                            <div className="mt-2 text-sm">
-                              {renderSuggestionValue(
-                                attribute.value_text ??
-                                  attribute.value_number ??
-                                  attribute.value_boolean ??
-                                  attribute.attribute_option_id ??
-                                  null,
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-
-                  {suggestion.warnings?.length ? (
-                    <div className="space-y-2">
-                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                        {t('aiAssist.sections.warnings')}
-                      </div>
-                      <div className="space-y-2">
-                        {suggestion.warnings.map((warning, index) => (
-                          <div
-                            key={`${warning}-${index}`}
-                            className="rounded-md border border-amber-300/40 bg-amber-50 p-3 text-sm text-amber-900"
-                          >
-                            {warning}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-                </div>
-              </ScrollArea>
-            </div>
-          ) : null}
-        </div>
-
-        <DialogFooter className="gap-2 sm:justify-between">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={handleGenerate}
-            disabled={isGenerating || disabled}
-          >
-            {isGenerating ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            ) : (
-              <Sparkles className="mr-2 h-4 w-4" />
-            )}
-            {t('aiAssist.generate')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleApply}
-            disabled={
-              !suggestion ||
-              (!suggestion.applied_fields?.length &&
-                !suggestion.product_attributes?.length)
-            }
-          >
-            {t('aiAssist.apply')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Loader2, Sparkles } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  getCatalogLocalizedText,
+  type CatalogFormFieldDefinition,
+  type CatalogResourceDefinition,
+} from '../_lib/catalog-resources';
+
+type CatalogRecord = Record<string, unknown>;
+
+type CatalogAiSuggestionResponse = {
+  fields?: Record<string, unknown>;
+  applied_fields?: Array<{
+    key: string;
+    label: string;
+    type: string;
+    value: unknown;
+  }>;
+  product_attributes?: Array<Record<string, unknown>>;
+  warnings?: string[];
+};
+
+type CatalogAiFormAssistDialogProps = {
+  resource: string;
+  resourceConfig: CatalogResourceDefinition;
+  disabled?: boolean;
+  getCurrentValues: () => Record<string, unknown>;
+  getCurrentAttributeValues?: () => Array<Record<string, unknown>>;
+  onApply: (payload: CatalogAiSuggestionResponse) => void;
+};
+
+function serializeFieldDefinition(
+  field: CatalogFormFieldDefinition,
+  localeCode?: string | null,
+) {
+  return {
+    key: field.key,
+    label: getCatalogLocalizedText(field.label, localeCode),
+    type: field.type,
+    required: Boolean(field.required),
+    options: (field.options ?? []).map((option) => ({
+      value: option.value,
+      label: getCatalogLocalizedText(option.label, localeCode),
+    })),
+    relation: field.relation
+      ? {
+          endpoint: field.relation.endpoint,
+          resource: field.relation.resource,
+          labelKeys: field.relation.labelKeys,
+        }
+      : null,
+  };
+}
+
+function renderSuggestionValue(value: unknown) {
+  if (value === null || value === undefined || value === '') {
+    return '-';
+  }
+
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+
+  return String(value);
+}
+
+export function CatalogAiFormAssistDialog({
+  resource,
+  resourceConfig,
+  disabled,
+  getCurrentValues,
+  getCurrentAttributeValues,
+  onApply,
+}: CatalogAiFormAssistDialogProps) {
+  const { request, currentLocaleCode } = useApp();
+  const t = useTranslations('catalog');
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [suggestion, setSuggestion] = useState<CatalogAiSuggestionResponse | null>(
+    null,
+  );
+  const [generationError, setGenerationError] = useState<string | null>(null);
+  const fieldContext = useMemo(
+    () =>
+      resourceConfig.formSections.flatMap((section) =>
+        section.fields.map((field) =>
+          serializeFieldDefinition(field, currentLocaleCode),
+        ),
+      ),
+    [currentLocaleCode, resourceConfig],
+  );
+
+  const handleGenerate = async () => {
+    const trimmedPrompt = prompt.trim();
+
+    if (!trimmedPrompt) {
+      toast.error(t('aiAssist.errors.promptRequired'));
+      return;
+    }
+
+    setIsGenerating(true);
+    setGenerationError(null);
+
+    try {
+      const response = await request<CatalogAiSuggestionResponse>({
+        url: `/catalog/forms/${resource}/ai-assist`,
+        method: 'POST',
+        data: {
+          prompt: trimmedPrompt,
+          fields: fieldContext,
+          current_values: getCurrentValues(),
+          current_attribute_values: getCurrentAttributeValues?.() ?? [],
+        },
+      });
+
+      setSuggestion((response.data ?? null) as CatalogAiSuggestionResponse | null);
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : t('aiAssist.errors.generate');
+      setGenerationError(message);
+      toast.error(message);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleApply = () => {
+    if (!suggestion) {
+      return;
+    }
+
+    onApply(suggestion);
+    setOpen(false);
+    toast.success(t('aiAssist.toasts.applied'));
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+
+        if (!nextOpen) {
+          setGenerationError(null);
+        }
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={disabled}
+        >
+          <Sparkles className="mr-2 h-4 w-4" />
+          {t('aiAssist.button')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{t('aiAssist.title')}</DialogTitle>
+          <DialogDescription>
+            {t('aiAssist.description', {
+              resource: getCatalogLocalizedText(
+                resourceConfig.singularLabel,
+                currentLocaleCode,
+              ),
+            })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <div className="text-sm font-medium">{t('aiAssist.promptLabel')}</div>
+            <Textarea
+              value={prompt}
+              onChange={(event) => setPrompt(event.target.value)}
+              placeholder={t('aiAssist.promptPlaceholder')}
+              className="min-h-32"
+            />
+            <p className="text-xs text-muted-foreground">
+              {t('aiAssist.promptHint')}
+            </p>
+          </div>
+
+          {generationError ? (
+            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+              {generationError}
+            </div>
+          ) : null}
+
+          {suggestion ? (
+            <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
+              <div className="space-y-1">
+                <div className="text-sm font-medium">
+                  {t('aiAssist.previewTitle')}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {t('aiAssist.previewDescription')}
+                </p>
+              </div>
+
+              <ScrollArea className="max-h-72 pr-4">
+                <div className="space-y-4">
+                  {suggestion.applied_fields?.length ? (
+                    <div className="space-y-2">
+                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                        {t('aiAssist.sections.fields')}
+                      </div>
+                      <div className="space-y-2">
+                        {suggestion.applied_fields.map((field) => (
+                          <div
+                            key={field.key}
+                            className="rounded-md border bg-background p-3"
+                          >
+                            <div className="text-sm font-medium">{field.label}</div>
+                            <div className="text-xs text-muted-foreground">
+                              {field.key}
+                            </div>
+                            <div className="mt-2 text-sm">
+                              {renderSuggestionValue(field.value)}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {suggestion.product_attributes?.length ? (
+                    <div className="space-y-2">
+                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                        {t('aiAssist.sections.productAttributes')}
+                      </div>
+                      <div className="space-y-2">
+                        {suggestion.product_attributes.map((attribute) => (
+                          <div
+                            key={String(attribute.attribute_id ?? attribute.attribute_slug)}
+                            className="rounded-md border bg-background p-3"
+                          >
+                            <div className="flex items-center justify-between gap-2">
+                              <div className="text-sm font-medium">
+                                {String(
+                                  attribute.attribute_name ??
+                                    attribute.attribute_slug ??
+                                    attribute.attribute_id,
+                                )}
+                              </div>
+                              {attribute.group_name ? (
+                                <Badge variant="secondary">
+                                  {String(attribute.group_name)}
+                                </Badge>
+                              ) : null}
+                            </div>
+                            <div className="mt-2 text-sm">
+                              {renderSuggestionValue(
+                                attribute.value_text ??
+                                  attribute.value_number ??
+                                  attribute.value_boolean ??
+                                  attribute.attribute_option_id ??
+                                  null,
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {suggestion.warnings?.length ? (
+                    <div className="space-y-2">
+                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                        {t('aiAssist.sections.warnings')}
+                      </div>
+                      <div className="space-y-2">
+                        {suggestion.warnings.map((warning, index) => (
+                          <div
+                            key={`${warning}-${index}`}
+                            className="rounded-md border border-amber-300/40 bg-amber-50 p-3 text-sm text-amber-900"
+                          >
+                            {warning}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              </ScrollArea>
+            </div>
+          ) : null}
+        </div>
+
+        <DialogFooter className="gap-2 sm:justify-between">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleGenerate}
+            disabled={isGenerating || disabled}
+          >
+            {isGenerating ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Sparkles className="mr-2 h-4 w-4" />
+            )}
+            {t('aiAssist.generate')}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleApply}
+            disabled={
+              !suggestion ||
+              (!suggestion.applied_fields?.length &&
+                !suggestion.product_attributes?.length)
+            }
+          >
+            {t('aiAssist.apply')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}