Repository: novuhq/novu
File: apps/dashboard/src/components/workflow-editor/steps/digest/digest-key.tsx (TypeScript)

Code before:
              Group events by
            </FormLabel>
            <div className="flex flex-row gap-1">
              <div className="flex h-[28px] items-center gap-1">
                <Code2 className="text-feature size-3 min-w-3" />
                <span className="text-foreground-600 whitespace-nowrap text-xs font-normal">subscriberId - </span>
              </div>
              <VariableSelect
                key={field.value || 'empty'} // This key is used to force the component to re-render when the value changes
                leftIcon={<Code2 className="text-feature size-3 min-w-3" />}
                onChange={(value) => {
                  if (value) {
                    setValue(FORM_CONTROL_NAME, `{{${value}}}`, { shouldDirty: true });
                    saveForm();
                  }
                }}
                options={payloadVariables.map((variable) => ({
                  label: variable.label,
                  value: variable.label,
                }))}
                value={parseLiquidVariables(field.value)}
                placeholder="add additional digest key..."
                className="w-full"
                emptyStateMessage={{
                  primary: 'No digest key configured',
                  secondary: 'Type "payload." to configure the digest key',
                }}
              />
              <div className="transition-all duration-200 ease-in-out">
                {field.value && (
                  <Button
                    variant="secondary"
                    mode="ghost"
                    size="2xs"
                    className="hover:bg-muted animate-in fade-in slide-in-from-right-4 h-[28px] w-[28px] p-0 duration-200"
                    onClick={() => {
                      setValue(FORM_CONTROL_NAME, '', { shouldDirty: true });
                      saveForm();
                    }}
                  >
                    <X className="size-3" />
                  </Button>
                )}
              </div>
            </div>
            <FormMessage />
          </>
        </FormItem>
      )}
    />
  );

Review comment (suggestion):
```suggestion
                  secondary: 'Refine the key using "payload." variables',
```

Code after:
              Group events by
            </FormLabel>
            <div className="flex flex-row gap-1">
              <div className="flex h-[28px] items-center gap-1">
                <Code2 className="text-feature size-3 min-w-3" />
                <span className="text-foreground-600 whitespace-nowrap text-xs font-normal">subscriberId - </span>
              </div>
              <VariableSelect
                key={field.value || 'empty'} // This key is used to force the component to re-render when the value changes
                leftIcon={<Code2 className="text-feature size-3 min-w-3" />}
                onChange={(value) => {
                  if (value) {
                    setValue(FORM_CONTROL_NAME, `{{${value}}}`, { shouldDirty: true });
                    saveForm();
                  }
                }}
                options={payloadVariables.map((variable) => ({
                  label: variable.label,
                  value: variable.label,
                }))}
                value={parseLiquidVariables(field.value)}
                placeholder="add additional digest key..."
                className="w-full"
                emptyStateMessage={{
                  primary: 'No digest key configured',
                  secondary: 'Refine the key using "payload." variables',
                }}
              />
              <div className="transition-all duration-200 ease-in-out">
                {field.value && (
                  <Button
                    variant="secondary"
                    mode="ghost"
                    size="2xs"
                    className="hover:bg-muted animate-in fade-in slide-in-from-right-4 h-[28px] w-[28px] p-0 duration-200"
                    onClick={() => {
                      setValue(FORM_CONTROL_NAME, '', { shouldDirty: true });
                      saveForm();
                    }}
                  >
                    <X className="size-3" />
                  </Button>
                )}
              </div>
            </div>
            <FormMessage />
          </>
        </FormItem>
      )}
    />
  );