@hed-hog/catalog 0.0.293 → 0.0.295

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

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