@hed-hog/core 0.0.387 → 0.0.390

package/hedhog/frontend/app/ai_instruction/_components/ai-instruction-form.tsx.ejs

@@ -0,0 +1,580 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import { AlertTriangle, Copy, Lock, RotateCcw, ShieldAlert } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+import {
+  estimateTokens,
+  extractPlaceholders,
+  normalizeVariables,
+  validateTemplate,
+  type VariableSpec,
+} from '../_lib/prompt-template';
+import {
+  getErrorMessage,
+  type AiInstruction,
+  type AiPromptRegistryEntry,
+} from '../_lib/types';
+import { AiInstructionPreviewPanel } from './ai-instruction-preview';
+import { AiInstructionVersions } from './ai-instruction-versions';
+
+const DRAFT_STORAGE_KEY = 'core-ai-instruction-form-draft';
+
+type FormState = {
+  name: string;
+  content: string;
+  locale: string;
+  is_active: boolean;
+  model: string;
+  temperature: string;
+  max_tokens: string;
+  change_note: string;
+};
+
+type AiInstructionFormProps = {
+  instruction: AiInstruction;
+  registryEntry?: AiPromptRegistryEntry;
+  onSaved: () => void;
+  onClose: () => void;
+};
+
+function toFormState(instruction: AiInstruction): FormState {
+  return {
+    name: instruction.name,
+    content: instruction.content,
+    locale: instruction.locale,
+    is_active: instruction.is_active,
+    model: instruction.model ?? '',
+    temperature: instruction.temperature === null ? '' : String(instruction.temperature),
+    max_tokens: instruction.max_tokens === null ? '' : String(instruction.max_tokens),
+    change_note: '',
+  };
+}
+
+export function AiInstructionForm({
+  instruction,
+  registryEntry,
+  onSaved,
+  onClose,
+}: AiInstructionFormProps) {
+  const { request } = useApp();
+  const t = useTranslations('core.AiInstructionPage');
+
+  const [state, setState] = useState<FormState>(() => toFormState(instruction));
+  const [isSaving, setIsSaving] = useState(false);
+  const [isUnlocked, setIsUnlocked] = useState(false);
+  const [unlockConfirmation, setUnlockConfirmation] = useState('');
+  const [isUnlockDialogOpen, setIsUnlockDialogOpen] = useState(false);
+
+  const isDirty = useMemo(() => {
+    const initial = toFormState(instruction);
+    return (Object.keys(initial) as Array<keyof FormState>).some(
+      (key) => key !== 'change_note' && state[key] !== initial[key]
+    );
+  }, [instruction, state]);
+
+  const contentChanged = state.content !== instruction.content;
+  const readOnly = instruction.is_locked && !isUnlocked;
+
+  const { clearDraft, loadDraft } = useFormDraft<{ id: number; values: FormState }>({
+    storageKey: DRAFT_STORAGE_KEY,
+    value: { id: instruction.id, values: state },
+    hasData: isDirty,
+    enabled: true,
+  });
+
+  // Restore a draft only when it belongs to this record.
+  useEffect(() => {
+    const stored = loadDraft();
+    if (stored?.payload.id === instruction.id) {
+      setState(stored.payload.values);
+      return;
+    }
+    setState(toFormState(instruction));
+    setIsUnlocked(false);
+  }, [instruction, loadDraft]);
+
+  const variables = useMemo<Record<string, VariableSpec>>(() => {
+    if (registryEntry?.variables) return registryEntry.variables;
+    return normalizeVariables(instruction.variables_schema);
+  }, [instruction.variables_schema, registryEntry]);
+
+  // Local validation on every keystroke — no round-trip.
+  const validation = useMemo(
+    () => validateTemplate(state.content, variables),
+    [state.content, variables]
+  );
+  const placeholders = useMemo(
+    () => extractPlaceholders(state.content),
+    [state.content]
+  );
+
+  const declaredNames = useMemo(() => new Set(Object.keys(variables)), [variables]);
+
+  const missingPhrases = useMemo(() => {
+    const phrases = registryEntry?.required_phrases ?? [];
+    return phrases.filter((phrase) => !state.content.includes(phrase));
+  }, [registryEntry, state.content]);
+
+  const allPhrasesMissing =
+    (registryEntry?.required_phrases?.length ?? 0) > 0 &&
+    missingPhrases.length === registryEntry!.required_phrases.length;
+
+  const handleRestoreDefault = () => {
+    if (!registryEntry) return;
+    setState((current) => ({ ...current, content: registryEntry.fallback }));
+    toast.info(t('restoreDefaultApplied'));
+  };
+
+  const handleSave = async (allowMissingVariables = false) => {
+    setIsSaving(true);
+    try {
+      const response = await request<AiInstruction & { warnings?: string[] }>({
+        url: `/ai-instruction/${instruction.id}`,
+        method: 'PATCH',
+        data: {
+          name: state.name,
+          content: state.content,
+          locale: state.locale,
+          is_active: state.is_active,
+          // Empty means "inherit from the profile / code default".
+          model: state.model.trim() || null,
+          temperature: state.temperature.trim() === '' ? null : Number(state.temperature),
+          max_tokens: state.max_tokens.trim() === '' ? null : Number(state.max_tokens),
+          change_note: state.change_note.trim() || undefined,
+          allow_missing_variables: allowMissingVariables || undefined,
+          acknowledge_security_review: instruction.is_locked ? true : undefined,
+        },
+      });
+
+      for (const warning of response.data.warnings ?? []) {
+        toast.warning(warning);
+      }
+
+      toast.success(t('saveSuccess'));
+      clearDraft();
+      onSaved();
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('saveError')));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {instruction.is_locked ? (
+        <Alert variant="destructive">
+          <ShieldAlert className="h-4 w-4" />
+          <AlertTitle>{t('lockedTitle')}</AlertTitle>
+          <AlertDescription className="space-y-2">
+            <p>{t('lockedDescription')}</p>
+            {registryEntry?.required_phrases?.length ? (
+              <div className="flex flex-wrap gap-1">
+                {registryEntry.required_phrases.map((phrase) => (
+                  <Badge
+                    key={phrase}
+                    variant={missingPhrases.includes(phrase) ? 'destructive' : 'secondary'}
+                  >
+                    {phrase}
+                  </Badge>
+                ))}
+              </div>
+            ) : null}
+            {readOnly ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => setIsUnlockDialogOpen(true)}
+              >
+                <Lock className="h-4 w-4" />
+                {t('unlockEditing')}
+              </Button>
+            ) : null}
+          </AlertDescription>
+        </Alert>
+      ) : null}
+
+      {allPhrasesMissing ? (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>{t('allPhrasesMissingWarning')}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      <Tabs defaultValue="content">
+        <TabsList>
+          <TabsTrigger value="content">{t('tabContent')}</TabsTrigger>
+          <TabsTrigger value="variables">{t('tabVariables')}</TabsTrigger>
+          <TabsTrigger value="preview">{t('tabPreview')}</TabsTrigger>
+          <TabsTrigger value="history">{t('tabHistory')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="content" className="space-y-4 pt-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-1 sm:col-span-2">
+              <Label>{t('fieldSlug')}</Label>
+              <div className="flex gap-2">
+                <Input readOnly value={instruction.slug} className="font-mono text-xs" />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  title={t('copySlug')}
+                  onClick={() => {
+                    navigator.clipboard?.writeText(instruction.slug);
+                    toast.success(t('slugCopied'));
+                  }}
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">{t('slugImmutable')}</p>
+            </div>
+
+            <div className="space-y-1">
+              <Label>{t('fieldName')}</Label>
+              <Input
+                value={state.name}
+                maxLength={200}
+                readOnly={readOnly}
+                onChange={(event) =>
+                  setState((current) => ({ ...current, name: event.target.value }))
+                }
+              />
+            </div>
+
+            <div className="space-y-1">
+              <Label>{t('fieldLocale')}</Label>
+              <Select
+                value={state.locale}
+                disabled={readOnly}
+                onValueChange={(value) => setState((current) => ({ ...current, locale: value }))}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="pt">pt</SelectItem>
+                  <SelectItem value="en">en</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2 sm:col-span-2">
+              <Switch
+                checked={state.is_active}
+                disabled={readOnly}
+                onCheckedChange={(checked) =>
+                  setState((current) => ({ ...current, is_active: checked }))
+                }
+              />
+              <Label>{t('fieldIsActive')}</Label>
+              <span className="text-xs text-muted-foreground">{t('isActiveHint')}</span>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label>{t('fieldContent')}</Label>
+              {registryEntry ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  disabled={readOnly}
+                  onClick={handleRestoreDefault}
+                >
+                  <RotateCcw className="h-4 w-4" />
+                  {t('restoreDefault')}
+                </Button>
+              ) : null}
+            </div>
+
+            <Textarea
+              rows={26}
+              value={state.content}
+              readOnly={readOnly}
+              className="font-mono text-xs leading-relaxed"
+              onChange={(event) =>
+                setState((current) => ({ ...current, content: event.target.value }))
+              }
+            />
+
+            <p className="text-xs text-muted-foreground">
+              {t('charCountWithTokens', {
+                chars: state.content.length,
+                tokens: estimateTokens(state.content),
+              })}
+            </p>
+
+            {placeholders.substitutions.length || placeholders.blocks.length ? (
+              <div className="flex flex-wrap gap-1">
+                {[...placeholders.substitutions, ...placeholders.blocks]
+                  .filter((name, index, all) => all.indexOf(name) === index)
+                  .map((name) => (
+                    <Badge
+                      key={name}
+                      variant={declaredNames.has(name) ? 'secondary' : 'destructive'}
+                      className="font-mono text-xs"
+                    >
+                      {`{{${name}}}`}
+                    </Badge>
+                  ))}
+              </div>
+            ) : null}
+
+            {validation.unbalancedBlocks.length ? (
+              <Alert variant="destructive">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertDescription>
+                  {t('unbalancedBlocksError', {
+                    blocks: validation.unbalancedBlocks.join(', '),
+                  })}
+                </AlertDescription>
+              </Alert>
+            ) : null}
+
+            {validation.missingRequired.length ? (
+              <Alert variant="destructive">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertDescription>
+                  {t('missingRequiredError', {
+                    variables: validation.missingRequired.join(', '),
+                  })}
+                </AlertDescription>
+              </Alert>
+            ) : null}
+
+            {missingPhrases.length && !allPhrasesMissing ? (
+              <Alert>
+                <AlertTriangle className="h-4 w-4" />
+                <AlertDescription>
+                  {t('missingPhrasesWarning', { phrases: missingPhrases.join(', ') })}
+                </AlertDescription>
+              </Alert>
+            ) : null}
+          </div>
+
+          <div className="space-y-2 rounded-md border p-3">
+            <Label className="text-sm font-medium">{t('modelParamsTitle')}</Label>
+            <p className="text-xs text-muted-foreground">{t('modelParamsHint')}</p>
+
+            <div className="grid gap-3 sm:grid-cols-3">
+              <div className="space-y-1">
+                <Label className="text-xs">{t('fieldModel')}</Label>
+                <Input
+                  value={state.model}
+                  readOnly={readOnly}
+                  placeholder={registryEntry?.defaults?.model || t('inheritPlaceholder')}
+                  onChange={(event) =>
+                    setState((current) => ({ ...current, model: event.target.value }))
+                  }
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">{t('fieldTemperature')}</Label>
+                <Input
+                  type="number"
+                  step="0.1"
+                  min="0"
+                  max="2"
+                  value={state.temperature}
+                  readOnly={readOnly}
+                  placeholder={
+                    registryEntry?.defaults?.temperature !== undefined
+                      ? String(registryEntry.defaults.temperature)
+                      : t('inheritPlaceholder')
+                  }
+                  onChange={(event) =>
+                    setState((current) => ({ ...current, temperature: event.target.value }))
+                  }
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">{t('fieldMaxTokens')}</Label>
+                <Input
+                  type="number"
+                  min="1"
+                  value={state.max_tokens}
+                  readOnly={readOnly}
+                  placeholder={
+                    registryEntry?.defaults?.maxTokens !== undefined
+                      ? String(registryEntry.defaults.maxTokens)
+                      : t('inheritPlaceholder')
+                  }
+                  onChange={(event) =>
+                    setState((current) => ({ ...current, max_tokens: event.target.value }))
+                  }
+                />
+              </div>
+            </div>
+          </div>
+
+          {contentChanged ? (
+            <div className="space-y-1">
+              <Label>{t('fieldChangeNote')}</Label>
+              <Input
+                value={state.change_note}
+                maxLength={500}
+                placeholder={t('changeNotePlaceholder')}
+                onChange={(event) =>
+                  setState((current) => ({ ...current, change_note: event.target.value }))
+                }
+              />
+            </div>
+          ) : null}
+
+          <div className="flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                clearDraft();
+                onClose();
+              }}
+            >
+              {t('cancel')}
+            </Button>
+            <Button
+              type="button"
+              disabled={isSaving || readOnly || validation.unbalancedBlocks.length > 0}
+              onClick={() => handleSave(validation.missingRequired.length > 0)}
+            >
+              {isSaving ? t('saving') : t('save')}
+            </Button>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="variables" className="space-y-3 pt-4">
+          {Object.keys(variables).length === 0 ? (
+            <p className="text-sm text-muted-foreground">{t('variablesEmpty')}</p>
+          ) : (
+            <>
+              {registryEntry ? (
+                <p className="text-xs text-muted-foreground">{t('variablesFromCode')}</p>
+              ) : null}
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b text-left text-xs text-muted-foreground">
+                      <th className="p-2">{t('columnVariable')}</th>
+                      <th className="p-2">{t('columnVariableType')}</th>
+                      <th className="p-2">{t('columnVariableRequired')}</th>
+                      <th className="p-2">{t('columnVariableDescription')}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.entries(variables).map(([name, spec]) => (
+                      <tr key={name} className="border-b last:border-0">
+                        <td className="p-2 font-mono text-xs">{`{{${name}}}`}</td>
+                        <td className="p-2">{spec.type}</td>
+                        <td className="p-2">
+                          {spec.required ? (
+                            <Badge variant="secondary">{t('variableRequired')}</Badge>
+                          ) : (
+                            '—'
+                          )}
+                          {spec.conditional ? (
+                            <Badge variant="outline" className="ml-1">
+                              {t('variableConditional')}
+                            </Badge>
+                          ) : null}
+                        </td>
+                        <td className="p-2 text-xs text-muted-foreground">
+                          {spec.description || '—'}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </>
+          )}
+        </TabsContent>
+
+        <TabsContent value="preview" className="pt-4">
+          <AiInstructionPreviewPanel
+            content={state.content}
+            slug={instruction.slug}
+            variables={variables}
+          />
+        </TabsContent>
+
+        <TabsContent value="history" className="pt-4">
+          <AiInstructionVersions instruction={instruction} onRestored={onSaved} />
+        </TabsContent>
+      </Tabs>
+
+      <AlertDialog
+        open={isUnlockDialogOpen}
+        onOpenChange={(open) => {
+          setIsUnlockDialogOpen(open);
+          if (!open) setUnlockConfirmation('');
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('unlockDialogTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>{t('unlockDialogDescription')}</AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <div className="space-y-1">
+            <Label className="font-mono text-xs">{instruction.slug}</Label>
+            <Input
+              value={unlockConfirmation}
+              placeholder={instruction.slug}
+              className={cn('font-mono text-xs')}
+              onChange={(event) => setUnlockConfirmation(event.target.value)}
+            />
+          </div>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={unlockConfirmation !== instruction.slug}
+              onClick={() => {
+                setIsUnlocked(true);
+                setIsUnlockDialogOpen(false);
+                setUnlockConfirmation('');
+              }}
+            >
+              {t('unlockEditing')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}