feat: personalized roadmap (#8886)

* wip

* wip

* wip

* wip

* wip

* Roadmap personalization

* Fix personalization not working

* UI changes for personalize modal

* Add upgrade and limits checks

* Update placeholder

* Update picture

* Improve personalize

* Improve personalize popup

* Update image on quote message

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1753099755914
+		"lastUpdateCheck": 1753810743067
 	}
 }

src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx

@@ -0,0 +1,247 @@
+import { Loader2Icon, PersonStandingIcon } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { usePersonalizedRoadmap } from '../../hooks/use-personalized-roadmap';
+import {
+  refreshProgressCounters,
+  renderTopicProgress,
+} from '../../lib/resource-progress';
+import { PersonalizedRoadmapModal } from './PersonalizedRoadmapModal';
+import { PersonalizedRoadmapSwitcher } from './PersonalizedRoadmapSwitcher';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { httpPost } from '../../lib/query-http';
+import { useToast } from '../../hooks/use-toast';
+import { queryClient } from '../../stores/query-client';
+import { userResourceProgressOptions } from '../../queries/resource-progress';
+import { useAuth } from '../../hooks/use-auth';
+import { roadmapJSONOptions } from '../../queries/roadmap';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { cn } from '../../lib/classname';
+
+type PersonalizedRoadmapProps = {
+  roadmapId: string;
+};
+
+export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
+  const { roadmapId } = props;
+
+  const toast = useToast();
+  const currentUser = useAuth();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isPersonalized, setIsPersonalized] = useState(false);
+
+  const { data: roadmap } = useQuery(
+    roadmapJSONOptions(roadmapId),
+    queryClient,
+  );
+
+  const {
+    data: userProgress,
+    isLoading: isUserProgressLoading,
+    refetch: refetchUserProgress,
+  } = useQuery(userResourceProgressOptions('roadmap', roadmapId), queryClient);
+
+  useEffect(() => {
+    if (userProgress?.personalized) {
+      setIsPersonalized(true);
+    }
+  }, [userProgress]);
+
+  const alreadyInProgressNodeIds = useMemo(() => {
+    return new Set([
+      ...(userProgress?.learning ?? []),
+      ...(userProgress?.done ?? []),
+    ]);
+  }, [userProgress]);
+
+  const allPendingNodeIds = useMemo(() => {
+    const nodes =
+      roadmap?.json?.nodes?.filter((node) =>
+        ['topic', 'subtopic'].includes(node?.type ?? ''),
+      ) ?? [];
+
+    return nodes
+      .filter((node) => {
+        const topicId = node?.id;
+        return !alreadyInProgressNodeIds.has(topicId);
+      })
+      .map((node) => node?.id);
+  }, [roadmap, alreadyInProgressNodeIds]);
+
+  const clearResourceProgressLocalStorage = useCallback(() => {
+    localStorage.removeItem(`roadmap-${roadmapId}-${currentUser?.id}-progress`);
+    localStorage.removeItem(`roadmap-${roadmapId}-${currentUser?.id}-favorite`);
+  }, [roadmapId, currentUser]);
+
+  const { mutate: savePersonalization, isPending: isSavingPersonalization } =
+    useMutation(
+      {
+        mutationFn: (data: { topicIds: string[]; information: string }) => {
+          const remainingTopicIds = allPendingNodeIds.filter(
+            (nodeId) => !data.topicIds.includes(nodeId),
+          );
+
+          return httpPost(`/v1-save-personalization/${roadmapId}`, {
+            personalized: {
+              ...data,
+              topicIds: remainingTopicIds,
+            },
+          });
+        },
+        onError: (error) => {
+          toast.error(error?.message ?? 'Failed to save personalization');
+        },
+        onSuccess: () => {
+          clearResourceProgressLocalStorage();
+          refetchUserProgress();
+          refreshProgressCounters();
+          toast.success('Personalization saved successfully');
+        },
+      },
+      queryClient,
+    );
+
+  const { generatePersonalizedRoadmap, status } = usePersonalizedRoadmap({
+    roadmapId,
+    onStart: () => {
+      setIsModalOpen(false);
+    },
+    onError: (error) => {
+      for (const nodeId of allPendingNodeIds) {
+        renderTopicProgress(nodeId, 'pending');
+      }
+    },
+    onData: (data) => {
+      const { topicIds } = data;
+      topicIds.forEach((topicId) => {
+        if (alreadyInProgressNodeIds.has(topicId)) {
+          return;
+        }
+
+        renderTopicProgress(topicId, 'pending');
+      });
+    },
+    onFinish: (data) => {
+      const { topicIds, information } = data;
+      savePersonalization({ topicIds, information });
+    },
+  });
+
+  const { mutate: clearPersonalization, isPending: isClearing } = useMutation(
+    {
+      mutationFn: () => {
+        return httpPost(`/v1-clear-roadmap-personalization/${roadmapId}`, {});
+      },
+      onError: (error) => {
+        toast.error(error?.message ?? 'Failed to clear personalization');
+      },
+      onSuccess: () => {
+        // Reset all topics to pending state
+        allPendingNodeIds.forEach((topicId) => {
+          renderTopicProgress(topicId, 'pending');
+        });
+
+        setIsPersonalized(false);
+        toast.success('Personalization cleared successfully.');
+        refetchUserProgress();
+      },
+    },
+    queryClient,
+  );
+
+  const isGenerating =
+    status !== 'idle' || isClearing || isSavingPersonalization;
+
+  const handleTogglePersonalization = (showPersonalized: boolean) => {
+    setIsPersonalized(showPersonalized);
+
+    if (!showPersonalized) {
+      const allTopicIds = allPendingNodeIds;
+      allTopicIds.forEach((topicId) => {
+        renderTopicProgress(topicId, 'pending');
+      });
+    } else if (userProgress?.personalized) {
+      const { topicIds } = userProgress.personalized;
+      // user is asking for personalized roadmap, we need to
+      // mark all the pending ids which are in the personalized roadmap
+      // as skipped and mark the rest as pending
+      allPendingNodeIds.forEach((topicId) => {
+        if (topicIds.includes(topicId)) {
+          renderTopicProgress(topicId, 'skipped');
+        } else {
+          renderTopicProgress(topicId, 'pending');
+        }
+      });
+    }
+  };
+
+  return (
+    <>
+      {isModalOpen && (
+        <PersonalizedRoadmapModal
+          info={userProgress?.personalized?.information ?? ''}
+          onClose={() => setIsModalOpen(false)}
+          onSubmit={(information) => {
+            for (const nodeId of allPendingNodeIds) {
+              renderTopicProgress(nodeId, 'skipped');
+            }
+
+            generatePersonalizedRoadmap(information);
+          }}
+          onClearProgress={() => {
+            setIsModalOpen(false);
+            clearPersonalization();
+          }}
+        />
+      )}
+
+      {userProgress?.personalized?.information ? (
+        <PersonalizedRoadmapSwitcher
+          isPersonalized={isPersonalized}
+          onToggle={handleTogglePersonalization}
+          onEdit={() => setIsModalOpen(true)}
+          onRemove={() => {
+            if (confirm('Are you sure you want to remove personalization?')) {
+              clearPersonalization();
+            }
+          }}
+        />
+      ) : (
+        <button
+          className="group hidden sm:inline-flex items-center gap-1.5 border-b-2 border-b-transparent pb-2.5 text-sm font-normal text-gray-500 transition-colors hover:text-black"
+          onClick={() => {
+            if (!isLoggedIn()) {
+              showLoginPopup();
+              return;
+            }
+
+            setIsModalOpen(true);
+          }}
+          disabled={isGenerating}
+        >
+          {isGenerating ? (
+            <>
+              <Loader2Icon className="h-4 w-4 shrink-0 animate-spin" />
+              <span>Personalizing...</span>
+            </>
+          ) : (
+            <>
+              <PersonStandingIcon className="h-4 w-4 shrink-0" />
+              <span>Personalize</span>
+              <span
+                className={cn(
+                  'ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors sm:flex',
+                  {
+                    'bg-yellow-200 text-black group-hover:bg-yellow-300': true,
+                  },
+                )}
+              >
+                New
+              </span>
+            </>
+          )}
+        </button>
+      )}
+    </>
+  );
+}

