Support lang and file filters in chat (#1132)

* Respect path filters in agent queries

* Fix autocomplete for langs

* Add directory indicator

* Add directory indicator to autocomplete

* Use central lang map instead of a separate one

* Simplify this logic

* Add position information to literals

* Add `raw_query` to exchange

* Add offsets to lang filters

* Respect the clippy

* Aggregate and rank languages from the executed queries

* Only offer lang suggestions if there's a lang filter in the query

* Partially parsed lang functions will not return results

* Allow excluding results from certain kind of results

* Normalize results somewhat

* Show lang filters more aggressively

* Add arbitrary language suggestions

* Tuning

* Make it a greedy regex

* render parsed user query in history

* add autocomplete component

* automatically convert user query between input and display

* show only file name in the autocomplete input

* use another character for autocomplete regex

* reorder query

* add content=false query param

* make the suggestions container bigger

* Apply partial lang filter

* fix and test splitUserInputAfterAutocomplete function

* improve styles for highlight background

* update autocomplete chip style

* Add langs queries to fuzzy matcher

* Autocomplete on lang even if there are no matches

* More fine tuning

* More fine tuning

* More tweaks

* Update server/bleep/src/webserver/autocomplete.rs

Co-authored-by: Gabriel Gordon-Hall <[email protected]>

* Nicer interface

* Move `raw_query` to `query`

* Fix tests

* move raw_query inside query

* Propagate certain filters to LLM

---------

Co-authored-by: rsdy <[email protected]>
Co-authored-by: rsdy <[email protected]>
Co-authored-by: Gabriel Gordon-Hall <[email protected]>

client/src/components/Chat/ChatBody/AllCoversations/index.tsx

@@ -21,7 +21,10 @@ import {
   OpenChatHistoryItem,
 } from '../../../../types/general';
 import { conversationsCache } from '../../../../services/cache';
-import { mapLoadingSteps } from '../../../../mappers/conversation';
+import {
+  mapLoadingSteps,
+  mapUserQuery,
+} from '../../../../mappers/conversation';
 import { LocaleContext } from '../../../../context/localeContext';
 import { getDateFnsLocale } from '../../../../utils';
 import ConversationListItem from './ConversationListItem';
@@ -63,9 +66,11 @@ const AllConversations = ({
       resp.forEach((m) => {
         // @ts-ignore
         const userQuery = m.search_steps.find((s) => s.type === 'QUERY');
+        const parsedQuery = mapUserQuery(m);
         conv.push({
           author: ChatMessageAuthor.User,
-          text: m.query?.target?.Plain || userQuery?.content?.query || '',
+          text: m.query.raw_query || userQuery?.content?.query || '',
+          parsedQuery,
           isFromHistory: true,
         });
         conv.push({

client/src/components/Chat/ChatBody/Conversation.tsx

@@ -59,6 +59,9 @@ const Conversation = ({
           isHistory={isHistory}
           author={m.author}
           message={m.text}
+          parsedQuery={
+            m.author === ChatMessageAuthor.Server ? undefined : m.parsedQuery
+          }
           error={m.author === ChatMessageAuthor.Server ? m.error : ''}
           showInlineFeedback={
             m.author === ChatMessageAuthor.Server &&

client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/LangChip.tsx

@@ -0,0 +1,22 @@
+import FileIcon from '../../../../FileIcon';
+import { getFileExtensionForLang } from '../../../../../utils';
+
+type Props = {
+  lang: string;
+};
+
+const LangChip = ({ lang }: Props) => {
+  return (
+    <span
+      className={`inline-flex items-center bg-bg-base rounded-4 overflow-hidden 
+                text-label-base border border-bg-border align-middle`}
+    >
+      <span className="flex gap-1 px-1 py-0.5 items-center code-s">
+        <FileIcon filename={getFileExtensionForLang(lang, true)} />
+        <span className="">{lang}</span>
+      </span>
+    </span>
+  );
+};
+
+export default LangChip;

client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/PathChip.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { FolderClosed, ArrowOut } from '../../../../../icons';
+import FileIcon from '../../../../FileIcon';
+import { splitPath } from '../../../../../utils';
+
+type Props = {
+  path: string;
+};
+
+const PathChip = ({ path }: Props) => {
+  const isFolder = useMemo(() => path.endsWith('/'), [path]);
+  return (
+    <span
+      className={`inline-flex items-center bg-bg-base rounded-4 overflow-hidden 
+                text-label-base border border-bg-border align-middle`}
+    >
+      <span className="flex gap-1 px-1 py-0.5 items-center code-s">
+        {isFolder ? (
+          <FolderClosed raw sizeClassName="w-3.5 h-3.5" />
+        ) : (
+          <FileIcon filename={path} />
+        )}
+        <span className="">
+          {isFolder ? path.replace(/\/$/, '') : splitPath(path).pop()}
+        </span>
+      </span>
+    </span>
+  );
+};
+
+export default PathChip;

client/src/components/Chat/ChatBody/ConversationMessage/UserParsedQuery/index.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react';
+import {
+  ParsedQueryType,
+  ParsedQueryTypeEnum,
+} from '../../../../../types/general';
+import PathChip from './PathChip';
+import LangChip from './LangChip';
+
+type Props = {
+  textQuery: string;
+  parsedQuery?: ParsedQueryType[];
+};
+
+const UserParsedQuery = ({ textQuery, parsedQuery }: Props) => {
+  return (
+    <div className="pl-8">
+      {parsedQuery
+        ? parsedQuery.map((p, i) =>
+            p.type === ParsedQueryTypeEnum.TEXT ? (
+              p.text
+            ) : p.type === ParsedQueryTypeEnum.PATH ? (
+              <PathChip path={p.text} key={i} />
+            ) : p.type === ParsedQueryTypeEnum.LANG ? (
+              <LangChip lang={p.text} key={i} />
+            ) : null,
+          )
+        : textQuery}
+    </div>
+  );
+};
+
+export default memo(UserParsedQuery);

client/src/components/Chat/ChatBody/ConversationMessage/index.tsx

@@ -10,7 +10,11 @@ import {
   WrenchAndScrewdriver,
 } from '../../../../icons';
 import { DeviceContext } from '../../../../context/deviceContext';
-import { ChatLoadingStep, ChatMessageAuthor } from '../../../../types/general';
+import {
+  ChatLoadingStep,
+  ChatMessageAuthor,
+  ParsedQueryType,
+} from '../../../../types/general';
 import { ChatContext } from '../../../../context/chatContext';
 import Button from '../../../Button';
 import { LocaleContext } from '../../../../context/localeContext';
@@ -24,10 +28,12 @@ import {
 } from '../../../../services/storage';
 import MessageFeedback from './MessageFeedback';
 import FileChip from './FileChip';
+import UserParsedQuery from './UserParsedQuery';
 
 type Props = {
   author: ChatMessageAuthor;
   message?: string;
+  parsedQuery?: ParsedQueryType[];
   error?: string;
   threadId: string;
   queryId: string;
@@ -61,6 +67,7 @@ const ConversationMessage = ({
   onMessageEdit,
   responseTimestamp,
   singleFileExplanation,
+  parsedQuery,
 }: Props) => {
   const { t } = useTranslation();
   const [isLoadingStepsShown, setLoadingStepsShown] = useState(
@@ -172,7 +179,7 @@ const ConversationMessage = ({
                 )}
               </div>
             </div>
-            {message && (
+            {!!message && (
               <div className="body-s text-label-title code-studio-md padding-start w-full break-word overflow-auto">
                 {author === ChatMessageAuthor.Server ? (
                   <MarkdownWithCode
@@ -184,7 +191,10 @@ const ConversationMessage = ({
                   />
                 ) : (
                   <>
-                    <div className="pl-8">{message}</div>
+                    <UserParsedQuery
+                      textQuery={message}
+                      parsedQuery={parsedQuery}
+                    />
                     {!isHistory && !!queryId && (
                       <div className="absolute bottom-1 right-1 opacity-0 group-summary-hover:opacity-100 transition-opacity">
                         <Button