Add "Explore Hub" onboarding card

core/core.ts

@@ -1003,6 +1003,10 @@ export class Core {
     });
 
     on("didChangeActiveTextEditor", async ({ data: { filepath } }) => {
+      this.messenger.send("didChangeActiveTextEditor", {
+        filepath,
+      });
+
       try {
         const ignore = shouldIgnore(filepath, this.ide);
         if (!ignore) {

core/protocol/passThrough.ts

@@ -84,4 +84,5 @@ export const CORE_TO_WEBVIEW_PASS_THROUGH: (keyof ToWebviewFromCoreProtocol)[] =
     "getWebviewHistoryLength",
     "getCurrentSessionId",
     "docs/suggestions",
+    "didChangeActiveTextEditor",
   ];

core/protocol/webview.ts

@@ -26,6 +26,7 @@ export type ToWebviewFromIdeOrCoreProtocol = {
     },
     void,
   ];
+  didChangeActiveTextEditor: [{ filepath: string }, void];
   isContinueInputFocused: [undefined, boolean];
   addContextItem: [
     {

gui/src/components/ExploreHubCard/index.tsx

@@ -0,0 +1,61 @@
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { useContext } from "react";
+import { Button, ButtonSubtext } from "..";
+import { IdeMessengerContext } from "../../context/IdeMessenger";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+import { setIsExploreDialogOpen } from "../../redux/slices/uiSlice";
+import { LocalStorageKey, setLocalStorage } from "../../util/localStorage";
+import { ReusableCard } from "../ReusableCard";
+
+export function ExploreHubCard() {
+  const dispatch = useAppDispatch();
+  const isOpen = useAppSelector((state) => state.ui.isExploreDialogOpen);
+  const ideMessenger = useContext(IdeMessengerContext);
+
+  if (!isOpen) return null;
+
+  return (
+    <ReusableCard
+      showCloseButton={true}
+      onClose={() => {
+        setLocalStorage(LocalStorageKey.IsExploreDialogOpen, false);
+        setLocalStorage(LocalStorageKey.HasDismissedExploreDialog, true);
+        return dispatch(setIsExploreDialogOpen(false));
+      }}
+    >
+      <div className="flex flex-col items-center gap-1 p-4 text-center">
+        <h2 className="text-2xl font-semibold">Create Your Own Assistant</h2>
+
+        <p className="max-w-lg text-base leading-relaxed">
+          Discover and remix popular assistants, or create your own from scratch
+        </p>
+
+        <Button
+          className="w-full"
+          onClick={() => {
+            ideMessenger.request("controlPlane/openUrl", {
+              path: "/explore/assistants",
+              orgSlug: undefined,
+            });
+          }}
+        >
+          Explore Assistants
+        </Button>
+
+        <ButtonSubtext
+          onClick={() => {
+            ideMessenger.request("controlPlane/openUrl", {
+              path: "/new?type=assistant",
+              orgSlug: undefined,
+            });
+          }}
+        >
+          <div className="mt-4 flex cursor-pointer items-center justify-center gap-1">
+            <span>Or, create your own assistant from scratch</span>
+            <ChevronRightIcon className="h-3 w-3" />
+          </div>
+        </ButtonSubtext>
+      </div>
+    </ReusableCard>
+  );
+}

gui/src/components/OnboardingCard/OnboardingCard.tsx

@@ -1,20 +1,9 @@
-import * as Tabs from "./tabs";
-import { TabTitle, OnboardingCardTabs } from "./components/OnboardingCardTabs";
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import styled from "styled-components";
-import { CloseButton, defaultBorderRadius, vscInputBackground } from "../";
+import { useAppSelector } from "../../redux/hooks";
 import { getLocalStorage, setLocalStorage } from "../../util/localStorage";
+import { ReusableCard } from "../ReusableCard";
+import { OnboardingCardTabs, TabTitle } from "./components/OnboardingCardTabs";
 import { useOnboardingCard } from "./hooks/useOnboardingCard";
-import { useAppSelector } from "../../redux/hooks";
-
-const StyledCard = styled.div`
-  margin: auto;
-  border-radius: ${defaultBorderRadius};
-  background-color: ${vscInputBackground};
-  box-shadow:
-    0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-`;
+import * as Tabs from "./tabs";
 
 export interface OnboardingCardState {
   show?: boolean;
@@ -47,20 +36,16 @@ export function OnboardingCard({ isDialog }: OnboardingCardProps) {
   }
 
   return (
-    <StyledCard
-      className="xs:py-4 xs:px-4 relative px-2 py-3"
-      data-testid="onboarding-card"
+    <ReusableCard
+      showCloseButton={!isDialog && !!config.models.length}
+      onClose={() => onboardingCard.close()}
+      testId="onboarding-card"
     >
       <OnboardingCardTabs
         activeTab={onboardingCard.activeTab || "Best"}
         onTabClick={onboardingCard.setActiveTab}
       />
-      {!isDialog && !!config.models.length && (
-        <CloseButton onClick={() => onboardingCard.close()}>
-          <XMarkIcon className="mt-1.5 hidden h-5 w-5 hover:brightness-125 sm:flex" />
-        </CloseButton>
-      )}
-      <div className="content py-4">{renderTabContent()}</div>
-    </StyledCard>
+      {renderTabContent()}
+    </ReusableCard>
   );
 }

gui/src/components/OnboardingCard/platform/PlatformOnboardingCard.tsx

@@ -1,23 +1,12 @@
-import { XMarkIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
-import styled from "styled-components";
-import { CloseButton, defaultBorderRadius, vscInputBackground } from "../..";
+import { useAppSelector } from "../../../redux/hooks";
 import { getLocalStorage, setLocalStorage } from "../../../util/localStorage";
 import Alert from "../../gui/Alert";
+import { ReusableCard } from "../../ReusableCard";
 import { TabTitle } from "../components/OnboardingCardTabs";
 import { useOnboardingCard } from "../hooks";
 import OnboardingLocalTab from "../tabs/OnboardingLocalTab";
 import MainTab from "./tabs/main";
-import { useAppSelector } from "../../../redux/hooks";
-
-const StyledCard = styled.div`
-  margin: auto;
-  border-radius: ${defaultBorderRadius};
-  background-color: ${vscInputBackground};
-  box-shadow:
-    0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-`;
 
 export interface OnboardingCardState {
   show?: boolean;
@@ -31,44 +20,38 @@ interface OnboardingCardProps {
 export function PlatformOnboardingCard({ isDialog }: OnboardingCardProps) {
   const onboardingCard = useOnboardingCard();
   const config = useAppSelector((store) => store.config.config);
+  const [currentTab, setCurrentTab] = useState<"main" | "local">("main");
 
   if (getLocalStorage("onboardingStatus") === undefined) {
     setLocalStorage("onboardingStatus", "Started");
   }
 
-  const [currentTab, setCurrentTab] = useState<"main" | "local">("main");
-
   return (
-    <StyledCard className="xs:py-4 xs:px-4 relative px-2 py-3">
-      {!isDialog && !!config.models.length && (
-        <CloseButton onClick={() => onboardingCard.close()}>
-          <XMarkIcon className="mt-1.5 hidden h-5 w-5 hover:brightness-125 sm:flex" />
-        </CloseButton>
-      )}
-      <div className="content py-4">
-        <div className="flex h-full w-full items-center justify-center">
-          {currentTab === "main" ? (
-            <MainTab
-              onRemainLocal={() => setCurrentTab("local")}
-              isDialog={isDialog}
-            />
-          ) : (
-            <div className="mt-4 flex flex-col">
-              <Alert type="info">
-                By choosing this option, Continue will be configured by a local{" "}
-                <code>config.yaml</code> file. If you're just looking to use
-                Ollama and still want to manage your configuration through
-                Continue, click{" "}
-                <a href="#" onClick={() => setCurrentTab("main")}>
-                  here
-                </a>
-              </Alert>
-
-              <OnboardingLocalTab isDialog={isDialog} />
-            </div>
-          )}
-        </div>
+    <ReusableCard
+      showCloseButton={!isDialog && !!config.models.length}
+      onClose={() => onboardingCard.close()}
+    >
+      <div className="flex h-full w-full items-center justify-center">
+        {currentTab === "main" ? (
+          <MainTab
+            onRemainLocal={() => setCurrentTab("local")}
+            isDialog={isDialog}
+          />
+        ) : (
+          <div className="mt-4 flex flex-col">
+            <Alert type="info">
+              By choosing this option, Continue will be configured by a local{" "}
+              <code>config.yaml</code> file. If you're just looking to use
+              Ollama and still want to manage your configuration through
+              Continue, click{" "}
+              <a href="#" onClick={() => setCurrentTab("main")}>
+                here
+              </a>
+            </Alert>
+            <OnboardingLocalTab isDialog={isDialog} />
+          </div>
+        )}
       </div>
-    </StyledCard>
+    </ReusableCard>
   );
 }

gui/src/components/ReusableCard.tsx

@@ -0,0 +1,42 @@
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import styled from "styled-components";
+import { CloseButton, defaultBorderRadius, vscInputBackground } from ".";
+
+const StyledCard = styled.div`
+  margin: auto;
+  border-radius: ${defaultBorderRadius};
+  background-color: ${vscInputBackground};
+  box-shadow:
+    0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+`;
+
+interface ReusableCardProps {
+  children: React.ReactNode;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+  className?: string;
+  testId?: string;
+}
+
+export function ReusableCard({
+  children,
+  showCloseButton,
+  onClose,
+  className = "",
+  testId,
+}: ReusableCardProps) {
+  return (
+    <StyledCard
+      className={`xs:py-4 xs:px-4 relative px-2 py-3 ${className}`}
+      data-testid={testId}
+    >
+      {showCloseButton && (
+        <CloseButton onClick={onClose}>
+          <XMarkIcon className="mt-1.5 hidden h-5 w-5 hover:brightness-125 sm:flex" />
+        </CloseButton>
+      )}
+      <div className="content py-4">{children}</div>
+    </StyledCard>
+  );
+}

gui/src/pages/gui/Chat.tsx

@@ -22,6 +22,7 @@ import {
 import CodeToEditCard from "../../components/CodeToEditCard";
 import FeedbackDialog from "../../components/dialogs/FeedbackDialog";
 import FreeTrialOverDialog from "../../components/dialogs/FreeTrialOverDialog";
+import { ExploreHubCard } from "../../components/ExploreHubCard";
 import { useFindWidget } from "../../components/find/FindWidget";
 import TimelineItem from "../../components/gui/TimelineItem";
 import ChatIndexingPeeks from "../../components/indexing/ChatIndexingPeeks";
@@ -76,9 +77,11 @@ import {
 import getMultifileEditPrompt from "../../util/getMultifileEditPrompt";
 import { getLocalStorage, setLocalStorage } from "../../util/localStorage";
 import ConfigErrorIndicator from "./ConfigError";
+import { ExploreDialogWatcher } from "./ExploreDialogWatcher";
 import { ToolCallDiv } from "./ToolCallDiv";
 import { ToolCallButtons } from "./ToolCallDiv/ToolCallButtonsDiv";
 import ToolOutput from "./ToolCallDiv/ToolOutput";
+import { useAutoScroll } from "./useAutoScroll";
 
 const StopButton = styled.div`
   background-color: ${vscBackground};
@@ -136,58 +139,6 @@ function fallbackRender({ error, resetErrorBoundary }: any) {
   );
 }
 
-const useAutoScroll = (
-  ref: React.RefObject<HTMLDivElement>,
-  history: unknown[],
-) => {
-  const [userHasScrolled, setUserHasScrolled] = useState(false);
-
-  useEffect(() => {
-    if (history.length) {
-      setUserHasScrolled(false);
-    }
-  }, [history.length]);
-
-  useEffect(() => {
-    if (!ref.current || history.length === 0) return;
-
-    const handleScroll = () => {
-      const elem = ref.current;
-      if (!elem) return;
-
-      const isAtBottom =
-        Math.abs(elem.scrollHeight - elem.scrollTop - elem.clientHeight) < 1;
-
-      /**
-       * We stop auto scrolling if a user manually scrolled up.
-       * We resume auto scrolling if a user manually scrolled to the bottom.
-       */
-      setUserHasScrolled(!isAtBottom);
-    };
-
-    const resizeObserver = new ResizeObserver(() => {
-      const elem = ref.current;
-      if (!elem || userHasScrolled) return;
-      elem.scrollTop = elem.scrollHeight;
-    });
-
-    ref.current.addEventListener("scroll", handleScroll);
-
-    // Observe the container
-    resizeObserver.observe(ref.current);
-
-    // Observe all immediate children
-    Array.from(ref.current.children).forEach((child) => {
-      resizeObserver.observe(child);
-    });
-
-    return () => {
-      resizeObserver.disconnect();
-      ref.current?.removeEventListener("scroll", handleScroll);
-    };
-  }, [ref, history.length, userHasScrolled]);
-};
-
 export function Chat() {
   const posthog = usePostHog();
   const dispatch = useAppDispatch();
@@ -227,6 +178,9 @@ export function Chat() {
   );
   const lastSessionId = useAppSelector((state) => state.session.lastSessionId);
   const useHub = useAppSelector(selectUseHub);
+  const hasDismissedExploreDialog = useAppSelector(
+    (state) => state.ui.hasDismissedExploreDialog,
+  );
 
   useEffect(() => {
     // Cmd + Backspace to delete current step
@@ -570,6 +524,8 @@ export function Chat() {
             />
           )}
 
+          {!hasDismissedExploreDialog && <ExploreDialogWatcher />}
+
           {history.length === 0 && (
             <>
               {onboardingCard.show && (
@@ -587,6 +543,12 @@ export function Chat() {
                   <TutorialCard onClose={closeTutorialCard} />
                 </div>
               )}
+
+              {!onboardingCard.show && showTutorialCard === false && (
+                <div className="mx-2 mt-10">
+                  <ExploreHubCard />
+                </div>
+              )}
             </>
           )}
         </div>