src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx

@@ -0,0 +1,90 @@
+import { PersonStandingIcon, Trash2 } from 'lucide-react';
+import { useId, useState, type FormEvent } from 'react';
+import { Modal } from '../Modal';
+import { queryClient } from '../../stores/query-client';
+import { aiLimitOptions } from '../../queries/ai-course';
+import { useQuery } from '@tanstack/react-query';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+
+type PersonalizedRoadmapModalProps = {
+  onClose: () => void;
+  info: string;
+  onSubmit: (information: string) => void;
+  onClearProgress: () => void;
+};
+
+export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
+  const {
+    onClose,
+    info: infoProp,
+    onSubmit: onSubmitProp,
+    onClearProgress,
+  } = props;
+
+  const [info, setInfo] = useState(infoProp);
+  const infoFieldId = useId();
+
+  const { data: limits, isLoading: isLimitLoading } = useQuery(
+    aiLimitOptions(),
+    queryClient,
+  );
+
+  const hasReachedLimit =
+    limits?.used && limits?.limit ? limits.used >= limits.limit : false;
+  console.log(limits);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmitProp(info);
+  };
+
+  if (hasReachedLimit) {
+    return <UpgradeAccountModal onClose={onClose} />;
+  }
+
+  return (
+    <Modal
+      onClose={onClose}
+      wrapperClassName="h-auto"
+      overlayClassName="items-start md:items-center"
+      bodyClassName="rounded-2xl"
+    >
+      <form onSubmit={handleSubmit} className="p-4">
+        <h2 className="text-lg font-semibold">Personalize Roadmap</h2>
+        <div className="mt-0.5 flex flex-col gap-2">
+          <label htmlFor={infoFieldId} className="text-balance text-gray-600">
+            Tell us about yourself to personlize this roadmap as per your goals
+            and experience
+          </label>
+          <textarea
+            id={infoFieldId}
+            className="h-[150px] w-full resize-none rounded-xl border border-gray-200 p-3 focus:border-gray-500 focus:outline-none"
+            placeholder="e.g. I am a beginner, give me a simpler version of the roadmap"
+            value={info}
+            onChange={(e) => setInfo(e.target.value)}
+            autoFocus
+          />
+        </div>
+
+        <div className="mt-2 grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            className="flex items-center justify-center gap-2 rounded-xl border border-red-200 p-2 px-2 text-sm text-red-600 hover:bg-red-50 focus:outline-none"
+            onClick={onClearProgress}
+          >
+            <Trash2 className="h-4 w-4" />
+            Reset
+          </button>
+          <button
+            type="submit"
+            disabled={!info.trim()}
+            className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <PersonStandingIcon className="h-4 w-4" />
+            Personalize
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

src/components/PersonalizedRoadmap/PersonalizedRoadmapSwitcher.tsx

@@ -0,0 +1,99 @@
+import { PencilIcon, XIcon, MoreVertical } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import { useState, useRef, useEffect } from 'react';
+
+type PersonalizedRoadmapSwitcherProps = {
+  isPersonalized: boolean;
+  onToggle: (isPersonalized: boolean) => void;
+  onEdit: () => void;
+  onRemove: () => void;
+  className?: string;
+};
+
+export function PersonalizedRoadmapSwitcher(
+  props: PersonalizedRoadmapSwitcherProps,
+) {
+  const { isPersonalized, onToggle, onEdit, onRemove, className } = props;
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className={cn('mb-2 flex items-center gap-2', className)}>
+      <div className="relative flex items-center">
+        <div className="relative" ref={dropdownRef}>
+          <button
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            className="mr-0.5 p-1 text-gray-400 hover:text-gray-600"
+            title="More options"
+          >
+            <MoreVertical className="h-3.5 w-3.5" />
+          </button>
+          {isDropdownOpen && (
+            <div className="absolute top-full left-0 z-20 mt-1 rounded-md border border-gray-200 bg-white shadow-lg">
+              <button
+                onClick={() => {
+                  onEdit();
+                  setIsDropdownOpen(false);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+              >
+                <PencilIcon className="h-3.5 w-3.5" />
+                Edit
+              </button>
+              <button
+                onClick={() => {
+                  onRemove();
+                  setIsDropdownOpen(false);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+              >
+                <XIcon className="h-3.5 w-3.5" />
+                Delete
+              </button>
+            </div>
+          )}
+        </div>
+        <div className="flex bg-gray-200 rounded-full">
+          <button
+            className={cn(
+              'rounded-full px-2.5 py-1 text-xs font-medium transition-all',
+              isPersonalized
+                ? 'bg-gray-900 text-white'
+                : 'text-gray-500 hover:text-gray-700',
+            )}
+            onClick={() => onToggle(true)}
+          >
+            Personalized
+          </button>
+          <button
+            className={cn(
+              'rounded-full px-2.5 py-1 text-xs font-medium transition-all',
+              !isPersonalized
+                ? 'bg-gray-900 text-white'
+                : 'text-gray-500 hover:text-gray-700',
+            )}
+            onClick={() => onToggle(false)}
+          >
+            Original
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/RoadmapHeader.astro

@@ -15,6 +15,7 @@ import ProgressHelpPopup from './ProgressHelpPopup.astro';
 import { ScheduleButton } from './Schedule/ScheduleButton';
 import { ShareRoadmapButton } from './ShareRoadmapButton';
 import { TabLink } from './TabLink';
+import { PersonalizedRoadmap } from './PersonalizedRoadmap/PersonalizedRoadmap';
 
 export interface Props {
   title: string;
@@ -160,20 +161,11 @@ const hasProjects = projectCount > 0;
                 text='AI Tutor'
                 mobileText='AI'
                 isActive={false}
-                badgeText='New'
               />
             )}
           </div>
 
-          <TabLink
+          <PersonalizedRoadmap roadmapId={roadmapId} client:load />
-            url={`https://github.com/kamranahmedse/developer-roadmap/issues/new/choose`}
-            icon={MessageCircle}
-            text='Suggest Changes'
-            isExternal={true}
-            hideTextOnMobile={true}
-            isActive={false}
-            className='hidden sm:flex'
-          />
         </div>
       )
     }

src/components/SQLCourse/AuthorCredentials.tsx

@@ -1,12 +1,11 @@
-import { Award } from 'lucide-react';
 
 export function AuthorCredentials() {
   return (
     <div className="mx-auto mt-8 flex flex-col items-start gap-4 text-sm text-zinc-400 sm:flex-row sm:flex-wrap sm:items-center md:mt-12 md:justify-center md:gap-x-3 md:gap-y-2">
       <div className="flex items-center gap-1">
         <img
-          src="https://assets.roadmap.sh/guest/kamran-lqjta.jpeg"
+          src="https://github.com/kamranahmedse.png"
-          className="size-8 rounded-full object-cover mr-1.5"
+          className="mr-1.5 size-8 rounded-full object-cover"
           alt="Kamran Ahmed"
         />
         <span>Course by</span>
@@ -22,7 +21,7 @@ export function AuthorCredentials() {
         <a
           href="https://github.com/kamranahmedse"
           target="_blank"
-          className="hidden items-center gap-1 sm:inline-flex text-yellow-500 hover:text-yellow-400"
+          className="hidden items-center gap-1 text-yellow-500 hover:text-yellow-400 sm:inline-flex"
         >
           <svg className="size-4 fill-zinc-400" viewBox="0 0 24 24">
             <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.291 2.747-1.022 2.747-1.022.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />

src/components/SQLCourse/AuthorQuoteMessage.tsx

@@ -1,4 +1,4 @@
-import { Award, QuoteIcon, Trophy } from 'lucide-react';
+import { Award, Trophy } from 'lucide-react';
 
 export function AuthorQuoteMessage() {
   return (
@@ -45,7 +45,7 @@ export function AuthorQuoteMessage() {
 
           <div className="mt-8 flex items-center gap-4">
             <img
-              src="https://assets.roadmap.sh/guest/kamran-lqjta.jpeg"
+              src="https://github.com/kamranahmedse.png"
               alt="Kamran Ahmed"
               className="size-14 rounded-full ring-2 ring-yellow-500/20"
             />

src/components/SQLCourseVariant/AuthorCredentials.tsx

@@ -6,7 +6,7 @@ export function AuthorCredentials() {
   return (
     <div className="flex items-center gap-3 text-white lg:mt-auto">
       <img
-        src="https://assets.roadmap.sh/guest/kamran-course-pf-agibf.jpg"
+        src="https://github.com/kamranahmedse.png"
         className="aspect-[4/5] h-[110px] w-[88px] rounded-xl object-cover shadow-md"
         alt="Kamran Ahmed"
       />

src/components/SQLCourseVariant/MeetYourInstructor.tsx

@@ -35,7 +35,7 @@ export function MeetYourInstructor() {
           <div className="flex shrink-0 flex-col items-center">
             <div className="relative">
               <img
-                src="https://assets.roadmap.sh/guest/kamran-lqjta.jpeg"
+                src="https://github.com/kamranahmedse.png"
                 alt="Kamran Ahmed"
                 className="h-40 w-40 rounded-full object-cover ring-4 ring-yellow-500/40 transition-all duration-300 hover:ring-yellow-500/60"
               />
@@ -43,9 +43,7 @@ export function MeetYourInstructor() {
             <h5 className="mt-6 text-xl font-semibold text-zinc-100">
               Kamran Ahmed
             </h5>
-            <span className="text-yellow-400">
+            <span className="text-yellow-400">Founder of roadmap.sh</span>
-              Founder of roadmap.sh
-            </span>
           </div>
 
           <div className="flex-1 space-y-8">
@@ -54,7 +52,10 @@ export function MeetYourInstructor() {
                 {features.map((feature, index) => {
                   const IconComponent = feature.icon;
                   return (
-                    <div key={index} className="flex items-center gap-3 rounded-lg border border-yellow-500/20 bg-gradient-to-r from-yellow-500/10 to-yellow-500/5 p-3">
+                    <div
+                      key={index}
+                      className="flex items-center gap-3 rounded-lg border border-yellow-500/20 bg-gradient-to-r from-yellow-500/10 to-yellow-500/5 p-3"
+                    >
                       <IconComponent className="size-4 shrink-0 text-yellow-400" />
                       <span className="text-sm font-medium text-zinc-300">
                         {feature.text}

src/hooks/use-personalized-roadmap.ts

@@ -0,0 +1,152 @@
+import { useCallback, useRef, useState } from 'react';
+import { removeAuthToken } from '../lib/jwt';
+import { readChatStream } from '../lib/chat';
+import { flushSync } from 'react-dom';
+
+type PersonalizedRoadmapResponse = {
+  topicIds: string[];
+  information: string;
+};
+
+type UsePersonalizedRoadmapOptions = {
+  roadmapId: string;
+  onError?: (error: Error) => void;
+  onStart?: () => void;
+  onData?: (data: PersonalizedRoadmapResponse) => void;
+  onFinish?: (data: PersonalizedRoadmapResponse) => void;
+};
+
+export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
+  const { roadmapId, onError, onStart, onData, onFinish } = options;
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const contentRef = useRef<PersonalizedRoadmapResponse | null>(null);
+
+  const [status, setStatus] = useState<
+    'idle' | 'streaming' | 'loading' | 'ready' | 'error'
+  >('idle');
+
+  const informationRef = useRef<string>('');
+
+  const generatePersonalizedRoadmap = async (information: string) => {
+    try {
+      informationRef.current = information;
+      onStart?.();
+      setStatus('loading');
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = new AbortController();
+
+      const response = await fetch(
+        `${import.meta.env.PUBLIC_API_URL}/v1-personalized-roadmap`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            roadmapId,
+            information,
+          }),
+          signal: abortControllerRef.current?.signal,
+          credentials: 'include',
+        },
+      );
+
+      if (!response.ok) {
+        const data = await response.json();
+        setStatus('error');
+        if (data.status === 401) {
+          removeAuthToken();
+          window.location.reload();
+        }
+
+        throw new Error(data?.message || 'Something went wrong');
+      }
+
+      const stream = response.body;
+      if (!stream) {
+        setStatus('error');
+        throw new Error('Something went wrong');
+      }
+
+      await readChatStream(stream, {
+        onMessage: async (content) => {
+          flushSync(() => {
+            setStatus('streaming');
+            const parsed = parsePersonalizedRoadmapResponse(content);
+            contentRef.current = {
+              ...parsed,
+              information: informationRef.current
+            };
+            onData?.(contentRef.current);
+          });
+        },
+        onMessageEnd: async () => {
+          flushSync(() => {
+            setStatus('ready');
+          });
+        },
+      });
+
+      setStatus('idle');
+      abortControllerRef.current = null;
+
+      if (!contentRef.current) {
+        setStatus('error');
+        throw new Error('Something went wrong');
+      }
+
+      onFinish?.(contentRef.current);
+    } catch (error) {
+      if (abortControllerRef.current?.signal.aborted) {
+        // we don't want to show error if the user stops the chat
+        // so we just return
+        return;
+      }
+
+      onError?.(error as Error);
+      setStatus('error');
+    }
+  };
+
+  const stop = useCallback(() => {
+    if (!abortControllerRef.current) {
+      return;
+    }
+
+    abortControllerRef.current.abort();
+    abortControllerRef.current = null;
+  }, []);
+
+  return {
+    status,
+    stop,
+    generatePersonalizedRoadmap,
+  };
+}
+
+export function parsePersonalizedRoadmapResponse(
+  response: string,
+): Omit<PersonalizedRoadmapResponse, 'information'> {
+  const topicIds: Set<string> = new Set();
+  const lines = response.split('\n');
+  for (const line of lines) {
+    if (!line.trim()) {
+      continue;
+    }
+
+    if (line.startsWith('-')) {
+      const topicId = line.slice(1).trim();
+      if (!topicId) {
+        continue;
+      }
+
+      topicIds.add(topicId);
+    }
+  }
+
+  return {
+    topicIds: Array.from(topicIds),
+  };
+}

src/lib/resource-progress.ts

@@ -2,6 +2,8 @@ import Cookies from 'js-cookie';
 import { httpGet, httpPost } from './http';
 import { TOKEN_COOKIE_NAME, getUser } from './jwt';
 import { roadmapProgress, totalRoadmapNodes } from '../stores/roadmap.ts';
+import { queryClient } from '../stores/query-client.ts';
+import { userResourceProgressOptions } from '../queries/resource-progress.ts';
 // @ts-ignore
 import Element = astroHTML.JSX.Element;
 
@@ -59,6 +61,7 @@ export async function updateResourceProgress(
     learning: string[];
     skipped: string[];
     isFavorite: boolean;
+    personalized: { topicIds: string[]; information: string };
   }>(`${import.meta.env.PUBLIC_API_URL}/v1-update-resource-progress`, {
     topicId,
     resourceType,
@@ -70,12 +73,27 @@ export async function updateResourceProgress(
     throw new Error(error?.message || 'Something went wrong');
   }
 
-  setResourceProgress(
+  roadmapProgress.set({
-    resourceType,
+    done: response.done,
-    resourceId,
+    learning: response.learning,
-    response.done,
+    skipped: response.skipped,
-    response.learning,
+    personalized: response.personalized,
-    response.skipped,
+  });
+
+  queryClient.setQueryData(
+    userResourceProgressOptions(resourceType, resourceId).queryKey,
+    (oldData) => {
+      if (!oldData) {
+        return undefined;
+      }
+
+      return {
+        ...oldData,
+        done: response.done,
+        learning: response.learning,
+        skipped: response.skipped,
+      };
+    },
   );
 
   return response;
@@ -158,65 +176,31 @@ export function clearMigratedRoadmapProgress(
 export async function getResourceProgress(
   resourceType: 'roadmap' | 'best-practice',
   resourceId: string,
-): Promise<{ done: string[]; learning: string[]; skipped: string[] }> {
+): Promise<{
+  done: string[];
+  learning: string[];
+  skipped: string[];
+  personalized: { topicIds: string[]; information: string };
+}> {
   // No need to load progress if user is not logged in
   if (!Cookies.get(TOKEN_COOKIE_NAME)) {
     return {
       done: [],
       learning: [],
       skipped: [],
+      personalized: {
+        topicIds: [],
+        information: '',
+      },
     };
   }
 
-  const userId = getUser()?.id;
-  const progressKey = `${resourceType}-${resourceId}-${userId}-progress`;
-  const isFavoriteKey = `${resourceType}-${resourceId}-favorite`;
-
-  const rawIsFavorite = localStorage.getItem(isFavoriteKey);
-  const isFavorite = JSON.parse(rawIsFavorite || '0') === 1;
-
-  const rawProgress = localStorage.getItem(progressKey);
-  const progress = JSON.parse(rawProgress || 'null');
-
-  const progressTimestamp = progress?.timestamp;
-  const diff = new Date().getTime() - parseInt(progressTimestamp || '0', 10);
-  const isProgressExpired = diff > 15 * 60 * 1000; // 15 minutes
-
-  if (!progress || isProgressExpired) {
-    return loadFreshProgress(resourceType, resourceId);
-  } else {
-    setResourceProgress(
-      resourceType,
-      resourceId,
-      progress?.done || [],
-      progress?.learning || [],
-      progress?.skipped || [],
-    );
-  }
-
-  // Dispatch event to update favorite status in the MarkFavorite component
-  window.dispatchEvent(
-    new CustomEvent('mark-favorite', {
-      detail: {
-        resourceType,
-        resourceId,
-        isFavorite,
-      },
-    }),
-  );
-
-  return progress;
-}
-
-async function loadFreshProgress(
-  resourceType: ResourceType,
-  resourceId: string,
-) {
   const { response, error } = await httpGet<{
     done: string[];
     learning: string[];
     skipped: string[];
     isFavorite: boolean;
+    personalized: { topicIds: string[]; information: string };
   }>(`${import.meta.env.PUBLIC_API_URL}/v1-get-user-resource-progress`, {
     resourceType,
     resourceId,
@@ -228,16 +212,19 @@ async function loadFreshProgress(
       done: [],
       learning: [],
       skipped: [],
+      personalized: {
+        topicIds: [],
+        information: '',
+      },
     };
   }
 
-  setResourceProgress(
+  roadmapProgress.set({
-    resourceType,
+    done: response.done,
-    resourceId,
+    learning: response.learning,
-    response?.done || [],
+    skipped: response.skipped,
-    response?.learning || [],
+    personalized: response.personalized,
-    response?.skipped || [],
+  });
-  );
 
   // Dispatch event to update favorite status in the MarkFavorite component
   window.dispatchEvent(
@@ -253,31 +240,6 @@ async function loadFreshProgress(
   return response;
 }
 
-export function setResourceProgress(
-  resourceType: 'roadmap' | 'best-practice',
-  resourceId: string,
-  done: string[],
-  learning: string[],
-  skipped: string[],
-): void {
-  roadmapProgress.set({
-    done,
-    learning,
-    skipped,
-  });
-
-  const userId = getUser()?.id;
-  localStorage.setItem(
-    `${resourceType}-${resourceId}-${userId}-progress`,
-    JSON.stringify({
-      done,
-      learning,
-      skipped,
-      timestamp: new Date().getTime(),
-    }),
-  );
-}
-
 export function topicSelectorAll(
   topicId: string,
   parentElement: Document | SVGElement | HTMLDivElement = document,
@@ -365,6 +327,10 @@ export async function renderResourceProgress(
     done = [],
     learning = [],
     skipped = [],
+    personalized = {
+      topicIds: [],
+      information: '',
+    },
   } = (await getResourceProgress(resourceType, resourceId)) || {};
 
   done.forEach((topicId) => {
@@ -379,6 +345,10 @@ export async function renderResourceProgress(
     renderTopicProgress(topicId, 'skipped');
   });
 
+  personalized.topicIds.forEach((topicId: string) => {
+    renderTopicProgress(topicId, 'skipped');
+  });
+
   refreshProgressCounters();
 }
 

src/pages/[roadmapId]/courses.astro

@@ -80,6 +80,7 @@ const courses = roadmapData.courses || [];
       coursesCount={courses.length}
       projectCount={projects.length}
       activeTab='courses'
+      hasAIChat={true}
     />
 
     <div class='container'>

src/pages/[roadmapId]/index.astro

@@ -99,7 +99,6 @@ const courses = roadmapData.courses || [];
   />
 
   <TopicDetail
-    resourceTitle={roadmapData.title}
     resourceId={roadmapId}
     resourceType='roadmap'
     renderer={roadmapData.renderer}
@@ -139,7 +138,7 @@ const courses = roadmapData.courses || [];
       </div>
     </div>
 
-    <div class='container relative max-w-[1000px]!'>
+    <div class='relative container max-w-[1000px]!'>
       <ShareIcons
         resourceId={roadmapId}
         resourceType='roadmap'

src/pages/[roadmapId]/projects.astro

@@ -86,6 +86,7 @@ const { response: userCounts } =
       activeTab='projects'
       projectCount={projects.length}
       coursesCount={roadmapData.courses?.length || 0}
+      hasAIChat={true}
     />
 
     <div class='container'>

src/queries/resource-progress.ts

@@ -8,6 +8,10 @@ export type GetUserResourceProgressResponse = {
   learning: string[];
   skipped: string[];
   isFavorite: boolean;
+  personalized?: {
+    topicIds: string[];
+    information: string;
+  };
 };
 
 export function userResourceProgressOptions(

src/stores/roadmap.ts

@@ -12,7 +12,12 @@ export const canManageCurrentRoadmap = computed(
 );
 
 export const roadmapProgress = atom<
-  { done: string[]; learning: string[]; skipped: string[] } | undefined
+  | {
+      done: string[];
+      learning: string[];
+      skipped: string[];
+      personalized: { topicIds: string[]; information: string };
+    }
+  | undefined
 >();
 export const totalRoadmapNodes = atom<number | undefined>();
-