refactor(cli): show key hints for multichoice promtps (#1392)

Closes #819

Author: rChaoz

packages/prompts/src/__tests__/__snapshots__/render.spec.ts.snap

@@ -52,6 +52,7 @@ exports[`prompt renderers > renders multiselect with cursor marker plus checkbox
       Second line
   › ◼ Beta
     ◻ Gamma
+  Press  space  to select,  enter  to submit
 
 "
 `;

packages/prompts/src/multi-select.ts

@@ -120,6 +120,15 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
     );
   };
   const required = opts.required ?? true;
+  const hint =
+    '  ' +
+    color.reset(
+      color.dim(
+        `Press ${color.gray(color.bgWhite(color.inverse(' space ')))} to select, ${color.gray(
+          color.bgWhite(color.inverse(' enter ')),
+        )} to submit`,
+      ),
+    );
 
   return new MultiSelectPrompt({
     options: opts.options,
@@ -131,13 +140,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
     cursorAt: opts.cursorAt,
     validate(selected: Value[] | undefined) {
       if (required && (selected === undefined || selected.length === 0)) {
-        return `Please select at least one option.\n${color.reset(
-          color.dim(
-            `Press ${color.gray(color.bgWhite(color.inverse(' space ')))} to select, ${color.gray(
-              color.bgWhite(color.inverse(' enter ')),
-            )} to submit`,
-          ),
-        )}`;
+        return `Please select at least one option.\n${hint}`;
       }
       return undefined;
     },
@@ -221,7 +224,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
             columnPadding: prefix.length,
             rowPadding: titleLineCount + footerLineCount,
             style: styleOption,
-          }).join(`\n${prefix}`)}\n${footer}\n`;
+          }).join(`\n${prefix}`)}\n${hint}\n${footer}\n`;
         }
         default: {
           const prefix = hasGuide ? `${color.blue(S_BAR)} ` : nestedPrefix;
@@ -236,7 +239,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
             columnPadding: prefix.length,
             rowPadding: titleLineCount + footerLineCount,
             style: styleOption,
-          }).join(`\n${prefix}`)}\n${hasGuide ? color.blue(S_BAR_END) : ''}\n`;
+          }).join(`\n${prefix}`)}\n${hint}\n${hasGuide ? color.blue(S_BAR_END) : ''}\n`;
         }
       }
     },