feat(companion): add browsing context consent prompt

packages/extension/src/companion/App.tsx

@@ -24,6 +24,7 @@ import { GrowthBookProvider } from '@dailydotdev/shared/src/components/GrowthBoo
 import { NotificationsContextProvider } from '@dailydotdev/shared/src/contexts/NotificationsContext';
 import { useEventListener } from '@dailydotdev/shared/src/hooks';
 import { structuredCloneJsonPolyfill } from '@dailydotdev/shared/src/lib/structuredClone';
+import type { RemoteSettings } from '@dailydotdev/shared/src/graphql/settings';
 import Companion from './Companion';
 import CustomRouter from '../lib/CustomRouter';
 import { companionFetch } from './companionFetch';
@@ -62,6 +63,9 @@ export default function App({
 }: CompanionData): ReactElement | null {
   useError();
   const [token, setToken] = useState(accessToken);
+  const [currentSettings, setCurrentSettings] = useState(settings);
+  const updateSettings = (newSettings: RemoteSettings) =>
+    setCurrentSettings(newSettings);
   const [isOptOutCompanion, setIsOptOutCompanion] = useState<boolean>(
     settings?.optOutCompanion ?? false,
   );
@@ -109,7 +113,11 @@ export default function App({
               updateUser={async () => undefined}
               squads={squads}
             >
-              <SettingsContextProvider settings={settings}>
+              <SettingsContextProvider
+                settings={currentSettings}
+                updateSettings={updateSettings}
+                loadedSettings={!!currentSettings}
+              >
                 <AlertContextProvider alerts={alerts}>
                   <LogContextProvider
                     app={app}
@@ -126,7 +134,9 @@ export default function App({
                       <Companion
                         postData={postData}
                         companionHelper={alerts?.companionHelper ?? false}
-                        companionExpanded={settings?.companionExpanded ?? false}
+                        companionExpanded={
+                          currentSettings?.companionExpanded ?? false
+                        }
                         onOptOut={() => setIsOptOutCompanion(true)}
                         onUpdateToken={setToken}
                       />
@@ -138,7 +148,7 @@ export default function App({
                     />
                     <Toast
                       autoDismissNotifications={
-                        settings?.autoDismissNotifications
+                        currentSettings?.autoDismissNotifications
                       }
                     />
                   </LogContextProvider>

packages/extension/src/companion/Companion.tsx

@@ -19,6 +19,7 @@ import {
   updatePostCache,
 } from '@dailydotdev/shared/src/lib/query';
 import { getCompanionWrapper } from '@dailydotdev/shared/src/lib/extension';
+import { useCompanionBrowsingConsent } from '@dailydotdev/shared/src/hooks/useCompanionBrowsingConsent';
 import CompanionMenu from './CompanionMenu';
 import CompanionContent from './CompanionContent';
 import { companionRequest } from './companionRequest';
@@ -87,6 +88,8 @@ export default function Companion({
   });
   const containerRef = useRef<HTMLDivElement>();
   const [assetsLoaded, setAssetsLoaded] = useState(isTesting);
+  const { shouldShowBanner, onAccept, onDismiss } =
+    useCompanionBrowsingConsent();
   usePopupSelector({ parentSelector: getCompanionWrapper });
   const client = useQueryClient();
   const { data: post } = useQuery({
@@ -164,8 +167,14 @@ export default function Companion({
         setVerticalPosition={setVerticalPosition}
         isDragging={isDragging}
         setIsDragging={setIsDragging}
+        showConsentNotification={shouldShowBanner}
+      />
+      <CompanionContent
+        post={post}
+        shouldShowBanner={shouldShowBanner}
+        onAccept={onAccept}
+        onDismiss={onDismiss}
       />
-      <CompanionContent post={post} />
     </Container>
   );
 }

packages/extension/src/companion/CompanionBrowsingConsentBanner.tsx

@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import CloseButton from '@dailydotdev/shared/src/components/CloseButton';
+import type { UseCompanionBrowsingConsentReturn } from '@dailydotdev/shared/src/hooks/useCompanionBrowsingConsent';
+
+type CompanionBrowsingConsentBannerProps = Pick<
+  UseCompanionBrowsingConsentReturn,
+  'onAccept' | 'onDismiss'
+>;
+
+export function CompanionBrowsingConsentBanner({
+  onAccept,
+  onDismiss,
+}: CompanionBrowsingConsentBannerProps): ReactElement {
+  return (
+    <div className="relative mb-4 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4">
+      <CloseButton
+        size={ButtonSize.XSmall}
+        className="absolute right-1 top-1"
+        onClick={onDismiss}
+      />
+      <p className="pr-6 font-bold typo-callout">
+        Personalize with browsing context?
+      </p>
+      <p className="mt-1 text-text-tertiary typo-footnote">
+        Allow daily.dev to use your browsing context for more relevant
+        recommendations. Change anytime in settings.
+      </p>
+      <div className="mt-3 flex gap-3">
+        <Button
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Primary}
+          onClick={onAccept}
+        >
+          Allow
+        </Button>
+        <Button
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Float}
+          onClick={onDismiss}
+        >
+          No thanks
+        </Button>
+      </div>
+    </div>
+  );
+}

packages/extension/src/companion/CompanionContent.tsx

@@ -21,18 +21,23 @@ import { Origin } from '@dailydotdev/shared/src/lib/log';
 
 import { Tooltip } from '@dailydotdev/shared/src/components/tooltip/Tooltip';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
+import type { UseCompanionBrowsingConsentReturn } from '@dailydotdev/shared/src/hooks/useCompanionBrowsingConsent';
 import { CompanionEngagements } from './CompanionEngagements';
 import { CompanionDiscussion } from './CompanionDiscussion';
+import { CompanionBrowsingConsentBanner } from './CompanionBrowsingConsentBanner';
 import { useBackgroundPaginatedRequest } from './useBackgroundPaginatedRequest';
 
 type CompanionContentProps = {
   post: PostBootData;
-};
+} & UseCompanionBrowsingConsentReturn;
 
 const COMPANION_TOP_OFFSET_PX = 120;
 
 export default function CompanionContent({
   post,
+  shouldShowBanner,
+  onAccept,
+  onDismiss,
 }: CompanionContentProps): ReactElement {
   const { logEvent } = useLogContext();
   const [copying, copyLink] = useCopyLink(() => post.commentsPermalink);
@@ -83,6 +88,12 @@ export default function CompanionContent({
           />
         </Tooltip>
       </div>
+      {shouldShowBanner && (
+        <CompanionBrowsingConsentBanner
+          onAccept={onAccept}
+          onDismiss={onDismiss}
+        />
+      )}
       <p className="my-4 flex-1 break-words typo-callout">
         <TLDRText>TLDR -</TLDRText>
         <span>

packages/extension/src/companion/CompanionMenu.tsx

@@ -74,6 +74,7 @@ type CompanionMenuProps = {
   isDragging: boolean;
   setIsDragging: (dragging: boolean) => void;
   onOpenComments?: () => void;
+  showConsentNotification?: boolean;
 };
 
 export default function CompanionMenu({
@@ -87,6 +88,7 @@ export default function CompanionMenu({
   setVerticalPosition,
   isDragging,
   setIsDragging,
+  showConsentNotification,
 }: CompanionMenuProps): ReactElement {
   const { modal, closeModal } = useLazyModal();
   const { logEvent } = useLogContext();
@@ -355,6 +357,7 @@ export default function CompanionMenu({
           isAlertDisabled={!showCompanionHelper}
           tooltipContainerClassName={tooltipContainerClassName}
           onToggleCompanion={toggleCompanion}
+          showNotification={showConsentNotification && !companionState}
         />
         <Tooltip
           side="left"

packages/extension/src/companion/CompanionToggle.tsx

@@ -18,13 +18,15 @@ interface CompanionToggleProps {
   isAlertDisabled: boolean;
   onToggleCompanion: () => void;
   tooltipContainerClassName?: string;
+  showNotification?: boolean;
 }
 
 function CompanionToggle({
   companionState,
   isAlertDisabled,
   tooltipContainerClassName,
   onToggleCompanion,
+  showNotification,
 }: CompanionToggleProps): ReactElement {
   return (
     <AlertPointer
@@ -47,7 +49,7 @@ function CompanionToggle({
             'group-hover:btn-secondary': !companionState,
           })}
           icon={
-            <>
+            <span className="relative">
               <LogoIcon
                 className={{
                   container: classNames(
@@ -64,7 +66,10 @@ function CompanionToggle({
                     : 'hidden -rotate-90 group-hover:block',
                 )}
               />
-            </>
+              {!!showNotification && (
+                <span className="absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-background-default bg-accent-cabbage-default group-hover:hidden" />
+              )}
+            </span>
           }
           onClick={onToggleCompanion}
         />

packages/shared/src/graphql/settings.ts

@@ -18,6 +18,7 @@ export type SettingsFlags = {
   sidebarBookmarksExpanded: boolean;
   clickbaitShieldEnabled: boolean;
   noAiFeedEnabled?: boolean;
+  browsingContextEnabled?: boolean;
   timezoneMismatchIgnore?: string;
   prompt?: Record<string, boolean>;
   lastPrompt?: string;
@@ -32,6 +33,7 @@ export enum SidebarSettingsFlags {
   BookmarksExpanded = 'sidebarBookmarksExpanded',
   ClickbaitShieldEnabled = 'clickbaitShieldEnabled',
   NoAiFeedEnabled = 'noAiFeedEnabled',
+  BrowsingContextEnabled = 'browsingContextEnabled',
 }
 
 export type RemoteSettings = {