Add /answer/explain route for explaining file ranges

client/src/Tab.tsx

@@ -12,6 +12,7 @@ import FileModalContainer from './pages/ResultModal/FileModalContainer';
 import { FileModalContextProvider } from './context/providers/FileModalContextProvider';
 import PromptGuidePopup from './components/PromptGuidePopup';
 import Onboarding from './pages/Onboarding';
+import { FileHighlightsContextProvider } from './context/providers/FileHighlightsContextProvider';
 
 type Props = {
   isActive: boolean;
@@ -31,12 +32,14 @@ class Tab extends PureComponent<Props> {
             <AppNavigationProvider tab={tab}>
               <SearchContextProvider tab={tab}>
                 <ChatContextProvider>
-                  <ContentContainer tab={tab} />
-                  <Settings />
-                  <ReportBugModal />
-                  <FileModalContainer repoName={tab.repoName} />
-                  <PromptGuidePopup />
-                  <Onboarding />
+                  <FileHighlightsContextProvider>
+                    <ContentContainer tab={tab} />
+                    <Settings />
+                    <ReportBugModal />
+                    <FileModalContainer repoName={tab.repoName} />
+                    <PromptGuidePopup />
+                    <Onboarding />
+                  </FileHighlightsContextProvider>
                 </ChatContextProvider>
               </SearchContextProvider>
             </AppNavigationProvider>

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

@@ -86,6 +86,7 @@ const AllConversations = ({
           isFromHistory: true,
           queryId: m.id,
           responseTimestamp: m.response_timestamp,
+          explainedFile: m.focused_chunk?.file_path,
         });
       });
       setTitle(conv[0].text || '');

client/src/components/Chat/Conversation.tsx

@@ -84,6 +84,9 @@ const Conversation = ({
           responseTimestamp={
             m.author === ChatMessageAuthor.Server ? m.responseTimestamp : null
           }
+          explainedFile={
+            m.author === ChatMessageAuthor.Server ? m.explainedFile : undefined
+          }
         />
       ))}
     </div>

client/src/components/Chat/ConversationMessage/FileChip.tsx

@@ -1,21 +1,100 @@
-import React from 'react';
+import React, {
+  Dispatch,
+  MutableRefObject,
+  SetStateAction,
+  useEffect,
+  useRef,
+} from 'react';
 import FileIcon from '../../FileIcon';
 import { ArrowOut } from '../../../icons';
+import { highlightColors } from '../../../consts/code';
+import { FileHighlightsType } from '../../../types/general';
 
 type Props = {
   onClick: () => void;
   fileName: string;
+  filePath: string;
   skipIcon?: boolean;
+  lines?: [number, number];
+  fileChips?: MutableRefObject<HTMLButtonElement[]>;
+  setFileHighlights?: Dispatch<SetStateAction<FileHighlightsType>>;
 };
 
