AI-based command bar

[linear]

Allow users to ask a command bar to search for something and convert the ask to a query and link

"Show me all the sessions for first time users"

[linear]

HIG-4667 AI-based command bar

[greptile-apps]

To implement the AI-based command bar:

1. Add Natural Language Parsing: Create a new function in /frontend/src/components/CommandBar/utils.ts to parse natural language queries.

// utils.ts
export function parseNaturalLanguageQuery(query: string): string {
  if (query.includes('first time users')) {
    return JSON.stringify({ isAnd: true, rules: [['user_first_time', 'is', true]] });
  }
  // Add more parsing rules as needed
  return '';
}

2. Integrate Parsing in CommandBar: Modify the CommandBar component in /frontend/src/components/CommandBar/CommandBar.tsx to use this new function.

// CommandBar.tsx
import { parseNaturalLanguageQuery } from './utils';

const handleSearch = (query: string) => {
  const parsedQuery = parseNaturalLanguageQuery(query);
  if (parsedQuery) {
    setQuery(parsedQuery);
  }
};

// Use handleSearch function where the search is triggered

3. Update Search Execution: Ensure the search execution logic in /frontend/src/pages/FrontPlugin/components/HighlightSessions.tsx can handle the new query format.

// HighlightSessions.tsx
useEffect(() => {
  if (called) {
    setLoadingState(AppLoadingState.LOADED);
  }
}, [called, setLoadingState]);

const query = parseNaturalLanguageQuery('Show me all the sessions for first time users');
setQuery(query);

This will enable the command bar to interpret and execute natural language queries.

References

/frontend/src/components/CommandBar/CommandBar.tsx
/frontend/src/components/CommandBar/utils.ts
/frontend/src/pages/FrontPlugin/components/HighlightSessions.tsx

Ask Greptile