highlight / highlight

highlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more.
https://app.highlight.io
Other
7.11k stars 320 forks source link

AI-based command bar #8593

Open linear[bot] opened 2 weeks ago

linear[bot] commented 2 weeks ago

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[bot] commented 2 weeks ago

HIG-4667 AI-based command bar

greptile-apps[bot] commented 2 weeks ago

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 '';
}
  1. 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
  1. 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