[DEPRECATED] Add active file as a button + making grey if chat history

core/protocol/ideWebview.ts

@@ -62,7 +62,7 @@ export type ToIdeFromWebviewProtocol = ToIdeFromWebviewOrCoreProtocol & {
 
 export type ToWebviewFromIdeProtocol = ToWebviewFromIdeOrCoreProtocol & {
   setInactive: [undefined, void];
-  setActiveFilePath: [string | undefined, void];
+  setActiveFilePath: [{ path: string | undefined, isNewSession: boolean }, void];
   restFirstLaunchInGUI: [undefined, void];
   showInteractiveContinueTutorial: [undefined, void];
   submitMessage: [{ message: any }, void]; // any -> JSONContent from TipTap

extensions/vscode/src/commands.ts

@@ -572,7 +572,7 @@ const commandsMap: (
     "pearai.newSession": async () => {
       sidebar.webviewProtocol?.request("newSession", undefined, [PEAR_CONTINUE_VIEW_ID]);
       const currentFile = await ide.getCurrentFile();
-      sidebar.webviewProtocol?.request("setActiveFilePath", currentFile, [PEAR_CONTINUE_VIEW_ID]);
+      sidebar.webviewProtocol?.request("setActiveFilePath", { path: currentFile, isNewSession: true }, [PEAR_CONTINUE_VIEW_ID]);
     },
     "pearai.viewHistory": () => {
       sidebar.webviewProtocol?.request("viewHistory", undefined, [

extensions/vscode/src/extension/VsCodeExtension.ts

@@ -371,13 +371,13 @@ export class VsCodeExtension {
       const openFiles = vscode.workspace.textDocuments;
       if (openFiles.length === 1) {
         // the count is amount of last open files
-        this.sidebar.webviewProtocol.request("setActiveFilePath", "", [PEAR_CONTINUE_VIEW_ID]);
+        this.sidebar.webviewProtocol.request("setActiveFilePath", { path: undefined, isNewSession: false }, [PEAR_CONTINUE_VIEW_ID]);
       }
     });
 
     this.ide.onDidChangeActiveTextEditor((filepath) => {
       this.core.invoke("didChangeActiveTextEditor", { filepath });
-      this.sidebar.webviewProtocol.request("setActiveFilePath", filepath, [PEAR_CONTINUE_VIEW_ID]);
+      this.sidebar.webviewProtocol.request("setActiveFilePath", { path: filepath, isNewSession: false }, [PEAR_CONTINUE_VIEW_ID]);
     });
 
     this.updateNewWindowActiveFilePath()
@@ -395,7 +395,7 @@ export class VsCodeExtension {
 
   private async updateNewWindowActiveFilePath() {
     const currentFile = await this.ide.getCurrentFile();
-    this.sidebar.webviewProtocol?.request("setActiveFilePath", currentFile, [PEAR_CONTINUE_VIEW_ID]);
+    this.sidebar.webviewProtocol?.request("setActiveFilePath", { path: currentFile, isNewSession: false }, [PEAR_CONTINUE_VIEW_ID]);
   }
 
   registerCustomContextProvider(contextProvider: IContextProvider) {

gui/src/components/mainInput/ActiveFileIndicator.tsx

@@ -1,37 +1,71 @@
 import { RootState } from "@/redux/store";
 import { useDispatch, useSelector } from "react-redux";
 import { IdeMessengerContext } from "@/context/IdeMessenger";
-import { useCallback, useContext, useEffect } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { X } from "lucide-react";
-import { setActiveFilePath } from "@/redux/slices/uiStateSlice";
+import { setActiveConversationActiveFile, setUseActiveFile } from "@/redux/slices/uiStateSlice";
+import { MenuButton } from "./TopBarIndicators";
+import { useWebviewListener } from "@/hooks/useWebviewListener";
 
 export default function ActiveFileIndicator() {
-  const activeFilePath = useSelector((state: RootState) => state.uiState.activeFilePath);
-  const fileName = activeFilePath?.split(/[/\\]/)?.pop() ?? "";
   const ideMessenger = useContext(IdeMessengerContext);
   const dispatch = useDispatch();
+
+  const activeFilePath = useSelector((state: RootState) => state.uiState.activeFilePath);
+  const useActiveFile = useSelector((state: RootState) => state.uiState.useActiveFile);
+  const activeConversationActiveFile = useSelector((state: RootState) => state.uiState.activeConversationActiveFile);
+  const state = useSelector((state: RootState) => state.state);
+
+  const fileName = useMemo(() => activeFilePath?.split(/[/\\]/)?.pop() ?? "", [activeFilePath]);
+  const isFirstMessage = state.history.length === 0;
+
+  useEffect(() => {
+    // If a user starts a conversation, then the active file should no longer change.
+    // activeConversationActiveFile keeps track of this same file during a conversation.
+    if (isFirstMessage && useActiveFile) {
+      dispatch(setActiveConversationActiveFile(fileName));
+    } else if (!fileName) {
+      dispatch(setActiveConversationActiveFile(undefined));
+    }
+    console.dir(fileName)
+  }, [fileName, useActiveFile, activeFilePath])
 
   const removeActiveFile = useCallback(() => {
-    dispatch(setActiveFilePath(undefined));
+    if (!isFirstMessage) {
+      return
+    }
+    dispatch(setUseActiveFile(false));
+  }, [isFirstMessage])
+
+  const addActiveFile = useCallback(() => {
+    dispatch(setUseActiveFile(true));
   }, [])
 
+  const openFile = useCallback(() => {
+  }, [ideMessenger, activeFilePath]);
+
+  // Show the active file if either including it, or if there's more than one message
   return (
     <>
-      <span>Current file: </span>
-      {fileName ?
-        <span className="mention cursor-pointer flex items-center gap-[0.15rem]">
-          <span
-          onClick={() => {
-            ideMessenger.post("openFile", { path: activeFilePath });
-          }}>
-            {`@${fileName}`}
+    {useActiveFile || !isFirstMessage ?
+      <span className={`flex items-center gap-[0.15rem] ${!isFirstMessage ? "opacity-50" : ""}`}> 
+        <span>Active file: </span>
+        {useActiveFile && activeConversationActiveFile ?
+          <span className={`mention ${isFirstMessage ? "cursor-pointer" : ""} flex items-center gap-[0.15rem]`}> 
+            <span
+            onClick={openFile}>
+              {`@${activeConversationActiveFile}`}
+            </span>
+            <X className="text-xs pt-[0.15rem] pr-[0.1rem]" size={9} onClick={removeActiveFile}/>
+          </span>
+          :
+          <span className="flex items-center gap-[0.15rem]">
+            None
           </span>
-          <X className="text-xs pt-[0.15rem] pr-[0.1rem]" size={9} onClick={removeActiveFile}/>
-        </span>
-        :
-        <span className="flex items-center gap-[0.15rem]">
-          None
-        </span>
+        }
+      </span>
+      : 
+      <MenuButton onClick={addActiveFile}>Add active file +</MenuButton>
       }
     </>
   );

gui/src/components/mainInput/TopBarIndicators.tsx

@@ -13,13 +13,12 @@ import {
   getMetaKeyLabel,
 } from "../../util";
 
-const MenuButton = styled.div<{ offFocus: boolean }>`
+export const MenuButton = styled.div`
   padding: 2px 4px;
   display: flex;
   align-items: center;
 
-  background-color: ${(props) =>
-    props.offFocus ? undefined : lightGray + "33"};
+  background-color: ${lightGray + "33"};
   border-radius: ${defaultBorderRadius};
   color: ${vscForeground};
 
@@ -43,7 +42,6 @@ export default function TopBar() {
       <ActiveFileIndicator />
       </div>
         <MenuButton 
-        offFocus={false}
         onClick={handleClick}
       >
         {getMetaKeyLabel()}+1 Inventory

gui/src/components/ui/button.tsx

@@ -19,9 +19,11 @@ const buttonVariants = cva(
         ghost: "bg-input hover:bg-input text-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         animated: "bg-input text-foreground transition-all duration-200 text-[0.9rem] hover:-translate-y-[1px]",
+        menu: "bg-opacity-20 hover:bg-badge hover:text-badge-foreground bg-gray-300 text-foreground"
       },
       size: {
         default: "h-9 px-4 py-2",
+        xs: "h-5 rounded-[5px] text-xs",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",

gui/src/hooks/useChatHandler.ts

@@ -42,7 +42,8 @@ function useChatHandler(dispatch: Dispatch, ideMessenger: IIdeMessenger, source:
   const posthog = usePostHog();
 
   const defaultModel = useSelector(defaultModelSelector);
-  const useActiveFile = !!(useSelector((state: RootState) => state.uiState.activeFilePath));
+  const activeFilePath = !!(useSelector((state: RootState) => state.uiState.activeFilePath));
+  const useActiveFile = useSelector((state: RootState) => state.uiState.useActiveFile);
 
   const slashCommands = useSelector(
     (store: RootState) => store.state.config.slashCommands || [],
@@ -209,7 +210,7 @@ function useChatHandler(dispatch: Dispatch, ideMessenger: IIdeMessenger, source:
       );
 
       // Automatically use currently open file
-      if (source === 'continue' && (!modifiers.noContext || useActiveFile) && (history.length === 0 || index === 0)) {
+      if (source === 'continue' && (!modifiers.noContext || (useActiveFile && activeFilePath)) && (history.length === 0 || index === 0)) {
         const usingFreeTrial = defaultModel.provider === "free-trial";
 
         const currentFilePath = await ideMessenger.ide.getCurrentFile();

gui/src/index.css

@@ -90,6 +90,8 @@ a:focus {
         --statusbar-foreground: var(--vscode-statusBar-foreground, #93A1A1);
         --tab-active-background: var(--vscode-tab-activeBackground, #002B37);
         --tab-active-foreground: var(--vscode-tab-activeForeground, #d6dbdb);
+        --badge-background: var(--vscode-badge-background, #1bbe84);
+        --badge-foreground: var(--vscode-badge-foreground, #fff);
 
         /* Additional variables, from default taildwind adapted to VSCode PearAI Theme */
         --card: var(--vscode-editor-background, #002B36);

gui/src/pages/gui.tsx

@@ -10,6 +10,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -52,7 +53,8 @@ import {
 import { FREE_TRIAL_LIMIT_REQUESTS } from "../util/freeTrial";
 import { getLocalStorage, setLocalStorage } from "../util/localStorage";
 import OnboardingTutorial from "./onboarding/OnboardingTutorial";
-import { setActiveFilePath } from "@/redux/slices/uiStateSlice";
+import { setActiveFilePath, setUseActiveFile } from "@/redux/slices/uiStateSlice";
+import { set } from "lodash";
 
 export const TopGuiDiv = styled.div`
   overflow-y: scroll;
@@ -174,6 +176,7 @@ function GUI() {
   const topGuiDivRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState<boolean>(false);
   const state = useSelector((state: RootState) => state.state);
+  const isFirstMessage = state.history.length === 0;
 
   const handleScroll = () => {
     const OFFSET_HERUISTIC = 300;
@@ -270,6 +273,7 @@ function GUI() {
   useWebviewListener(
     "newSession",
     async () => {
+      console.log("here===1")
       saveSession();
       mainTextInputRef.current?.focus?.();
     },
@@ -279,9 +283,12 @@ function GUI() {
   useWebviewListener(
     "setActiveFilePath",
     async (data) => {
-      dispatch(setActiveFilePath(data));
+      if (data.isNewSession) {
+        dispatch(setUseActiveFile(false));
+      }
+      dispatch(setActiveFilePath(data.path));
     },
-    []
+    [setActiveFilePath]
   );
 
   useWebviewListener(

gui/src/redux/slices/uiStateSlice.ts

@@ -7,6 +7,8 @@ type UiState = {
   dialogMessage: string | JSX.Element;
   dialogEntryOn: boolean;
   activeFilePath: string | undefined;
+  activeConversationActiveFile: string | undefined; // This is used to keep track of the active file in an active conversation
+  useActiveFile: boolean;
 };
 
 export const uiStateSlice = createSlice({
@@ -19,6 +21,8 @@ export const uiStateSlice = createSlice({
     dialogEntryOn: false,
     displayBottomMessageOnBottom: true,
     activeFilePath: undefined,
+    useActiveFile: false,
+    activeConversationActiveFile: undefined,
   } as UiState,
   reducers: {
     setBottomMessage: (
@@ -60,6 +64,12 @@ export const uiStateSlice = createSlice({
     setActiveFilePath: (state, action: PayloadAction<UiState["activeFilePath"]>) => {
       state.activeFilePath = action.payload ?? "";
     },
+    setUseActiveFile: (state, action: PayloadAction<UiState["useActiveFile"]>) => {
+      state.useActiveFile = action.payload;
+    },
+    setActiveConversationActiveFile: (state, action: PayloadAction<string>) => {
+      state.activeConversationActiveFile = action.payload ?? undefined;
+    },
   },
 });
 
@@ -71,5 +81,7 @@ export const {
   setShowDialog,
   setDisplayBottomMessageOnBottom,
   setActiveFilePath,
+  setUseActiveFile,
+  setActiveConversationActiveFile,
 } = uiStateSlice.actions;
 export default uiStateSlice.reducer;

gui/tailwind.config.cjs

@@ -56,6 +56,10 @@ module.exports = {
           activeBackground: "var(--tab-active-background)",
           activeForeground: "var(--tab-active-foreground)",
         },
+        badge: {
+          background: "var(--badge-background)",
+          foreground: "var(--badge-foreground)",
+        },
 
         /* Tailwind default configs */
         card: {