-const FileChip = ({ onClick, fileName, skipIcon }: Props) => {
+const FileChip = ({
+  onClick,
+  fileName,
+  filePath,
+  skipIcon,
+  lines,
+  fileChips,
+  setFileHighlights,
+}: Props) => {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    let chip = ref.current;
+    if (chip && fileChips) {
+      fileChips.current.push(chip);
+    }
+
+    return () => {
+      if (chip && fileChips) {
+        const index = fileChips.current.indexOf(chip);
+        if (index !== -1) {
+          fileChips.current.splice(index, 1);
+        }
+      }
+    };
+  }, []);
+
+  const index =
+    ref.current && fileChips ? fileChips.current.indexOf(ref.current) : -1;
+
+  useEffect(() => {
+    if (lines && index > -1 && setFileHighlights) {
+      setFileHighlights((prev) => {
+        const newHighlights = { ...prev };
+        if (!newHighlights[filePath]) {
+          newHighlights[filePath] = [];
+        }
+        newHighlights[filePath][index] = {
+          lines,
+          color: `rgb(${highlightColors[index % highlightColors.length].join(
+            ', ',
+          )})`,
+          index,
+        };
+        // newHighlights[filePath] = newHighlights[filePath].filter((h) => !!h);
+        if (JSON.stringify(prev) === JSON.stringify(newHighlights)) {
+          return prev;
+        }
+        return newHighlights;
+      });
+    }
+  }, [lines, filePath, index]);
+
   return (
     <button
       className={`inline-flex items-center bg-chat-bg-shade rounded-4 overflow-hidden 
                 text-label-base hover:text-label-title border border-transparent hover:border-chat-bg-border 
                 cursor-pointer align-middle ellipsis`}
+      ref={ref}
       onClick={onClick}
     >
+      {!!lines && (
+        <span
+          className="w-0.5 h-4 ml-1 rounded-px"
+          style={{
+            width: 2,
+            height: 14,
+            backgroundColor: `rgb(${
+              index > -1
+                ? highlightColors[index % highlightColors.length].join(', ')
+                : ''
+            })`,
+          }}
+        />
+      )}
       <span className="flex gap-1 px-1 py-0.5 items-center border-r border-chat-bg-border code-s ellipsis">
         {!skipIcon && <FileIcon filename={fileName} noMargin />}
         <span className="ellipsis">{fileName}</span>

client/src/components/Chat/ConversationMessage/SummaryCards/SummaryCardsArticle.tsx

@@ -8,10 +8,17 @@ type Props = {
   article: string;
   i: number;
   threadId: string;
+  explainedFile?: string;
 };
 
-const SummaryCardsArticle = ({ article, i, threadId }: Props) => {
-  const { navigateArticleResponse } = useContext(AppNavigationContext);
+const SummaryCardsArticle = ({
+  article,
+  i,
+  threadId,
+  explainedFile,
+}: Props) => {
+  const { navigateArticleResponse, navigateFullResult } =
+    useContext(AppNavigationContext);
   return (
     <>
       {article
@@ -29,7 +36,13 @@ const SummaryCardsArticle = ({ article, i, threadId }: Props) => {
         .map((p, index, array) =>
           index === array.length - 1 ? (
             <SummaryCardMain
-              onClick={() => navigateArticleResponse(i, threadId)}
+              onClick={() => {
+                if (explainedFile) {
+                  navigateFullResult(explainedFile, undefined, i, threadId);
+                } else {
+                  navigateArticleResponse(i, threadId);
+                }
+              }}
               key={index}
               isArticle
             >

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

@@ -42,6 +42,7 @@ type Props = {
   results?: string;
   i: number;
   onMessageEdit: (queryId: string, i: number) => void;
+  explainedFile?: string;
 };
 
 const ConversationMessage = ({
@@ -61,6 +62,7 @@ const ConversationMessage = ({
   repoName,
   onMessageEdit,
   responseTimestamp,
+  explainedFile,
 }: Props) => {
   const { t } = useTranslation();
   const [isLoadingStepsShown, setLoadingStepsShown] = useState(false);
@@ -95,6 +97,7 @@ const ConversationMessage = ({
                 <FileChip
                   onClick={() => openFileModal(s.path)}
                   fileName={s.path.split('/').pop() || ''}
+                  filePath={s.path || ''}
                 />
               ) : null}
             </div>
@@ -144,6 +147,7 @@ const ConversationMessage = ({
                   article={results}
                   threadId={threadId}
                   i={i}
+                  explainedFile={explainedFile}
                 />
               ) : null}
             </div>

client/src/components/Chat/index.tsx

@@ -61,6 +61,7 @@ const Chat = () => {
     navigateRepoPath,
     navigatedItem,
     navigateArticleResponse,
+    navigateFullResult,
   } = useContext(AppNavigationContext);
   const [isLoading, setLoading] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
@@ -77,7 +78,10 @@ const Chat = () => {
   }, [isChatOpen]);
 
   const makeSearch = useCallback(
-    (query: string) => {
+    (
+      query: string,
+      options?: { filePath: string; lineStart: string; lineEnd: string },
+    ) => {
       if (!query) {
         return;
       }
@@ -87,23 +91,23 @@ const Chat = () => {
       setLoading(true);
       setQueryIdToEdit('');
       setHideMessagesFrom(null);
-      const eventSource = new EventSource(
-        `${apiUrl.replace('https:', '')}/answer?q=${encodeURIComponent(query)}${
-          selectedBranch ? ` branch:${selectedBranch}` : ''
-        }&repo_ref=${tab.key}${threadId ? `&thread_id=${threadId}` : ''}${
-          navigatedItem?.type === 'repo' && navigatedItem?.path
-            ? `&relative_path=${navigatedItem?.path}&is_folder=true`
-            : ''
-        }${
-          navigatedItem?.type === 'full-result' && navigatedItem?.path
-            ? `&relative_path=${navigatedItem?.path}&is_folder=false`
-            : ''
-        }${
-          selectedLines
-            ? `&start=${selectedLines[0]}&end=${selectedLines[1]}`
-            : ''
-        }${queryIdToEdit ? `&parent_exchange_id=${queryIdToEdit}` : ''}`,
-      );
+      const url = `${apiUrl.replace(/http(s)*:/, '')}/answer${
+        options
+          ? `/explain?relative_path=${encodeURIComponent(
+              options.filePath,
+            )}&line_start=${options.lineStart}&line_end=${options.lineEnd}`
+          : `?q=${encodeURIComponent(query)}${
+              selectedBranch ? ` branch:${selectedBranch}` : ''
+            }`
+      }&repo_ref=${tab.key}${
+        threadId
+          ? `&thread_id=${threadId}${
+              queryIdToEdit ? `&parent_query_id=${queryIdToEdit}` : ''
+            }`
+          : ''
+      }`;
+      console.log(url);
+      const eventSource = new EventSource(url);
       prevEventSource = eventSource;
       setSelectedLines(null);
       let firstResultCame: boolean;
@@ -126,7 +130,9 @@ const Chat = () => {
             queryId: '',
             responseTimestamp: new Date().toISOString(),
           };
-          setInputValue(prev[prev.length - 2]?.text || submittedQuery);
+          if (!options) {
+            setInputValue(prev[prev.length - 2]?.text || submittedQuery);
+          }
           setSubmittedQuery('');
           return [...newConversation, lastMessage];
         });
@@ -155,7 +161,9 @@ const Chat = () => {
                 queryId: '',
                 responseTimestamp: new Date().toISOString(),
               };
-              setInputValue(prev[prev.length - 1]?.text || submittedQuery);
+              if (!options) {
+                setInputValue(prev[prev.length - 1]?.text || submittedQuery);
+              }
               setSubmittedQuery('');
               return [...newConversation, lastMessage];
             });
@@ -203,6 +211,7 @@ const Chat = () => {
                 results: newMessage.answer,
                 queryId: newMessage.id,
                 responseTimestamp: newMessage.response_timestamp,
+                explainedFile: newMessage.focused_chunk?.file_path,
               };
               const lastMessages: ChatMessage[] =
                 lastMessage?.author === ChatMessageAuthor.Server
@@ -213,8 +222,18 @@ const Chat = () => {
             // workaround: sometimes we get [^summary]: before it is removed from response
             if (newMessage.answer?.length > 11 && !firstResultCame) {
               setConversation((prev) => {
-                setChatOpen(false);
-                navigateArticleResponse(prev.length - 1, thread_id);
+                if (newMessage.focused_chunk?.file_path) {
+                  setChatOpen(false);
+                  navigateFullResult(
+                    newMessage.focused_chunk?.file_path,
+                    undefined,
+                    prev.length - 1,
+                    thread_id,
+                  );
+                } else {
+                  setChatOpen(false);
+                  navigateArticleResponse(prev.length - 1, thread_id);
+                }
                 return prev;
               });
               firstResultCame = true;
@@ -246,10 +265,12 @@ const Chat = () => {
                         "We couldn't answer your question. You can try asking again in a few moments, or rephrasing your question.",
                       ),
               };
-              setInputValue(
-                prev[prev.length - (lastMessageIsServer ? 2 : 1)]?.text ||
-                  submittedQuery,
-              );
+              if (!options) {
+                setInputValue(
+                  prev[prev.length - (lastMessageIsServer ? 2 : 1)]?.text ||
+                    submittedQuery,
+                );
+              }
               setSubmittedQuery('');
               return [...newConversation, lastMessage];
             });
@@ -279,10 +300,16 @@ const Chat = () => {
       return;
     }
     let userQuery = submittedQuery;
+    let options = undefined;
     if (submittedQuery.startsWith('#explain_')) {
       const [prefix, ending] = submittedQuery.split(':');
       const [lineStart, lineEnd] = ending.split('-');
       const filePath = prefix.slice(9);
+      options = {
+        filePath,
+        lineStart,
+        lineEnd,
+      };
       userQuery = t(
         `Explain lines {{lineStart}} - {{lineEnd}} in {{filePath}}`,
         {
@@ -300,7 +327,7 @@ const Chat = () => {
         isLoading: false,
       },
     ]);
-    makeSearch(userQuery);
+    makeSearch(userQuery, options);
   }, [submittedQuery]);
 
   const stopGenerating = useCallback(() => {