Improves AI search query feature UX and messaging

 - Enables AI search by default on the Graph

Author: eamodio

src/features.ts

@@ -113,7 +113,7 @@ export function isAdvancedFeature(feature: PlusFeatures): feature is AdvancedFea
 		case 'generate-create-codeSuggestion':
 		case 'generate-create-pullRequest':
 		case 'generate-rebase':
-		case 'generate-searchQuery':
+			// case 'generate-searchQuery':
 			return true;
 		default:
 			return false;

src/plus/ai/aiProviderService.ts

@@ -541,16 +541,20 @@ export class AIProviderService implements Disposable {
 		if (!(await ensureAccess())) return false;
 
 		if (feature === 'generate-commitMessage') return true;
-		if (
-			!(await ensureFeatureAccess(
-				this.container,
-				isAdvancedFeature(feature)
-					? 'This AI feature requires GitLens Advanced or a Pro trial'
-					: 'This AI feature requires GitLens Pro or a Pro trial',
-				feature,
-				source,
-			))
-		) {
+		const suffix = isAdvancedFeature(feature)
+			? 'requires GitLens Advanced or a trial'
+			: 'requires GitLens Pro or a trial';
+		let label;
+		switch (feature) {
+			case 'generate-searchQuery':
+				label = `AI-powered search (preview) ${suffix}`;
+				break;
+
+			default:
+				label = isAdvancedFeature(feature) ? `This AI preview feature ${suffix}` : `This AI feature ${suffix}`;
+		}
+
+		if (!(await ensureFeatureAccess(this.container, label, feature, source))) {
 			return false;
 		}
 

src/webviews/apps/shared/components/search/search-input.ts

@@ -138,9 +138,6 @@ export class GlSearchInput extends GlElement {
 			display: none;
 		}
 
-		input[aria-describedby='help-text'] {
-			border-color: var(--vscode-inputValidation-infoBorder);
-		}
 		input[aria-describedby='help-text']:focus {
 			outline-color: var(--vscode-inputValidation-infoBorder);
 			border-bottom-left-radius: 0;
@@ -329,6 +326,7 @@ export class GlSearchInput extends GlElement {
 	private handleClear(_e: Event) {
 		this.focus();
 		this._value = '';
+		this.errorMessage = '';
 		this.processedQuery = undefined;
 		this.debouncedOnSearchChanged();
 	}
@@ -367,6 +365,7 @@ export class GlSearchInput extends GlElement {
 	}
 
 	private handleInput(e: InputEvent) {
+		this.errorMessage = '';
 		this.processedQuery = undefined;
 
 		const value = (e.target as HTMLInputElement)?.value;
@@ -619,7 +618,10 @@ export class GlSearchInput extends GlElement {
 					if (this.searching) {
 						return html`<span>Query: <code-icon icon="loading" modifier="spin"></code-icon></span>`;
 					}
-					return html`<span>Type your natural language query and press Enter</span>`;
+					return html`<span
+						>Type your natural language query and press Enter. Click
+						<code-icon icon="sparkle"></code-icon> to toggle modes.</span
+					>`;
 				}
 
 				return html`<span> Query: <code>${this.processedQuery}</code></span>`;

src/webviews/plus/graph/graphWebview.ts

@@ -2693,8 +2693,8 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			});
 		}
 
-		const defaultSearchMode = this.container.storage.get('graph:searchMode') ?? 'normal';
-		const useNaturalLanguageSearch = this.container.storage.get('graph:useNaturalLanguageSearch') ?? false;
+		const defaultSearchMode = this.container.storage.get('graph:searchMode', 'normal');
+		const useNaturalLanguageSearch = this.container.storage.get('graph:useNaturalLanguageSearch', true);
 		const featurePreview = this.getFeaturePreview();
 
 		return {