Function render

packages/prompts/src/autocomplete.ts:138–259

()

		output: opts.output,
		validate: opts.validate,
		render() {
			const hasGuide = opts.withGuide ?? settings.withGuide;
			// Title and message display
			const headings = hasGuide
				? [`${styleText('gray', S_BAR)}`, `${symbol(this.state)}  ${opts.message}`]
				: [`${symbol(this.state)}  ${opts.message}`];
			const userInput = this.userInput;
			const options = this.options;
			const placeholder = opts.placeholder;
			const showPlaceholder = userInput === '' && placeholder !== undefined;
			const opt = (option: Option<Value>, state: 'inactive' | 'active' | 'disabled') => {
				const label = getLabel(option);
				const hint =
					option.hint && option.value === this.focusedValue
						? styleText('dim', ` (${option.hint})`)
						: '';
				switch (state) {
					case 'active':
						return `${styleText('green', S_RADIO_ACTIVE)} ${label}${hint}`;
					case 'inactive':
						return `${styleText('dim', S_RADIO_INACTIVE)} ${styleText('dim', label)}`;
					case 'disabled':
						return `${styleText('gray', S_RADIO_INACTIVE)} ${styleText(['strikethrough', 'gray'], label)}`;
				}
			};

			// Handle different states
			switch (this.state) {
				case 'submit': {
					// Show selected value
					const selected = getSelectedOptions(this.selectedValues, options);
					const label =
						selected.length > 0 ? `  ${styleText('dim', selected.map(getLabel).join(', '))}` : '';
					const submitPrefix = hasGuide ? styleText('gray', S_BAR) : '';
					return `${headings.join('\n')}\n${submitPrefix}${label}`;
				}

				case 'cancel': {
					const userInputText = userInput
						? `  ${styleText(['strikethrough', 'dim'], userInput)}`
						: '';
					const cancelPrefix = hasGuide ? styleText('gray', S_BAR) : '';
					return `${headings.join('\n')}\n${cancelPrefix}${userInputText}`;
				}

				default: {
					const barStyle = this.state === 'error' ? 'yellow' : 'cyan';
					const guidePrefix = hasGuide ? `${styleText(barStyle, S_BAR)}  ` : '';
					const guidePrefixEnd = hasGuide ? styleText(barStyle, S_BAR_END) : '';
					// Display cursor position - show plain text in navigation mode
					let searchText = '';
					if (this.isNavigating || showPlaceholder) {
						const searchTextValue = showPlaceholder ? placeholder : userInput;
						searchText = searchTextValue !== '' ? ` ${styleText('dim', searchTextValue)}` : '';
					} else {
						searchText = ` ${this.userInputWithCursor}`;
					}