feat: not found topics

Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>

.astro/settings.json

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

.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

.github/workflows/sync-content-to-repo.yml

@@ -0,0 +1,66 @@
+name: Sync Content to Repo
+
+on:
+  workflow_dispatch:
+    inputs:
+      roadmap_slug:
+        description: "The ID of the roadmap to sync"
+        required: true
+        default: "__default__"
+
+jobs:
+  sync-content:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm@v9
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Setup Node.js Version 20 (LTS)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install Dependencies and Sync Content
+        run: |
+          echo "Installing Dependencies"
+          pnpm install
+          echo "Syncing Content to Repo"
+          npm run sync:content-to-repo -- --roadmap-slug=${{ inputs.roadmap_slug }} --secret=${{ secrets.GH_SYNC_SECRET }}
+
+      - name: Check for changes
+        id: verify-changed-files
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT
+          fi
+      
+      - name: Create PR
+        if: steps.verify-changed-files.outputs.changed == 'true'
+        uses: peter-evans/create-pull-request@v7
+        with:
+          delete-branch: false
+          branch: "chore/sync-content-to-repo-${{ inputs.roadmap_slug }}"
+          base: "master"
+          labels: |
+            automated pr
+          reviewers: jcanalesluna,kamranahmedse
+          commit-message: "chore: sync content to repo"
+          title: "chore: sync content to repository - ${{ inputs.roadmap_slug }}"
+          body: |
+            ## Sync Content to Repo
+            
+            > [!IMPORTANT]
+            > This PR Syncs the Content to the Repo for the Roadmap: ${{ inputs.roadmap_slug }}
+            >
+            > Commit: ${{ github.sha }}
+            > Workflow Path: ${{ github.workflow_ref }}
+
+            **Please Review the Changes and Merge the PR if everything is fine.** 

.github/workflows/sync-repo-to-database.yml

@@ -0,0 +1,67 @@
+name: Sync on Roadmap Changes
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'src/data/roadmaps/**'
+
+jobs:
+  sync-on-changes:
+    runs-on: ubuntu-latest
+    if: github.actor != 'github-actions[bot]' && github.actor != 'dependabot[bot]'
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2  # Fetch previous commit to compare changes
+
+      - name: Setup pnpm@v9
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Setup Node.js Version 20 (LTS)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Get changed files
+        id: changed-files
+        run: |
+          echo "Getting changed files in /src/data/roadmaps/"
+          
+          # Get changed files between HEAD and previous commit
+          CHANGED_FILES=$(git diff --name-only HEAD~1 HEAD -- src/data/roadmaps/)
+          
+          if [ -z "$CHANGED_FILES" ]; then
+            echo "No changes found in roadmaps directory"
+            echo "has_changes=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+          
+          echo "Changed files:"
+          echo "$CHANGED_FILES"
+          
+          # Convert to space-separated list for the script
+          CHANGED_FILES_LIST=$(echo "$CHANGED_FILES" | tr '\n' ',')
+          
+          echo "has_changes=true" >> $GITHUB_OUTPUT
+          echo "changed_files=$CHANGED_FILES_LIST" >> $GITHUB_OUTPUT
+
+      - name: Install Dependencies
+        if: steps.changed-files.outputs.has_changes == 'true'
+        run: |
+          echo "Installing Dependencies"
+          pnpm install
+
+      - name: Run sync script with changed files
+        if: steps.changed-files.outputs.has_changes == 'true'
+        run: |
+          echo "Running sync script for changed roadmap files"
+          echo "Changed files: ${{ steps.changed-files.outputs.changed_files }}"
+          
+          # Run your script with the changed file paths
+          npm run sync:repo-to-database -- --files="${{ steps.changed-files.outputs.changed_files }}" --secret=${{ secrets.GH_SYNC_SECRET }}

package.json

@@ -29,9 +29,13 @@
     "compress:images": "tsx ./scripts/compress-images.ts",
     "generate:roadmap-content-json": "tsx ./scripts/editor-roadmap-content-json.ts",
     "migrate:editor-roadmaps": "tsx ./scripts/migrate-editor-roadmap.ts",
+    "sync:content-to-repo": "tsx ./scripts/sync-content-to-repo.ts",
+    "sync:repo-to-database": "tsx ./scripts/sync-repo-to-database.ts",
+    "migrate:content-repo-to-database": "tsx ./scripts/migrate-content-repo-to-database.ts",
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@ai-sdk/react": "2.0.0-beta.34",
     "@astrojs/node": "^9.2.1",
     "@astrojs/react": "^4.2.7",
     "@astrojs/sitemap": "^3.4.0",
@@ -43,6 +47,7 @@
     "@radix-ui/react-popover": "^1.1.14",
     "@resvg/resvg-js": "^2.6.2",
     "@roadmapsh/editor": "workspace:*",
+    "@shikijs/transformers": "^3.9.2",
     "@tailwindcss/vite": "^4.1.7",
     "@tanstack/react-query": "^5.76.1",
     "@tiptap/core": "^2.12.0",
@@ -65,6 +70,7 @@
     "image-size": "^2.0.2",
     "jose": "^6.0.11",
     "js-cookie": "^3.0.5",
+    "katex": "^0.16.22",
     "lucide-react": "^0.511.0",
     "luxon": "^3.6.1",
     "markdown-it-async": "^2.2.0",
@@ -80,10 +86,14 @@
     "react-confetti": "^6.4.0",
     "react-dom": "^19.1.0",
     "react-dropzone": "^14.3.8",
+    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.2",
     "react-textarea-autosize": "^8.5.9",
     "react-tooltip": "^5.28.1",
     "rehype-external-links": "^3.0.0",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "roadmap-renderer": "^1.0.7",
     "sanitize-html": "^2.17.0",
@@ -98,6 +108,7 @@
     "tiptap-markdown": "^0.8.10",
     "turndown": "^7.2.0",
     "unified": "^11.0.5",
+    "zod": "^4.0.17",
     "zustand": "^5.0.4"
   },
   "devDependencies": {
@@ -113,7 +124,7 @@
     "@types/react-slick": "^0.23.13",
     "@types/sanitize-html": "^2.16.0",
     "@types/turndown": "^5.0.5",
-    "ai": "^4.3.16",
+    "ai": "5.0.0-beta.34",
     "csv-parser": "^3.2.0",
     "gh-pages": "^6.3.0",
     "js-yaml": "^4.1.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@ai-sdk/react':
+        specifier: 2.0.0-beta.34
+        version: 2.0.0-beta.34(react@19.1.0)(zod@4.0.17)
       '@astrojs/node':
         specifier: ^9.2.1
         version: 9.2.1(astro@5.7.13(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.2)(tsx@4.19.4)(typescript@5.8.3))
@@ -41,6 +44,9 @@ importers:
       '@roadmapsh/editor':
         specifier: workspace:*
         version: link:packages/editor
+      '@shikijs/transformers':
+        specifier: ^3.9.2
+        version: 3.9.2
       '@tailwindcss/vite':
         specifier: ^4.1.7
         version: 4.1.7(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.19.4))
@@ -107,6 +113,9 @@ importers:
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
+      katex:
+        specifier: ^0.16.22
+        version: 0.16.22
       lucide-react:
         specifier: ^0.511.0
         version: 0.511.0(react@19.1.0)
@@ -152,6 +161,9 @@ importers:
       react-dropzone:
         specifier: ^14.3.8
         version: 14.3.8(react@19.1.0)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@19.1.4)(react@19.1.0)
       react-resizable-panels:
         specifier: ^3.0.2
         version: 3.0.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -164,6 +176,15 @@ importers:
       rehype-external-links:
         specifier: ^3.0.0
         version: 3.0.0
+      rehype-katex:
+        specifier: ^7.0.1
+        version: 7.0.1
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      remark-math:
+        specifier: ^6.0.0
+        version: 6.0.0
       remark-parse:
         specifier: ^11.0.0
         version: 11.0.0
@@ -206,13 +227,16 @@ importers:
       unified:
         specifier: ^11.0.5
         version: 11.0.5
+      zod:
+        specifier: ^4.0.17
+        version: 4.0.17
       zustand:
         specifier: ^5.0.4
         version: 5.0.4(@types/react@19.1.4)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0))
     devDependencies:
       '@ai-sdk/google':
         specifier: ^1.2.18
-        version: 1.2.18(zod@3.24.4)
+        version: 1.2.18(zod@4.0.17)
       '@playwright/test':
         specifier: ^1.52.0
         version: 1.52.0
@@ -247,8 +271,8 @@ importers:
         specifier: ^5.0.5
         version: 5.0.5
       ai:
-        specifier: ^4.3.16
-        version: 4.3.16(react@19.1.0)(zod@3.24.4)
+        specifier: 5.0.0-beta.34
+        version: 5.0.0-beta.34(zod@4.0.17)
       csv-parser:
         specifier: ^3.2.0
         version: 3.2.0
@@ -263,7 +287,7 @@ importers:
         version: 14.1.0
       openai:
         specifier: ^4.100.0
-        version: 4.100.0(zod@3.24.4)
+        version: 4.100.0(zod@4.0.17)
       prettier:
         specifier: ^3.5.3
         version: 3.5.3
@@ -334,6 +358,12 @@ importers:
 
 packages:
 
+  '@ai-sdk/gateway@1.0.0-beta.19':
+    resolution: {integrity: sha512-felWPMuECZRGx8xnmvH5dW3jywKTkGnw/tXN8szphGzEDr/BfxywuXijfPBG2WBUS6frPXsvSLDRdCm5W38PXA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4
+
   '@ai-sdk/google@1.2.18':
     resolution: {integrity: sha512-8B70+i+uB12Ae6Sn6B9Oc6W0W/XorGgc88Nx0pyUrcxFOdytHBaAVhTPqYsO3LLClfjYN8pQ9GMxd5cpGEnUcA==}
     engines: {node: '>=18'}
@@ -346,26 +376,30 @@ packages:
     peerDependencies:
       zod: ^3.23.8
 
+  '@ai-sdk/provider-utils@3.0.0-beta.10':
+    resolution: {integrity: sha512-e6WSsgM01au04/1L/v5daXHn00eKjPBQXl3jq3BfvQbQ1jo8Rls2pvrdkyVc25jBW4TV4Zm+tw+v6NAh5NPXMA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4
+
   '@ai-sdk/provider@1.1.3':
     resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
     engines: {node: '>=18'}
 
-  '@ai-sdk/react@1.2.12':
-    resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
+  '@ai-sdk/provider@2.0.0-beta.2':
+    resolution: {integrity: sha512-vqhtZA7R24q1XnmfmIb1fZSmHMIaJH1BVQ+0kFnNJgqWsc+V8i+yfetZ37gUc4fXATFmBuS/6O7+RPoHsZ2Fqg==}
+    engines: {node: '>=18'}
+
+  '@ai-sdk/react@2.0.0-beta.34':
+    resolution: {integrity: sha512-6v55iQbJRJ42nFM7GPzmzaP3NxEgFamKQu2fYc8jl5McQyYka3gZ7jHpy4jTMy+b16HIXKgPqVXd/RN/+uHOEw==}
     engines: {node: '>=18'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
+      zod: ^3.25.76 || ^4
     peerDependenciesMeta:
       zod:
         optional: true
 
-  '@ai-sdk/ui-utils@1.2.11':
-    resolution: {integrity: sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      zod: ^3.23.8
-
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -1915,6 +1949,9 @@ packages:
   '@shikijs/core@3.4.2':
     resolution: {integrity: sha512-AG8vnSi1W2pbgR2B911EfGqtLE9c4hQBYkv/x7Z+Kt0VxhgQKcW7UNDVYsu9YxwV6u+OJrvdJrMq6DNWoBjihQ==}
 
+  '@shikijs/core@3.9.2':
+    resolution: {integrity: sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA==}
+
   '@shikijs/engine-javascript@3.4.2':
     resolution: {integrity: sha512-1/adJbSMBOkpScCE/SB6XkjJU17ANln3Wky7lOmrnpl+zBdQ1qXUJg2GXTYVHRq+2j3hd1DesmElTXYDgtfSOQ==}
 
@@ -1927,9 +1964,15 @@ packages:
   '@shikijs/themes@3.4.2':
     resolution: {integrity: sha512-qAEuAQh+brd8Jyej2UDDf+b4V2g1Rm8aBIdvt32XhDPrHvDkEnpb7Kzc9hSuHUxz0Iuflmq7elaDuQAP9bHIhg==}
 
+  '@shikijs/transformers@3.9.2':
+    resolution: {integrity: sha512-MW5hT4TyUp6bNAgTExRYLk1NNasVQMTCw1kgbxHcEC0O5cbepPWaB+1k+JzW9r3SP2/R8kiens8/3E6hGKfgsA==}
+
   '@shikijs/types@3.4.2':
     resolution: {integrity: sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg==}
 
+  '@shikijs/types@3.9.2':
+    resolution: {integrity: sha512-/M5L0Uc2ljyn2jKvj4Yiah7ow/W+DJSglVafvWAJ/b8AZDeeRAdMu3c2riDzB7N42VD+jSnWxeP9AKtd4TfYVw==}
+
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
@@ -1938,6 +1981,9 @@ packages:
     engines: {node: '>= 8.0.0'}
     hasBin: true
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
@@ -2223,12 +2269,12 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/diff-match-patch@1.0.36':
-    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
-
   '@types/dom-to-image@2.6.7':
     resolution: {integrity: sha512-me5VbCv+fcXozblWwG13krNBvuEOm6kA5xoa4RrjDJCNFOZSWR3/QLtOXimBHk1Fisq69Gx3JtOoXtg1N1tijg==}
 
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
@@ -2241,6 +2287,9 @@ packages:
   '@types/js-cookie@3.0.6':
     resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
 
+  '@types/katex@0.16.7':
+    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
+
   '@types/linkify-it@3.0.5':
     resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
 
@@ -2309,6 +2358,9 @@ packages:
   '@types/turndown@5.0.5':
     resolution: {integrity: sha512-TL2IgGgc7B5j78rIccBtlYAnkuv8nUQqhQc+DSYV5j9Be9XOcm/SKOVRuA47xAVI3680Tk9B1d8flK2GWT2+4w==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
@@ -2346,15 +2398,11 @@ packages:
     resolution: {integrity: sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==}
     engines: {node: '>= 8.0.0'}
 
-  ai@4.3.16:
-    resolution: {integrity: sha512-KUDwlThJ5tr2Vw0A1ZkbDKNME3wzWhuVfAOwIvFUzl1TPVDFAXDFTXio3p+jaKneB+dKNCvFFlolYmmgHttG1g==}
+  ai@5.0.0-beta.34:
+    resolution: {integrity: sha512-AFJ4p35AxA+1KFtnoouePLaAUpoj0IxIAoq/xgIv88qzYajTg4Sac5KaV4CDHFRLoF0L2cwhlFXt/Ss/zyBKkA==}
     engines: {node: '>=18'}
     peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
-    peerDependenciesMeta:
-      react:
-        optional: true
+      zod: ^3.25.76 || ^4
 
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
@@ -2506,6 +2554,9 @@ packages:
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
@@ -2565,6 +2616,10 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   common-ancestor-path@1.0.1:
     resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
 
@@ -2734,9 +2789,6 @@ packages:
   dfa@1.2.0:
     resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
 
-  diff-match-patch@1.0.5:
-    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
-
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -2864,6 +2916,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -2881,6 +2936,10 @@ packages:
   eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
+  eventsource-parser@3.0.3:
+    resolution: {integrity: sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA==}
+    engines: {node: '>=20.0.0'}
+
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -3052,6 +3111,12 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-from-dom@5.0.1:
+    resolution: {integrity: sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==}
+
+  hast-util-from-html-isomorphic@2.0.0:
+    resolution: {integrity: sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==}
+
   hast-util-from-html@2.0.3:
     resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
 
@@ -3070,6 +3135,9 @@ packages:
   hast-util-to-html@9.0.5:
     resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
   hast-util-to-parse5@8.0.0:
     resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
 
@@ -3096,6 +3164,9 @@ packages:
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -3127,6 +3198,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
@@ -3134,9 +3208,18 @@ packages:
     resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
   is-docker@3.0.0:
     resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3158,6 +3241,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
   is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
     engines: {node: '>=14.16'}
@@ -3224,14 +3310,13 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsondiffpatch@0.6.0:
-    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  katex@0.16.22:
+    resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==}
+    hasBin: true
+
   kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -3486,6 +3571,18 @@ packages:
   mdast-util-gfm@3.1.0:
     resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
 
+  mdast-util-math@3.0.0:
+    resolution: {integrity: sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
   mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
@@ -3535,6 +3632,9 @@ packages:
   micromark-extension-gfm@3.0.0:
     resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
 
+  micromark-extension-math@3.1.0:
+    resolution: {integrity: sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==}
+
   micromark-factory-destination@2.0.1:
     resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
@@ -3776,6 +3876,9 @@ packages:
   parse-css-color@0.2.1:
     resolution: {integrity: sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==}
 
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
   parse-latin@7.0.0:
     resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==}
 
@@ -4065,6 +4168,12 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
@@ -4137,6 +4246,9 @@ packages:
   rehype-external-links@3.0.0:
     resolution: {integrity: sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==}
 
+  rehype-katex@7.0.1:
+    resolution: {integrity: sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==}
+
   rehype-parse@9.0.1:
     resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
 
@@ -4152,6 +4264,9 @@ packages:
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
+  remark-math@6.0.0:
+    resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==}
+
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
@@ -4354,6 +4469,12 @@ packages:
     resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
     engines: {node: '>=0.10.0'}
 
+  style-to-js@1.1.17:
+    resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==}
+
+  style-to-object@1.0.9:
+    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4362,8 +4483,8 @@ packages:
   suf-log@2.5.3:
     resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==}
 
-  swr@2.3.3:
-    resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
+  swr@2.3.5:
+    resolution: {integrity: sha512-4e7pjTVulZTIL+b/S0RYFsgDcTcXPLUOvBPqyh9YdD+PkHeEMoaPwDmF9Kv6I1nnPg1OFKhiiEYpsYaaE2W2jA==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -4830,6 +4951,9 @@ packages:
   zod@3.24.4:
     resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==}
 
+  zod@4.0.17:
+    resolution: {integrity: sha512-1PHjlYRevNxxdy2JZ8JcNAw7rX8V9P1AKkP+x/xZfxB0K5FYfuV+Ug6P/6NVSR2jHQ+FzDDoDHS04nYUsOIyLQ==}
+
   zustand@4.5.6:
     resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
     engines: {node: '>=12.7.0'}
@@ -4868,39 +4992,50 @@ packages:
 
 snapshots:
 
-  '@ai-sdk/google@1.2.18(zod@3.24.4)':
+  '@ai-sdk/gateway@1.0.0-beta.19(zod@4.0.17)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0-beta.2
+      '@ai-sdk/provider-utils': 3.0.0-beta.10(zod@4.0.17)
+      zod: 4.0.17
+
+  '@ai-sdk/google@1.2.18(zod@4.0.17)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
-      zod: 3.24.4
+      '@ai-sdk/provider-utils': 2.2.8(zod@4.0.17)
+      zod: 4.0.17
 
-  '@ai-sdk/provider-utils@2.2.8(zod@3.24.4)':
+  '@ai-sdk/provider-utils@2.2.8(zod@4.0.17)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
       nanoid: 3.3.11
       secure-json-parse: 2.7.0
-      zod: 3.24.4
+      zod: 4.0.17
+
+  '@ai-sdk/provider-utils@3.0.0-beta.10(zod@4.0.17)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0-beta.2
+      '@standard-schema/spec': 1.0.0
+      eventsource-parser: 3.0.3
+      zod: 4.0.17
+      zod-to-json-schema: 3.24.5(zod@4.0.17)
 
   '@ai-sdk/provider@1.1.3':
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/react@1.2.12(react@19.1.0)(zod@3.24.4)':
+  '@ai-sdk/provider@2.0.0-beta.2':
     dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.4)
+      json-schema: 0.4.0
+
+  '@ai-sdk/react@2.0.0-beta.34(react@19.1.0)(zod@4.0.17)':
+    dependencies:
+      '@ai-sdk/provider-utils': 3.0.0-beta.10(zod@4.0.17)
+      ai: 5.0.0-beta.34(zod@4.0.17)
       react: 19.1.0
-      swr: 2.3.3(react@19.1.0)
+      swr: 2.3.5(react@19.1.0)
       throttleit: 2.1.0
     optionalDependencies:
-      zod: 3.24.4
-
-  '@ai-sdk/ui-utils@1.2.11(zod@3.24.4)':
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
-      zod: 3.24.4
-      zod-to-json-schema: 3.24.5(zod@3.24.4)
+      zod: 4.0.17
 
   '@alloc/quick-lru@5.2.0': {}
 
@@ -6377,6 +6512,13 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
+  '@shikijs/core@3.9.2':
+    dependencies:
+      '@shikijs/types': 3.9.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
   '@shikijs/engine-javascript@3.4.2':
     dependencies:
       '@shikijs/types': 3.4.2
@@ -6396,11 +6538,21 @@ snapshots:
     dependencies:
       '@shikijs/types': 3.4.2
 
+  '@shikijs/transformers@3.9.2':
+    dependencies:
+      '@shikijs/core': 3.9.2
+      '@shikijs/types': 3.9.2
+
   '@shikijs/types@3.4.2':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  '@shikijs/types@3.9.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.2': {}
 
   '@shuding/opentype.js@1.4.0-beta.0':
@@ -6408,6 +6560,8 @@ snapshots:
       fflate: 0.7.4
       string.prototype.codepointat: 0.2.1
 
+  '@standard-schema/spec@1.0.0': {}
+
   '@swc/helpers@0.5.17':
     dependencies:
       tslib: 2.8.1
@@ -6686,10 +6840,12 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
-  '@types/diff-match-patch@1.0.36': {}
-
   '@types/dom-to-image@2.6.7': {}
 
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.7
+
   '@types/estree@1.0.7': {}
 
   '@types/fontkit@2.0.8':
@@ -6702,6 +6858,8 @@ snapshots:
 
   '@types/js-cookie@3.0.6': {}
 
+  '@types/katex@0.16.7': {}
+
   '@types/linkify-it@3.0.5': {}
 
   '@types/linkify-it@5.0.0': {}
@@ -6775,6 +6933,8 @@ snapshots:
 
   '@types/turndown@5.0.5': {}
 
+  '@types/unist@2.0.11': {}
+
   '@types/unist@3.0.3': {}
 
   '@types/use-sync-external-store@0.0.6': {}
@@ -6823,17 +6983,13 @@ snapshots:
     dependencies:
       humanize-ms: 1.2.1
 
-  ai@4.3.16(react@19.1.0)(zod@3.24.4):
+  ai@5.0.0-beta.34(zod@4.0.17):
     dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
-      '@ai-sdk/react': 1.2.12(react@19.1.0)(zod@3.24.4)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.4)
+      '@ai-sdk/gateway': 1.0.0-beta.19(zod@4.0.17)
+      '@ai-sdk/provider': 2.0.0-beta.2
+      '@ai-sdk/provider-utils': 3.0.0-beta.10(zod@4.0.17)
       '@opentelemetry/api': 1.9.0
-      jsondiffpatch: 0.6.0
-      zod: 3.24.4
-    optionalDependencies:
-      react: 19.1.0
+      zod: 4.0.17
 
   ansi-align@3.0.1:
     dependencies:
@@ -7053,6 +7209,8 @@ snapshots:
 
   character-entities@2.0.2: {}
 
+  character-reference-invalid@2.0.1: {}
+
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
@@ -7097,6 +7255,8 @@ snapshots:
 
   commander@4.1.1: {}
 
+  commander@8.3.0: {}
+
   common-ancestor-path@1.0.1: {}
 
   commondir@1.0.1: {}
@@ -7236,8 +7396,6 @@ snapshots:
 
   dfa@1.2.0: {}
 
-  diff-match-patch@1.0.5: {}
-
   diff@5.2.0: {}
 
   dir-glob@3.0.1:
@@ -7360,6 +7518,8 @@ snapshots:
 
   esprima@4.0.1: {}
 
+  estree-util-is-identifier-name@3.0.0: {}
+
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
@@ -7372,6 +7532,8 @@ snapshots:
 
   eventemitter3@5.0.1: {}
 
+  eventsource-parser@3.0.3: {}
+
   extend-shallow@2.0.1:
     dependencies:
       is-extendable: 0.1.1
@@ -7576,6 +7738,19 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-from-dom@5.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hastscript: 9.0.1
+      web-namespaces: 2.0.1
+
+  hast-util-from-html-isomorphic@2.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-dom: 5.0.1
+      hast-util-from-html: 2.0.3
+      unist-util-remove-position: 5.0.0
+
   hast-util-from-html@2.0.3:
     dependencies:
       '@types/hast': 3.0.4
@@ -7634,6 +7809,26 @@ snapshots:
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.7
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.17
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   hast-util-to-parse5@8.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -7671,6 +7866,8 @@ snapshots:
 
   html-escaper@3.0.3: {}
 
+  html-url-attributes@3.0.1: {}
+
   html-void-elements@3.0.0: {}
 
   htmlparser2@8.0.2:
@@ -7702,12 +7899,23 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  inline-style-parser@0.2.4: {}
+
   iron-webcrypto@1.2.1: {}
 
   is-absolute-url@4.0.1: {}
 
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
   is-arrayish@0.3.2: {}
 
+  is-decimal@2.0.1: {}
+
   is-docker@3.0.0: {}
 
   is-extendable@0.1.1: {}
@@ -7720,6 +7928,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@2.0.1: {}
+
   is-inside-container@1.0.0:
     dependencies:
       is-docker: 3.0.0
@@ -7767,18 +7977,16 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsondiffpatch@0.6.0:
-    dependencies:
-      '@types/diff-match-patch': 1.0.36
-      chalk: 5.4.1
-      diff-match-patch: 1.0.5
-
   jsonfile@6.1.0:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  katex@0.16.22:
+    dependencies:
+      commander: 8.3.0
+
   kind-of@6.0.3: {}
 
   kleur@3.0.3: {}
@@ -8045,6 +8253,57 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-math@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      longest-streak: 3.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      unist-util-remove-position: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-phrasing@4.1.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -8163,6 +8422,16 @@ snapshots:
       micromark-util-combine-extensions: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-extension-math@3.1.0:
+    dependencies:
+      '@types/katex': 0.16.7
+      devlop: 1.1.0
+      katex: 0.16.22
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-destination@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
@@ -8377,7 +8646,7 @@ snapshots:
       regex: 6.0.1
       regex-recursion: 6.0.2
 
-  openai@4.100.0(zod@3.24.4):
+  openai@4.100.0(zod@4.0.17):
     dependencies:
       '@types/node': 18.19.100
       '@types/node-fetch': 2.6.12
@@ -8387,7 +8656,7 @@ snapshots:
       formdata-node: 4.4.1
       node-fetch: 2.7.0
     optionalDependencies:
-      zod: 3.24.4
+      zod: 4.0.17
     transitivePeerDependencies:
       - encoding
 
@@ -8425,6 +8694,16 @@ snapshots:
       color-name: 1.1.4
       hex-rgb: 4.3.0
 
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.1.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
   parse-latin@7.0.0:
     dependencies:
       '@types/nlcst': 2.0.3
@@ -8736,6 +9015,24 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-markdown@10.1.0(@types/react@19.1.4)(react@19.1.0):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 19.1.4
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 19.1.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
   react-refresh@0.17.0: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.1.4)(react@19.1.0):
@@ -8809,6 +9106,16 @@ snapshots:
       space-separated-tokens: 2.0.2
       unist-util-visit: 5.0.0
 
+  rehype-katex@7.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/katex': 0.16.7
+      hast-util-from-html-isomorphic: 2.0.0
+      hast-util-to-text: 4.0.2
+      katex: 0.16.22
+      unist-util-visit-parents: 6.0.1
+      vfile: 6.0.3
+
   rehype-parse@9.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -8845,6 +9152,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-math@6.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-math: 3.0.0
+      micromark-extension-math: 3.1.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -9155,6 +9471,14 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  style-to-js@1.1.17:
+    dependencies:
+      style-to-object: 1.0.9
+
+  style-to-object@1.0.9:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -9169,7 +9493,7 @@ snapshots:
     dependencies:
       s.color: 0.0.15
 
-  swr@2.3.3(react@19.1.0):
+  swr@2.3.5(react@19.1.0):
     dependencies:
       dequal: 2.0.3
       react: 19.1.0
@@ -9547,6 +9871,10 @@ snapshots:
     dependencies:
       zod: 3.24.4
 
+  zod-to-json-schema@3.24.5(zod@4.0.17):
+    dependencies:
+      zod: 4.0.17
+
   zod-to-ts@1.2.0(typescript@5.8.3)(zod@3.24.4):
     dependencies:
       typescript: 5.8.3
@@ -9554,6 +9882,8 @@ snapshots:
 
   zod@3.24.4: {}
 
+  zod@4.0.17: {}
+
   zustand@4.5.6(@types/react@19.1.4)(react@19.1.0):
     dependencies:
       use-sync-external-store: 1.5.0(react@19.1.0)

public/roadmap-content/aws.json

@@ -725,7 +725,7 @@
   },
   "2vQPmVNk1QpMM-15RKG8b": {
     "title": "Metrics",
-    "description": "In Amazon CloudWatch, **metrics** are fundamental concepts that you work with. A metric is the fundamental concept in CloudWatch and represents a time-ordered set of data points that are published to CloudWatch. Think of a metric as a variable to monitor, and the data points as representing the values of that variable over time. Metrics are uniquely defined by a name, a namespace, and zero or more dimensions up to 30 dimensions per metric. Every data point must have a timestamp. You can retrieve statistics about those data points as an ordered set of time-series data. CloudWatch provides metrics for every serviece in AWS.\n\nLearn more from the following resources:",
+    "description": "In Amazon CloudWatch, **metrics** are fundamental concepts that you work with. A metric is the fundamental concept in CloudWatch and represents a time-ordered set of data points that are published to CloudWatch. Think of a metric as a variable to monitor, and the data points as representing the values of that variable over time. Metrics are uniquely defined by a name, a namespace, and zero or more dimensions up to 30 dimensions per metric. Every data point must have a timestamp. You can retrieve statistics about those data points as an ordered set of time-series data. CloudWatch provides metrics for every service in AWS.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "CloudWatch Metrics",

public/roadmap-content/docker.json

@@ -153,6 +153,11 @@
         "title": "Underlying Technologies - Medium",
         "url": "https://medium.com/@furkan.turkal/how-does-docker-actually-work-the-hard-way-a-technical-deep-diving-c5b8ea2f0422",
         "type": "article"
+      },
+      {
+        "title": "Containers - Namespaces, Cgroups and Overlay Filesystem",
+        "url": "https://www.youtube.com/watch?v=wJdDWc6zO4U",
+        "type": "video"
       }
     ]
   },

public/roadmap-content/sql.json

@@ -107,7 +107,7 @@
     "links": [
       {
         "title": "SQL Operators: 6 Different Types",
-        "url": "https://www.dataquest.io/blog/sql-operators/",
+        "url": "https://dataengineeracademy.com/blog/sql-operators-6-different-types-code-examples/",
         "type": "article"
       }
     ]

readme.md

@@ -36,7 +36,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Backend Roadmap](https://roadmap.sh/backend) / [Backend Beginner Roadmap](https://roadmap.sh/backend?r=backend-beginner)
 - [DevOps Roadmap](https://roadmap.sh/devops) / [DevOps Beginner Roadmap](https://roadmap.sh/devops?r=devops-beginner)
 - [Full Stack Roadmap](https://roadmap.sh/full-stack)
-- [Git and GitHub](https://roadmap.sh/git-github)
+- [Git and GitHub](https://roadmap.sh/git-github) / [Git and GitHub Beginner](https://roadmap.sh/git-github?r=git-github-beginner)
 - [API Design Roadmap](https://roadmap.sh/api-design)
 - [Computer Science Roadmap](https://roadmap.sh/computer-science)
 - [Data Structures and Algorithms Roadmap](https://roadmap.sh/datastructures-and-algorithms)
@@ -47,6 +47,9 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Linux Roadmap](https://roadmap.sh/linux)
 - [Terraform Roadmap](https://roadmap.sh/terraform)
 - [Data Analyst Roadmap](https://roadmap.sh/data-analyst)
+- [BI Analyst Roadmap](https://roadmap.sh/bi-analyst)
+- [Data Engineer Roadmap](https://roadmap.sh/data-engineer)
+- [Machine Learning Roadmap](https://roadmap.sh/machine-learning)
 - [MLOps Roadmap](https://roadmap.sh/mlops)
 - [Product Manager Roadmap](https://roadmap.sh/product-manager)
 - [Engineering Manager Roadmap](https://roadmap.sh/engineering-manager)

scripts/migrate-content-repo-to-database.ts

@@ -0,0 +1,255 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { OfficialRoadmapDocument } from '../src/queries/official-roadmap';
+import { parse } from 'node-html-parser';
+import { markdownToHtml } from '../src/lib/markdown';
+import { htmlToMarkdown } from '../src/lib/html';
+import matter from 'gray-matter';
+import type { RoadmapFrontmatter } from '../src/lib/roadmap';
+import {
+  allowedOfficialRoadmapTopicResourceType,
+  type AllowedOfficialRoadmapTopicResourceType,
+  type SyncToDatabaseTopicContent,
+} from '../src/queries/official-roadmap-topic';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const args = process.argv.slice(2);
+const secret = args
+  .find((arg) => arg.startsWith('--secret='))
+  ?.replace('--secret=', '');
+if (!secret) {
+  throw new Error('Secret is required');
+}
+
+let roadmapJsonCache: Map<string, OfficialRoadmapDocument> = new Map();
+export async function fetchRoadmapJson(
+  roadmapId: string,
+): Promise<OfficialRoadmapDocument> {
+  if (roadmapJsonCache.has(roadmapId)) {
+    return roadmapJsonCache.get(roadmapId)!;
+  }
+
+  const response = await fetch(
+    `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch roadmap json: ${response.statusText} for ${roadmapId}`,
+    );
+  }
+
+  const data = await response.json();
+  if (data.error) {
+    throw new Error(
+      `Failed to fetch roadmap json: ${data.error} for ${roadmapId}`,
+    );
+  }
+
+  roadmapJsonCache.set(roadmapId, data);
+  return data;
+}
+
+export async function syncContentToDatabase(
+  topics: SyncToDatabaseTopicContent[],
+) {
+  const response = await fetch(
+    `https://roadmap.sh/api/v1-sync-official-roadmap-topics`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        topics,
+        secret,
+      }),
+    },
+  );
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(
+      `Failed to sync content to database: ${response.statusText} ${JSON.stringify(error, null, 2)}`,
+    );
+  }
+
+  return response.json();
+}
+
+// Directory containing the roadmaps
+const ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');
+const allRoadmaps = await fs.readdir(ROADMAP_CONTENT_DIR);
+
+const editorRoadmapIds = new Set<string>();
+for (const roadmapId of allRoadmaps) {
+  const roadmapFrontmatterDir = path.join(
+    ROADMAP_CONTENT_DIR,
+    roadmapId,
+    `${roadmapId}.md`,
+  );
+  const roadmapFrontmatterRaw = await fs.readFile(
+    roadmapFrontmatterDir,
+    'utf-8',
+  );
+  const { data } = matter(roadmapFrontmatterRaw);
+
+  const roadmapFrontmatter = data as RoadmapFrontmatter;
+  if (roadmapFrontmatter.renderer === 'editor') {
+    editorRoadmapIds.add(roadmapId);
+  }
+}
+
+for (const roadmapId of editorRoadmapIds) {
+  try {
+    const roadmap = await fetchRoadmapJson(roadmapId);
+
+    const files = await fs.readdir(
+      path.join(ROADMAP_CONTENT_DIR, roadmapId, 'content'),
+    );
+
+    console.log(`🚀 Starting ${files.length} files for ${roadmapId}`);
+    const topics: SyncToDatabaseTopicContent[] = [];
+
+    for (const file of files) {
+      const isContentFile = file.endsWith('.md');
+      if (!isContentFile) {
+        console.log(`🚨 Skipping ${file} because it is not a content file`);
+        continue;
+      }
+
+      const nodeSlug = file.replace('.md', '');
+      if (!nodeSlug) {
+        console.error(`🚨 Node id is required: ${file}`);
+        continue;
+      }
+
+      const nodeId = nodeSlug.split('@')?.[1];
+      if (!nodeId) {
+        console.error(`🚨 Node id is required: ${file}`);
+        continue;
+      }
+
+      const node = roadmap.nodes.find((node) => node.id === nodeId);
+      if (!node) {
+        console.error(`🚨 Node not found: ${file}`);
+        continue;
+      }
+
+      const filePath = path.join(
+        ROADMAP_CONTENT_DIR,
+        roadmapId,
+        'content',
+        `${nodeSlug}.md`,
+      );
+
+      const fileExists = await fs
+        .stat(filePath)
+        .then(() => true)
+        .catch(() => false);
+      if (!fileExists) {
+        console.log(`🚨 File not found: ${filePath}`);
+        continue;
+      }
+
+      const content = await fs.readFile(filePath, 'utf8');
+      const html = markdownToHtml(content, false);
+      const rootHtml = parse(html);
+
+      let ulWithLinks: HTMLElement | undefined;
+      rootHtml.querySelectorAll('ul').forEach((ul) => {
+        const listWithJustLinks = Array.from(ul.querySelectorAll('li')).filter(
+          (li) => {
+            const link = li.querySelector('a');
+            return link && link.textContent?.trim() === li.textContent?.trim();
+          },
+        );
+
+        if (listWithJustLinks.length > 0) {
+          // @ts-expect-error - TODO: fix this
+          ulWithLinks = ul;
+        }
+      });
+
+      const listLinks: SyncToDatabaseTopicContent['resources'] =
+        ulWithLinks !== undefined
+          ? Array.from(ulWithLinks.querySelectorAll('li > a'))
+              .map((link) => {
+                const typePattern = /@([a-z.]+)@/;
+                let linkText = link.textContent || '';
+                const linkHref = link.getAttribute('href') || '';
+                let linkType = linkText.match(typePattern)?.[1] || 'article';
+                linkType = allowedOfficialRoadmapTopicResourceType.includes(
+                  linkType as any,
+                )
+                  ? linkType
+                  : 'article';
+
+                linkText = linkText.replace(typePattern, '');
+
+                if (!linkText || !linkHref) {
+                  return null;
+                }
+
+                return {
+                  title: linkText,
+                  url: linkHref,
+                  type: linkType as AllowedOfficialRoadmapTopicResourceType,
+                };
+              })
+              .filter((link) => link !== null)
+              .sort((a, b) => {
+                const order = [
+                  'official',
+                  'opensource',
+                  'article',
+                  'video',
+                  'feed',
+                ];
+                return order.indexOf(a!.type) - order.indexOf(b!.type);
+              })
+          : [];
+
+      const title = rootHtml.querySelector('h1');
+      ulWithLinks?.remove();
+      title?.remove();
+
+      const allParagraphs = rootHtml.querySelectorAll('p');
+      if (listLinks.length > 0 && allParagraphs.length > 0) {
+        // to remove the view more see more from the description
+        const lastParagraph = allParagraphs[allParagraphs.length - 1];
+        lastParagraph?.remove();
+      }
+
+      const htmlStringWithoutLinks = rootHtml.toString();
+      const description = htmlToMarkdown(htmlStringWithoutLinks);
+
+      const updatedDescription =
+        `# ${title?.textContent}\n\n${description}`.trim();
+
+      const label = node?.data?.label as string;
+      if (!label) {
+        console.error(`🚨 Label is required: ${file}`);
+        continue;
+      }
+
+      topics.push({
+        roadmapSlug: roadmapId,
+        nodeId,
+        description: updatedDescription,
+        resources: listLinks,
+      });
+    }
+
+    await syncContentToDatabase(topics);
+    console.log(
+      `✅ Synced ${topics.length} topics to database for ${roadmapId}`,
+    );
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}

scripts/sync-content-to-repo.ts

@@ -0,0 +1,113 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { slugify } from '../src/lib/slugger';
+import type { OfficialRoadmapDocument } from '../src/queries/official-roadmap';
+import type { OfficialRoadmapTopicContentDocument } from '../src/queries/official-roadmap-topic';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const args = process.argv.slice(2);
+const roadmapSlug = args?.[0]?.replace('--roadmap-slug=', '');
+const secret = args?.[1]?.replace('--secret=', '');
+if (!secret) {
+  throw new Error('Secret is required');
+}
+
+if (!roadmapSlug || roadmapSlug === '__default__') {
+  throw new Error('Roadmap slug is required');
+}
+
+console.log(`🚀 Starting ${roadmapSlug}`);
+
+export async function roadmapTopics(
+  roadmapId: string,
+  secret: string,
+): Promise<OfficialRoadmapTopicContentDocument[]> {
+  const path = `https://roadmap.sh/api/v1-list-official-roadmap-topics/${roadmapId}?secret=${secret}`;
+  const response = await fetch(path);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch roadmap topics: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  if (data.error) {
+    throw new Error(`Failed to fetch roadmap topics: ${data.error}`);
+  }
+
+  return data;
+}
+
+export async function fetchRoadmapJson(
+  roadmapId: string,
+): Promise<OfficialRoadmapDocument> {
+  const response = await fetch(
+    `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch roadmap json: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  if (data.error) {
+    throw new Error(`Failed to fetch roadmap json: ${data.error}`);
+  }
+
+  return data;
+}
+
+// Directory containing the roadmaps
+const ROADMAP_CONTENT_DIR = path.join(
+  __dirname,
+  '../src/data/roadmaps',
+  roadmapSlug,
+);
+
+const allTopics = await roadmapTopics(roadmapSlug, secret);
+const roadmap = await fetchRoadmapJson(roadmapSlug);
+const { nodes } = roadmap;
+
+for (const topic of allTopics) {
+  const { nodeId } = topic;
+
+  const node = nodes.find((node) => node.id === nodeId);
+  if (!node) {
+    console.error(`Node not found: ${nodeId}`);
+    continue;
+  }
+
+  const label = node?.data?.label as string;
+  if (!label) {
+    console.error(`Label not found: ${nodeId}`);
+    continue;
+  }
+
+  const topicSlug = `${slugify(label)}@${nodeId}.md`;
+
+  const topicPath = path.join(ROADMAP_CONTENT_DIR, 'content', topicSlug);
+  const topicDir = path.dirname(topicPath);
+  const topicDirExists = await fs
+    .stat(topicDir)
+    .then(() => true)
+    .catch(() => false);
+  if (!topicDirExists) {
+    await fs.mkdir(topicDir, { recursive: true });
+  }
+
+  const topicContent = prepareTopicContent(topic);
+  await fs.writeFile(topicPath, topicContent);
+  console.log(`✅ Synced ${topicSlug}`);
+}
+
+function prepareTopicContent(topic: OfficialRoadmapTopicContentDocument) {
+  const { description, resources = [] } = topic;
+
+  let content = description;
+  if (resources.length > 0) {
+    content += `\n\nVisit the following resources to learn more:\n\n${resources.map((resource) => `- [@${resource.type}@${resource.title}](${resource.url})`).join('\n')}`;
+  }
+
+  return content;
+}

scripts/sync-repo-to-database.ts

@@ -0,0 +1,238 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { OfficialRoadmapDocument } from '../src/queries/official-roadmap';
+import { parse } from 'node-html-parser';
+import { markdownToHtml } from '../src/lib/markdown';
+import { htmlToMarkdown } from '../src/lib/html';
+import {
+  allowedOfficialRoadmapTopicResourceType,
+  type AllowedOfficialRoadmapTopicResourceType,
+  type SyncToDatabaseTopicContent,
+} from '../src/queries/official-roadmap-topic';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const args = process.argv.slice(2);
+const allFiles = args
+  .find((arg) => arg.startsWith('--files='))
+  ?.replace('--files=', '');
+const secret = args
+  .find((arg) => arg.startsWith('--secret='))
+  ?.replace('--secret=', '');
+
+if (!secret) {
+  throw new Error('Secret is required');
+}
+
+let roadmapJsonCache: Map<string, OfficialRoadmapDocument> = new Map();
+export async function fetchRoadmapJson(
+  roadmapId: string,
+): Promise<OfficialRoadmapDocument> {
+  if (roadmapJsonCache.has(roadmapId)) {
+    return roadmapJsonCache.get(roadmapId)!;
+  }
+
+  const response = await fetch(
+    `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch roadmap json: ${response.statusText} for ${roadmapId}`,
+    );
+  }
+
+  const data = await response.json();
+  if (data.error) {
+    throw new Error(
+      `Failed to fetch roadmap json: ${data.error} for ${roadmapId}`,
+    );
+  }
+
+  roadmapJsonCache.set(roadmapId, data);
+  return data;
+}
+
+export async function syncContentToDatabase(
+  topics: SyncToDatabaseTopicContent[],
+) {
+  const response = await fetch(
+    `https://roadmap.sh/api/v1-sync-official-roadmap-topics`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        topics,
+        secret,
+      }),
+    },
+  );
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(
+      `Failed to sync content to database: ${response.statusText} ${JSON.stringify(error, null, 2)}`,
+    );
+  }
+
+  return response.json();
+}
+
+const files =
+  allFiles
+    ?.split(',')
+    .map((file) => file.trim())
+    .filter(Boolean) || [];
+if (files.length === 0) {
+  console.log('No files to sync');
+  process.exit(0);
+}
+
+console.log(`🚀 Starting ${files.length} files`);
+const ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');
+
+try {
+  const topics: SyncToDatabaseTopicContent[] = [];
+
+  for (const file of files) {
+    const isContentFile = file.endsWith('.md') && file.includes('content/');
+    if (!isContentFile) {
+      console.log(`🚨 Skipping ${file} because it is not a content file`);
+      continue;
+    }
+
+    const pathParts = file.replace('src/data/roadmaps/', '').split('/');
+    const roadmapSlug = pathParts?.[0];
+    if (!roadmapSlug) {
+      console.error(`🚨 Roadmap slug is required: ${file}`);
+      continue;
+    }
+
+    const nodeSlug = pathParts?.[2]?.replace('.md', '');
+    if (!nodeSlug) {
+      console.error(`🚨 Node id is required: ${file}`);
+      continue;
+    }
+
+    const nodeId = nodeSlug.split('@')?.[1];
+    if (!nodeId) {
+      console.error(`🚨 Node id is required: ${file}`);
+      continue;
+    }
+
+    const roadmap = await fetchRoadmapJson(roadmapSlug);
+    const node = roadmap.nodes.find((node) => node.id === nodeId);
+    if (!node) {
+      console.error(`🚨 Node not found: ${file}`);
+      continue;
+    }
+
+    const filePath = path.join(
+      ROADMAP_CONTENT_DIR,
+      roadmapSlug,
+      'content',
+      `${nodeSlug}.md`,
+    );
+
+    const fileExists = await fs
+      .stat(filePath)
+      .then(() => true)
+      .catch(() => false);
+    if (!fileExists) {
+      console.log(`🚨 File not found: ${filePath}`);
+      continue;
+    }
+
+    const content = await fs.readFile(filePath, 'utf8');
+    const html = markdownToHtml(content, false);
+    const rootHtml = parse(html);
+
+    let ulWithLinks: HTMLElement | undefined;
+    rootHtml.querySelectorAll('ul').forEach((ul) => {
+      const listWithJustLinks = Array.from(ul.querySelectorAll('li')).filter(
+        (li) => {
+          const link = li.querySelector('a');
+          return link && link.textContent?.trim() === li.textContent?.trim();
+        },
+      );
+
+      if (listWithJustLinks.length > 0) {
+        // @ts-expect-error - TODO: fix this
+        ulWithLinks = ul;
+      }
+    });
+
+    const listLinks: SyncToDatabaseTopicContent['resources'] =
+      ulWithLinks !== undefined
+        ? Array.from(ulWithLinks.querySelectorAll('li > a'))
+            .map((link) => {
+              const typePattern = /@([a-z.]+)@/;
+              let linkText = link.textContent || '';
+              const linkHref = link.getAttribute('href') || '';
+              let linkType = linkText.match(typePattern)?.[1] || 'article';
+              linkType = allowedOfficialRoadmapTopicResourceType.includes(
+                linkType as any,
+              )
+                ? linkType
+                : 'article';
+
+              linkText = linkText.replace(typePattern, '');
+
+              return {
+                title: linkText,
+                url: linkHref,
+                type: linkType as AllowedOfficialRoadmapTopicResourceType,
+              };
+            })
+            .sort((a, b) => {
+              const order = [
+                'official',
+                'opensource',
+                'article',
+                'video',
+                'feed',
+              ];
+              return order.indexOf(a.type) - order.indexOf(b.type);
+            })
+        : [];
+
+    const title = rootHtml.querySelector('h1');
+    ulWithLinks?.remove();
+    title?.remove();
+
+    const allParagraphs = rootHtml.querySelectorAll('p');
+    if (listLinks.length > 0 && allParagraphs.length > 0) {
+      // to remove the view more see more from the description
+      const lastParagraph = allParagraphs[allParagraphs.length - 1];
+      lastParagraph?.remove();
+    }
+
+    const htmlStringWithoutLinks = rootHtml.toString();
+    const description = htmlToMarkdown(htmlStringWithoutLinks);
+
+    const updatedDescription =
+      `# ${title?.textContent}\n\n${description}`.trim();
+
+    const label = node?.data?.label as string;
+    if (!label) {
+      console.error(`🚨 Label is required: ${file}`);
+      continue;
+    }
+
+    topics.push({
+      roadmapSlug,
+      nodeId,
+      description: updatedDescription,
+      resources: listLinks,
+    });
+  }
+
+  await syncContentToDatabase(topics);
+} catch (error) {
+  console.error(error);
+  process.exit(1);
+}

src/components/Changelog/ChangelogItem.astro

@@ -1,45 +1,46 @@
 ---
 import { DateTime } from 'luxon';
-import type { ChangelogFileType } from '../../lib/changelog';
 import ChangelogImages from '../ChangelogImages';
+import type { ChangelogDocument } from '../../queries/changelog';
 
 interface Props {
-  changelog: ChangelogFileType;
+  changelog: ChangelogDocument;
 }
 
 const { changelog } = Astro.props;
-const { frontmatter } = changelog;
 
-const formattedDate = DateTime.fromISO(frontmatter.date).toFormat(
+const formattedDate = DateTime.fromISO(changelog.createdAt).toFormat(
   'dd LLL, yyyy',
 );
 ---
 
-<div class='relative mb-6' id={changelog.id}>
-  <span
-    class='absolute -left-6 top-2 h-2 w-2 shrink-0 rounded-full bg-gray-300'
+<div class='relative mb-6' id={changelog._id}>
+  <span class='absolute top-2 -left-6 h-2 w-2 shrink-0 rounded-full bg-gray-300'
   ></span>
 
-  <div class='mb-3 flex flex-col sm:flex-row items-start sm:items-center gap-0.5 sm:gap-2'>
+  <div
+    class='mb-3 flex flex-col items-start gap-0.5 sm:flex-row sm:items-center sm:gap-2'
+  >
     <span class='shrink-0 text-xs tracking-wide text-gray-400'>
       {formattedDate}
     </span>
     <span class='truncate text-base font-medium text-balance'>
-      {changelog.frontmatter.title}
+      {changelog.title}
     </span>
   </div>
 
   <div class='rounded-xl border bg-white p-6'>
-    {frontmatter.images && (
-      <div class='mb-5 hidden sm:block -mx-6'>
-        <ChangelogImages images={frontmatter.images} client:load />
-      </div>
-    )}
+    {
+      changelog.images && (
+        <div class='-mx-6 mb-5 hidden sm:block'>
+          <ChangelogImages images={changelog.images} client:load />
+        </div>
+      )
+    }
 
     <div
-      class='prose prose-sm prose-h2:mt-3 prose-h2:text-lg prose-h2:font-medium prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-ul:rounded-lg prose-ul:bg-gray-100 prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 [&>ul>li]:my-0 [&>ul>li]:mb-1 [&>ul]:mt-3'
-    >
-      <changelog.Content />
-    </div>
+      class='prose prose-sm prose-h2:mt-3 prose-h2:text-lg prose-h2:font-medium prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-ul:rounded-lg prose-ul:bg-gray-100 prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 [&>ul]:mt-3 [&>ul>li]:my-0 [&>ul>li]:mb-1'
+      set:html={changelog.description}
+    />
   </div>
 </div>

src/components/ChangelogBanner.astro

@@ -1,9 +1,9 @@
 ---
-import { getAllChangelogs } from '../lib/changelog';
+import { listChangelog } from '../queries/changelog';
 import { DateTime } from 'luxon';
 import AstroIcon from './AstroIcon.astro';
-const allChangelogs = await getAllChangelogs();
-const top10Changelogs = allChangelogs.slice(0, 10);
+
+const changelogs = await listChangelog({ limit: 10 });
 ---
 
 <div class='border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
@@ -17,7 +17,7 @@ const top10Changelogs = allChangelogs.slice(0, 10);
       Actively Maintained
     </p>
     <p
-      class='mb-2 mt-1 text-sm leading-relaxed text-gray-600 sm:my-2 sm:my-5 sm:text-lg'
+      class='mt-1 mb-2 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'
     >
       We are always improving our content, adding new resources and adding
       features to enhance your learning experience.
@@ -25,27 +25,27 @@ const top10Changelogs = allChangelogs.slice(0, 10);
 
     <div class='relative mt-2 text-left sm:mt-8'>
       <div
-        class='absolute inset-y-0 left-[120px] hidden w-px -translate-x-[0.5px] translate-x-[5.75px] bg-gray-300 sm:block'
+        class='absolute inset-y-0 left-[120px] hidden w-px translate-x-[5.75px] bg-gray-300 sm:block'
       >
       </div>
       <ul class='relative flex flex-col gap-4 py-4'>
         {
-          top10Changelogs.map((changelog) => {
+          changelogs.map((changelog) => {
             const formattedDate = DateTime.fromISO(
-              changelog.frontmatter.date,
+              changelog.createdAt,
             ).toFormat('dd LLL, yyyy');
             return (
               <li class='relative'>
                 <a
-                  href={`/changelog#${changelog.id}`}
+                  href={`/changelog#${changelog._id}`}
                   class='flex flex-col items-start sm:flex-row sm:items-center'
                 >
                   <span class='shrink-0 pr-0 text-right text-sm tracking-wide text-gray-400 sm:w-[120px] sm:pr-4'>
                     {formattedDate}
                   </span>
                   <span class='hidden h-3 w-3 shrink-0 rounded-full bg-gray-300 sm:block' />
-                  <span class='text-balance text-base font-medium text-gray-900 sm:pl-8'>
-                    {changelog.frontmatter.title}
+                  <span class='text-base font-medium text-balance text-gray-900 sm:pl-8'>
+                    {changelog.title}
                   </span>
                 </a>
               </li>
@@ -55,7 +55,7 @@ const top10Changelogs = allChangelogs.slice(0, 10);
       </ul>
     </div>
     <div
-      class='mt-2 flex flex-col gap-2 sm:flex-row sm:mt-8 sm:items-center sm:justify-center'
+      class='mt-2 flex flex-col gap-2 sm:mt-8 sm:flex-row sm:items-center sm:justify-center'
     >
       <a
         href='/changelog'
@@ -66,7 +66,7 @@ const top10Changelogs = allChangelogs.slice(0, 10);
       <button
         data-guest-required
         data-popup='login-popup'
-        class='flex flex-row items-center gap-2 rounded-lg border border-black bg-white px-4 py-2 text-sm text-black transition-all hover:bg-black hover:text-white sm:rounded-full sm:pl-4 sm:pr-5 sm:text-base'
+        class='flex flex-row items-center gap-2 rounded-lg border border-black bg-white px-4 py-2 text-sm text-black transition-all hover:bg-black hover:text-white sm:rounded-full sm:pr-5 sm:pl-4 sm:text-base'
       >
         <AstroIcon icon='bell' class='h-5 w-5' />
         Subscribe for Notifications

src/components/ChangelogImages.tsx

@@ -1,13 +1,14 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React, { useState, useEffect, useCallback } from 'react';
+import type { ChangelogImage } from '../queries/changelog';
 
 interface ChangelogImagesProps {
-  images: { [key: string]: string };
+  images: ChangelogImage[];
 }
 
 const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
   const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
-  const imageArray = Object.entries(images);
+  const imageArray = images.map((image) => [image.title, image.url]);
 
   const handleImageClick = (src: string) => {
     setEnlargedImage(src);
@@ -63,10 +64,10 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
               alt={title}
               className="h-[120px] w-full object-cover object-left-top"
             />
-            <span className="absolute group-hover:opacity-0 inset-0 bg-linear-to-b from-transparent to-black/40" />
+            <span className="absolute inset-0 bg-linear-to-b from-transparent to-black/40 group-hover:opacity-0" />
 
-            <div className="absolute font-medium inset-x-0 top-full group-hover:inset-y-0 flex items-center justify-center px-2 text-center text-xs bg-black/50 text-white py-0.5 opacity-0 group-hover:opacity-100 cursor-pointer">
-              <span className='bg-black py-0.5 rounded-sm px-1'>{title}</span>
+            <div className="absolute inset-x-0 top-full flex cursor-pointer items-center justify-center bg-black/50 px-2 py-0.5 text-center text-xs font-medium text-white opacity-0 group-hover:inset-y-0 group-hover:opacity-100">
+              <span className="rounded-sm bg-black px-1 py-0.5">{title}</span>
             </div>
           </div>
         ))}
@@ -82,7 +83,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
             className="max-h-[90%] max-w-[90%] rounded-xl object-contain"
           />
           <button
-            className="absolute left-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white/50 hover:bg-white/100 p-2"
+            className="absolute top-1/2 left-4 -translate-y-1/2 transform rounded-full bg-white/50 p-2 hover:bg-white/100"
             onClick={(e) => {
               e.stopPropagation();
               handleNavigation('prev');
@@ -91,7 +92,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
             <ChevronLeft size={24} />
           </button>
           <button
-            className="absolute right-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white/50 hover:bg-white/100 p-2"
+            className="absolute top-1/2 right-4 -translate-y-1/2 transform rounded-full bg-white/50 p-2 hover:bg-white/100"
             onClick={(e) => {
               e.stopPropagation();
               handleNavigation('next');

src/components/ChatMessages/AIChat.css

@@ -0,0 +1,131 @@
+.ai-chat {
+  .prose ul li > code,
+  .prose ol li > code,
+  p code,
+  a > code,
+  strong > code,
+  em > code,
+  h1 > code,
+  h2 > code,
+  h3 > code {
+    background: #ebebeb !important;
+    color: currentColor !important;
+    font-size: 14px;
+    font-weight: normal !important;
+  }
+
+  .message-markdown.prose ul li > code,
+  .message-markdown.prose ol li > code,
+  .message-markdown.prose p code,
+  .message-markdown.prose a > code,
+  .message-markdown.prose strong > code,
+  .message-markdown.prose em > code,
+  .message-markdown.prose h1 > code,
+  .message-markdown.prose h2 > code,
+  .message-markdown.prose h3 > code {
+    font-size: 12px !important;
+  }
+
+  .message-markdown pre {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .message-markdown pre::-webkit-scrollbar {
+    display: none;
+  }
+
+  .message-markdown pre,
+  .message-markdown pre {
+    overflow: scroll;
+  }
+
+  .prose ul li > code:before,
+  p > code:before,
+  .prose ul li > code:after,
+  .prose ol li > code:before,
+  p > code:before,
+  .prose ol li > code:after,
+  .message-markdown h1 > code:after,
+  .message-markdown h1 > code:before,
+  .message-markdown h2 > code:after,
+  .message-markdown h2 > code:before,
+  .message-markdown h3 > code:after,
+  .message-markdown h3 > code:before,
+  .message-markdown h4 > code:after,
+  .message-markdown h4 > code:before,
+  p > code:after,
+  a > code:after,
+  a > code:before {
+    content: '' !important;
+  }
+
+  .message-markdown.prose ul li > code,
+  .message-markdown.prose ol li > code,
+  .message-markdown p code,
+  .message-markdown a > code,
+  .message-markdown strong > code,
+  .message-markdown em > code,
+  .message-markdown h1 > code,
+  .message-markdown h2 > code,
+  .message-markdown h3 > code,
+  .message-markdown table code {
+    background: #f4f4f5 !important;
+    border: 1px solid #282a36 !important;
+    color: #282a36 !important;
+    padding: 2px 4px;
+    border-radius: 5px;
+    white-space: pre;
+    font-weight: normal;
+  }
+
+  .message-markdown blockquote {
+    font-style: normal;
+  }
+
+  .message-markdown.prose blockquote h1,
+  .message-markdown.prose blockquote h2,
+  .message-markdown.prose blockquote h3,
+  .message-markdown.prose blockquote h4 {
+    font-style: normal;
+    margin-bottom: 8px;
+  }
+
+  .message-markdown.prose ul li > code:before,
+  .message-markdown p > code:before,
+  .message-markdown.prose ul li > code:after,
+  .message-markdown p > code:after,
+  .message-markdown h2 > code:after,
+  .message-markdown h2 > code:before,
+  .message-markdown table code:before,
+  .message-markdown table code:after,
+  .message-markdown a > code:after,
+  .message-markdown a > code:before,
+  .message-markdown h2 code:after,
+  .message-markdown h2 code:before,
+  .message-markdown h2 code:after,
+  .message-markdown h2 code:before {
+    content: '' !important;
+  }
+
+  .message-markdown table {
+    border-collapse: collapse;
+    border: 1px solid black;
+    border-radius: 5px;
+  }
+
+  .message-markdown table td,
+  .message-markdown table th {
+    padding: 5px 10px;
+  }
+
+  .chat-variable {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.5;
+    padding: 2px 4px;
+    border-radius: 8px;
+    background-color: #f0f5ff;
+    color: #2c5df1;
+  }
+}

src/components/ChatMessages/RoadmapChatIntroMessage.tsx

@@ -0,0 +1,108 @@
+import { useQuery } from '@tanstack/react-query';
+import { officialRoadmapOptions } from '../../queries/official-roadmap';
+import { queryClient } from '../../stores/query-client';
+
+type RoadmapChatIntroMessageProps = {
+  roadmapId: string;
+};
+
+export function RoadmapChatIntroMessage(props: RoadmapChatIntroMessageProps) {
+  const { roadmapId } = props;
+
+  const { data: roadmapDetail } = useQuery(
+    officialRoadmapOptions(roadmapId),
+    queryClient,
+  );
+  const topicNodes = roadmapDetail?.nodes?.filter(
+    (node) => node.type === 'topic',
+  );
+
+  const firstTopicNode = topicNodes?.[0];
+  const firstTopicTitle = firstTopicNode?.data?.label || 'XYZ';
+
+  const secondTopicNode = topicNodes?.[1];
+  const secondTopicTitle = secondTopicNode?.data?.label || 'XYZ';
+
+  const capabilities = [
+    {
+      icon: '📚',
+      title: 'Learn concepts:',
+      description: 'Ask me about any topics on the roadmap',
+      examples:
+        '"Explain what React hooks are" or "How does async/await work?"',
+    },
+    {
+      icon: '📊',
+      title: 'Track progress:',
+      description: 'Mark topics as done, learning, or skipped',
+      examples: `"Mark ${firstTopicTitle} as done" or "Show my overall progress"`,
+    },
+    {
+      icon: '🎯',
+      title: 'Recommendations:',
+      description: 'Find what to learn next or explore other roadmaps',
+      examples: `"What should I learn next?" or "Recommend roadmaps for backend development"`,
+    },
+    {
+      icon: '🔍',
+      title: 'Find resources:',
+      description: 'Get learning materials for specific topics',
+      examples: `"Show me resources for learning ${secondTopicTitle}"`,
+    },
+    {
+      icon: '🔗',
+      title: 'Share progress:',
+      description: 'Get a link to share your learning progress',
+      examples: '"Give me my shareable progress link"',
+    },
+  ];
+
+  return (
+    <div className="space-y-2 text-sm text-gray-700">
+      <div className="flex items-start gap-3">
+        <div>
+          <h3 className="mb-2 font-medium text-gray-900">
+            Hi! I'm your AI learning assistant 👋
+          </h3>
+          <p className="mb-3">
+            I'm here to guide you through your learning journey on this roadmap.
+            I can help you understand concepts, track your progress, and provide
+            personalized learning advice.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <h4 className="font-medium text-gray-900">
+          Here's what I can help you with:
+        </h4>
+
+        <div className="space-y-3">
+          {capabilities.map((capability, index) => (
+            <div key={index} className="flex items-start gap-2">
+              <span className={`font-medium`}>{capability.icon}</span>
+              <div>
+                <span className="font-medium text-black">
+                  {capability.title}
+                </span>{' '}
+                {capability.description}
+                <div className="mt-1 text-xs text-gray-600">
+                  Try: {capability.examples}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-4 rounded-lg bg-gray-50 p-3">
+        <p className="text-xs text-black">
+          <span className="font-medium">Tip:</span> I can see your current
+          progress on the roadmap, so my advice will be personalized to your
+          learning journey. Just ask me anything about the topics you see on the
+          roadmap!
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/ChatMessages/RoadmapChatMessage.tsx

@@ -0,0 +1,148 @@
+import { Markdown } from '../Global/Markdown';
+import { BotIcon, User2Icon } from 'lucide-react';
+import type { UIMessage } from 'ai';
+import { parseMessageParts } from '../../lib/message-part';
+import { RoadmapChatUserProgressList } from './UserProgressList';
+import {
+  parseUserProgress,
+  UserProgressActionList,
+} from './UserPrgressActionList';
+import { parseTopicList, RoadmapTopicList } from './RoadmapTopicList';
+import { ShareResourceLink } from './ShareResourceLink';
+import {
+  parseRoadmapSlugList,
+  RoadmapRecommendations,
+} from './RoadmapRecommendations';
+import { cn } from '../../lib/classname';
+
+type RoadmapMessageProps = {
+  roadmapId: string;
+  message: UIMessage;
+  isStreaming: boolean;
+  children?: React.ReactNode;
+  onTopicClick?: (topicId: string, topicTitle: string) => void;
+};
+
+export function RoadmapChatMessage(props: RoadmapMessageProps) {
+  const { roadmapId, message, isStreaming, children, onTopicClick } = props;
+  const { role } = message;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col rounded-lg',
+        role === 'user' ? 'bg-gray-300/30' : 'bg-yellow-500/30',
+      )}
+    >
+      <div className="flex items-start gap-2.5 p-3">
+        <div
+          className={cn(
+            'flex size-6 shrink-0 items-center justify-center rounded-full',
+            role === 'user'
+              ? 'bg-gray-200 text-black'
+              : 'bg-yellow-400 text-black',
+          )}
+        >
+          {role === 'user' ? (
+            <User2Icon className="size-4 stroke-[2.5]" />
+          ) : (
+            <BotIcon className="size-4 stroke-[2.5]" />
+          )}
+        </div>
+
+        {children || (
+          <div>
+            {message.parts.map((part) => {
+              const { type } = part;
+
+              if (role === 'user' && type === 'text') {
+                return (
+                  <div
+                    key={`message-${message.id}-part-${type}`}
+                    className="prose prose-sm message-markdown max-w-full text-sm"
+                    dangerouslySetInnerHTML={{ __html: part.text ?? '' }}
+                  />
+                );
+              }
+
+              if (type === 'text') {
+                const text = part.text;
+                const parts = parseMessageParts(text, {
+                  'user-progress': () => {
+                    return {};
+                  },
+                  'update-progress': (opts) => {
+                    return parseUserProgress(opts.content);
+                  },
+                  'roadmap-topics': (opts) => {
+                    return parseTopicList(opts.content);
+                  },
+                  'resource-progress-link': () => {
+                    return {};
+                  },
+                  'roadmap-recommendations': (opts) => {
+                    return parseRoadmapSlugList(opts.content);
+                  },
+                });
+
+                return parts.map((part, index) => {
+                  const { type } = part;
+                  const key = `message-${message.id}-part-${type}-${index}`;
+
+                  if (type === 'text') {
+                    return (
+                      <Markdown
+                        key={key}
+                        className="prose prose-sm message-markdown max-w-full text-sm"
+                      >
+                        {part.text ?? ''}
+                      </Markdown>
+                    );
+                  } else if (type === 'user-progress') {
+                    return (
+                      <RoadmapChatUserProgressList
+                        key={key}
+                        roadmapId={roadmapId}
+                      />
+                    );
+                  } else if (type === 'update-progress') {
+                    return (
+                      <UserProgressActionList
+                        key={key}
+                        roadmapId={roadmapId}
+                        updateUserProgress={part.data}
+                        isLoading={isStreaming}
+                      />
+                    );
+                  } else if (type === 'roadmap-topics') {
+                    return (
+                      <RoadmapTopicList
+                        key={key}
+                        roadmapId={roadmapId}
+                        topics={part.data}
+                        onTopicClick={onTopicClick}
+                      />
+                    );
+                  } else if (type === 'resource-progress-link') {
+                    return (
+                      <ShareResourceLink key={key} roadmapId={roadmapId} />
+                    );
+                  } else if (type === 'roadmap-recommendations') {
+                    return (
+                      <RoadmapRecommendations
+                        key={key}
+                        roadmapSlugs={part.data}
+                      />
+                    );
+                  }
+
+                  return null;
+                });
+              }
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/ChatMessages/RoadmapChatMessages.tsx

@@ -0,0 +1,110 @@
+import type { ChatStatus, UIMessage } from 'ai';
+import { memo } from 'react';
+import { RoadmapChatMessage } from './RoadmapChatMessage';
+import { useIsThinking } from '../../hooks/use-is-thinking';
+
+type MessagesProps = {
+  messages: UIMessage[];
+  status: ChatStatus;
+  roadmapId: string;
+  onTopicClick?: (topicId: string, topicTitle: string) => void;
+  defaultQuestions?: string[];
+  onDefaultQuestionClick?: (question: string) => void;
+};
+
+function _RoadmapChatMessages(props: MessagesProps) {
+  const {
+    messages,
+    status,
+    roadmapId,
+    defaultQuestions,
+    onTopicClick,
+    onDefaultQuestionClick,
+  } = props;
+
+  const isStreaming = status === 'streaming';
+  const isThinking = useIsThinking(messages, status);
+
+  return (
+    <div className="absolute inset-0 flex flex-col">
+      <div className="relative flex grow flex-col justify-end">
+        <div className="flex flex-col justify-end gap-2 px-3 py-2">
+          <RoadmapChatMessage
+            roadmapId={roadmapId}
+            message={{
+              id: '__welcome_message__',
+              role: 'assistant',
+              parts: [
+                {
+                  type: 'text',
+                  text: 'Hello, how can I help you today?',
+                },
+              ],
+            }}
+            isStreaming={isStreaming}
+          />
+
+          {messages.length === 0 &&
+            defaultQuestions &&
+            defaultQuestions.length > 0 && (
+              <div className="mt-0.5 mb-1">
+                <p className="mb-2 text-xs font-normal text-gray-500">
+                  Some questions you might have about this roadmap:
+                </p>
+                <div className="flex flex-col justify-end gap-1">
+                  {defaultQuestions.map((question, index) => (
+                    <button
+                      key={`default-question-${index}`}
+                      className="flex h-full self-start rounded-md bg-yellow-500/10 px-3 py-2 text-left text-sm text-black hover:bg-yellow-500/20"
+                      onClick={() => onDefaultQuestionClick?.(question)}
+                    >
+                      {question}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+          {messages.map((message, index) => {
+            const isLastMessage = index === messages.length - 1;
+
+            // otherwise it will add an extra space at the end of the message
+            // because the last message is not rendered
+            if (isThinking && isLastMessage && message.role === 'assistant') {
+              return null;
+            }
+
+            return (
+              <RoadmapChatMessage
+                key={message.id}
+                roadmapId={roadmapId}
+                message={message}
+                isStreaming={isStreaming}
+                onTopicClick={onTopicClick}
+              />
+            );
+          })}
+
+          {isThinking && (
+            <RoadmapChatMessage
+              roadmapId={roadmapId}
+              message={{
+                id: '__thinking_message__',
+                role: 'assistant',
+                parts: [
+                  {
+                    type: 'text',
+                    text: 'Thinking...',
+                  },
+                ],
+              }}
+              isStreaming={isStreaming}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const RoadmapChatMessages = memo(_RoadmapChatMessages);

src/components/ChatMessages/RoadmapRecommendations.tsx

@@ -0,0 +1,82 @@
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { Loader2Icon, SquareArrowOutUpRightIcon } from 'lucide-react';
+import { listBuiltInRoadmaps } from '../../queries/roadmap';
+import { queryClient } from '../../stores/query-client';
+
+type RoadmapSlugListType = {
+  roadmapSlug: string;
+};
+
+export function parseRoadmapSlugList(content: string): RoadmapSlugListType[] {
+  const items: RoadmapSlugListType[] = [];
+
+  const roadmapSlugListRegex = /<roadmap-slug>.*?<\/roadmap-slug>/gs;
+  const roadmapSlugListItems = content.match(roadmapSlugListRegex);
+  if (!roadmapSlugListItems) {
+    return items;
+  }
+
+  for (const roadmapSlugListItem of roadmapSlugListItems) {
+    const roadmapSlugRegex = /<roadmap-slug>(.*?)<\/roadmap-slug>/;
+    const roadmapSlug = roadmapSlugListItem
+      .match(roadmapSlugRegex)?.[1]
+      ?.trim();
+    if (!roadmapSlug) {
+      continue;
+    }
+
+    items.push({
+      roadmapSlug,
+    });
+  }
+
+  return items;
+}
+
+type RoadmapRecommendationsProps = {
+  roadmapSlugs: RoadmapSlugListType[];
+};
+
+export function RoadmapRecommendations(props: RoadmapRecommendationsProps) {
+  const { roadmapSlugs } = props;
+
+  const { data: roadmaps, isLoading } = useQuery(
+    listBuiltInRoadmaps(),
+    queryClient,
+  );
+
+  const progressItemWithText = useMemo(() => {
+    return roadmapSlugs.map((item) => {
+      const roadmap = roadmaps?.find(
+        (mapping) => mapping.id === item.roadmapSlug,
+      );
+
+      return {
+        ...item,
+        title: roadmap?.title,
+      };
+    });
+  }, [roadmapSlugs, roadmaps]);
+
+  return (
+    <div className="relative my-6 flex flex-wrap gap-1 first:mt-0 last:mb-0">
+      {progressItemWithText.map((item) => (
+        <a
+          href={`/${item.roadmapSlug}/ai`}
+          target="_blank"
+          key={item.roadmapSlug}
+          className="group flex h-[34px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-left text-sm text-gray-700 transition-all hover:border-gray-400 hover:text-black active:bg-gray-100"
+        >
+          {item.title}
+          {isLoading && (
+            <Loader2Icon className="size-3.5 animate-spin text-gray-400 group-hover:text-gray-600" />
+          )}
+          {!isLoading && (
+            <SquareArrowOutUpRightIcon className="ml-1 size-3.5 text-gray-400 transition-transform group-hover:text-gray-600" />
+          )}
+        </a>
+      ))}
+    </div>
+  );
+}

src/components/ChatMessages/RoadmapTopicList.tsx

@@ -0,0 +1,106 @@
+import { useQuery } from '@tanstack/react-query';
+import { Fragment, useMemo } from 'react';
+import { ChevronRightIcon } from 'lucide-react';
+import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';
+import { queryClient } from '../../stores/query-client';
+
+type TopicListType = {
+  topicId: string;
+};
+
+export function parseTopicList(content: string): TopicListType[] {
+  const items: TopicListType[] = [];
+
+  const topicListRegex = /<topic-id>.*?<\/topic-id>/gs;
+  const topicListItems = content.match(topicListRegex);
+  if (!topicListItems) {
+    return items;
+  }
+
+  for (const topicListItem of topicListItems) {
+    const topicIdRegex = /<topic-id>(.*?)<\/topic-id>/;
+    const topicId = topicListItem.match(topicIdRegex)?.[1]?.trim();
+    if (!topicId) {
+      continue;
+    }
+
+    items.push({
+      topicId,
+    });
+  }
+
+  return items;
+}
+
+type RoadmapTopicListProps = {
+  roadmapId: string;
+  onTopicClick?: (topicId: string, topicTitle: string) => void;
+  topics: TopicListType[];
+};
+
+export function RoadmapTopicList(props: RoadmapTopicListProps) {
+  const { roadmapId, topics: topicListItems, onTopicClick } = props;
+
+  const { data: roadmapTreeData } = useQuery(
+    roadmapTreeMappingOptions(roadmapId),
+    queryClient,
+  );
+
+  const progressItemWithText = useMemo(() => {
+    return topicListItems.map((item) => {
+      const roadmapTreeItem = roadmapTreeData?.find(
+        (mapping) => mapping.nodeId === item.topicId,
+      );
+
+      return {
+        ...item,
+        text: (roadmapTreeItem?.text || item.topicId)
+          ?.split(' > ')
+          .slice(1)
+          .join(' > '),
+      };
+    });
+  }, [topicListItems, roadmapTreeData]);
+
+  return (
+    <div className="relative my-6 flex flex-wrap gap-1 first:mt-0 last:mb-0">
+      {progressItemWithText.map((item) => {
+        const labelParts = item.text.split(' > ').slice(-2);
+        const labelPartCount = labelParts.length;
+
+        const title = item.text.split(' > ').pop();
+        if (!title) {
+          return;
+        }
+
+        return (
+          <button
+            key={item.topicId}
+            className="collapse-if-empty flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1 px-2 text-left text-sm hover:bg-gray-50"
+            onClick={() => {
+              if (!title) {
+                return;
+              }
+
+              onTopicClick?.(item.topicId, title);
+            }}
+          >
+            {labelParts.map((part, index) => {
+              return (
+                <Fragment key={index}>
+                  <span>{part}</span>
+                  {index < labelPartCount - 1 && (
+                    <ChevronRightIcon
+                      className="size-3 text-gray-400"
+                      strokeWidth={2.5}
+                    />
+                  )}
+                </Fragment>
+              );
+            })}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/components/ChatMessages/ShareResourceLink.tsx

@@ -0,0 +1,47 @@
+import { ShareIcon } from 'lucide-react';
+import { useCopyText } from '../../hooks/use-copy-text';
+import { cn } from '../../lib/classname';
+import { useAuth } from '../../hooks/use-auth';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+
+type ShareResourceLinkProps = {
+  roadmapId: string;
+};
+
+export function ShareResourceLink(props: ShareResourceLinkProps) {
+  const { roadmapId } = props;
+
+  const currentUser = useAuth();
+  const { copyText, isCopied } = useCopyText();
+
+  const handleShareResourceLink = () => {
+    const url = `${import.meta.env.VITE_ASTRO_APP_URL}/${roadmapId}?s=${currentUser?.id}`;
+    copyText(url);
+  };
+
+  return (
+    <div className="relative my-6 flex flex-wrap gap-1 first:mt-0 last:mb-0">
+      <button
+        className={cn(
+          'flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white p-1 px-1.5 text-left text-sm',
+          isCopied && 'text-green-500',
+        )}
+        onClick={handleShareResourceLink}
+      >
+        {!isCopied && (
+          <>
+            <ShareIcon className="h-4 w-4" />
+            Share Progress
+          </>
+        )}
+
+        {isCopied && (
+          <>
+            <CheckIcon additionalClasses="size-4" />
+            Copied
+          </>
+        )}
+      </button>
+    </div>
+  );
+}

src/components/ChatMessages/TopicChatMessage.tsx

@@ -0,0 +1,63 @@
+import { cn } from '../../lib/classname';
+import { Markdown } from '../Global/Markdown';
+import { BotIcon, User2Icon } from 'lucide-react';
+import type { UIMessage } from 'ai';
+import { promptLabelMapping } from '../TopicDetail/PredefinedActions';
+
+type TopicChatMessageProps = {
+  message: UIMessage;
+};
+
+export function TopicChatMessage(props: TopicChatMessageProps) {
+  const { message } = props;
+  const { role } = message;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col rounded-lg',
+        role === 'user' ? 'bg-gray-300/30' : 'bg-yellow-500/30',
+      )}
+    >
+      <div className="flex items-start gap-2.5 p-3">
+        <div
+          className={cn(
+            'flex size-6 shrink-0 items-center justify-center rounded-full',
+            role === 'user'
+              ? 'bg-gray-200 text-black'
+              : 'bg-yellow-400 text-black',
+          )}
+        >
+          {role === 'user' ? (
+            <User2Icon className="size-4 stroke-[2.5]" />
+          ) : (
+            <BotIcon className="size-4 stroke-[2.5]" />
+          )}
+        </div>
+
+        <div>
+          {message.parts.map((part) => {
+            const { type } = part;
+            const key = `message-${message.id}-part-${type}`;
+
+            if (type === 'text') {
+              let content = part.text;
+              if (role === 'user' && promptLabelMapping[content]) {
+                content = promptLabelMapping[content];
+              }
+
+              return (
+                <Markdown
+                  key={key}
+                  className="prose prose-sm message-markdown max-w-full text-sm"
+                >
+                  {content}
+                </Markdown>
+              );
+            }
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ChatMessages/TopicChatMessages.tsx

@@ -0,0 +1,57 @@
+import type { ChatStatus, UIMessage } from 'ai';
+import { TopicChatMessage } from './TopicChatMessage';
+import { useIsThinking } from '../../hooks/use-is-thinking';
+
+type TopicChatMessagesProps = {
+  messages: UIMessage[];
+  status: ChatStatus;
+};
+
+export function TopicChatMessages(props: TopicChatMessagesProps) {
+  const { messages, status } = props;
+
+  const isThinking = useIsThinking(messages, status);
+
+  return (
+    <div className="absolute inset-0 flex flex-col">
+      <div className="relative flex grow flex-col justify-end">
+        <div className="flex flex-col justify-end gap-2 px-3 py-2">
+          <TopicChatMessage
+            message={{
+              id: '__welcome_message__',
+              role: 'assistant',
+              parts: [
+                {
+                  type: 'text',
+                  text: 'Hey, I am your AI instructor. How can I help you today? 🤖',
+                },
+              ],
+            }}
+          />
+
+          {messages.map((message, index) => {
+            const isLastMessage = index === messages.length - 1;
+
+            // otherwise it will add an extra space at the end of the message
+            // because the last message is not rendered
+            if (isThinking && isLastMessage && message.role === 'assistant') {
+              return null;
+            }
+
+            return <TopicChatMessage key={message.id} message={message} />;
+          })}
+
+          {isThinking && (
+            <TopicChatMessage
+              message={{
+                id: '__thinking_message__',
+                role: 'assistant',
+                parts: [{ type: 'text', text: 'Thinking...' }],
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ChatMessages/UserPrgressActionList.tsx

@@ -0,0 +1,330 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ChevronRightIcon, Loader2Icon } from 'lucide-react';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+import { Fragment, useMemo, useState } from 'react';
+import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';
+import { queryClient } from '../../stores/query-client';
+import { httpPost } from '../../lib/query-http';
+import {
+  renderTopicProgress,
+  updateResourceProgress,
+  type ResourceProgressType,
+} from '../../lib/resource-progress';
+import { userResourceProgressOptions } from '../../queries/resource-progress';
+import { useToast } from '../../hooks/use-toast';
+import { cn } from '../../lib/classname';
+
+type UpdateUserProgress = {
+  id: string;
+  action: 'done' | 'learning' | 'skipped' | 'pending';
+};
+
+export function parseUserProgress(content: string): UpdateUserProgress[] {
+  const items: UpdateUserProgress[] = [];
+
+  const progressRegex = /<update-progress-item>.*?<\/update-progress-item>/gs;
+  const progressItems = content.match(progressRegex);
+  if (!progressItems) {
+    return items;
+  }
+
+  for (const progressItem of progressItems) {
+    const progressItemRegex = /<topic-id>(.*?)<\/topic-id>/;
+    const topicId = progressItem.match(progressItemRegex)?.[1]?.trim();
+    const topicActionRegex = /<topic-action>(.*?)<\/topic-action>/;
+    const topicAction = progressItem
+      .match(topicActionRegex)?.[1]
+      .trim()
+      ?.toLowerCase();
+
+    if (!topicId || !topicAction) {
+      continue;
+    }
+
+    items.push({
+      id: topicId,
+      action: topicAction as UpdateUserProgress['action'],
+    });
+  }
+
+  return items;
+}
+
+type BulkUpdateResourceProgressBody = {
+  done: string[];
+  learning: string[];
+  skipped: string[];
+  pending: string[];
+};
+
+type BulkUpdateResourceProgressResponse = {
+  done: string[];
+  learning: string[];
+  skipped: string[];
+};
+
+type UserProgressActionListProps = {
+  roadmapId: string;
+  isLoading?: boolean;
+  updateUserProgress: UpdateUserProgress[];
+};
+
+export function UserProgressActionList(props: UserProgressActionListProps) {
+  const { roadmapId, updateUserProgress, isLoading = false } = props;
+
+  const toast = useToast();
+  const { data: roadmapTreeData } = useQuery(
+    roadmapTreeMappingOptions(roadmapId),
+    queryClient,
+  );
+
+  const {
+    mutate: bulkUpdateResourceProgress,
+    isPending: isBulkUpdating,
+    isSuccess: isBulkUpdateSuccess,
+  } = useMutation(
+    {
+      mutationFn: (body: BulkUpdateResourceProgressBody) => {
+        return httpPost<BulkUpdateResourceProgressResponse>(
+          `/v1-bulk-update-resource-progress/${roadmapId}`,
+          body,
+        );
+      },
+      onSuccess: () => {
+        updateUserProgress.forEach((item) => {
+          renderTopicProgress(item.id, item.action);
+        });
+
+        return queryClient.invalidateQueries(
+          userResourceProgressOptions('roadmap', roadmapId),
+        );
+      },
+      onError: (error) => {
+        toast.error(
+          error?.message ?? 'Something went wrong, please try again.',
+        );
+      },
+    },
+    queryClient,
+  );
+
+  const progressItemWithText = useMemo(() => {
+    return updateUserProgress.map((item) => {
+      const roadmapTreeItem = roadmapTreeData?.find(
+        (mapping) => mapping.nodeId === item.id,
+      );
+
+      return {
+        ...item,
+        text: (roadmapTreeItem?.text || item.id)
+          ?.split(' > ')
+          .slice(1)
+          .join(' > '),
+      };
+    });
+  }, [updateUserProgress, roadmapTreeData]);
+
+  const [showAll, setShowAll] = useState(false);
+  const itemCountToShow = 4;
+  const itemsToShow = showAll
+    ? progressItemWithText
+    : progressItemWithText.slice(0, itemCountToShow);
+
+  const hasMoreItemsToShow = progressItemWithText.length > itemCountToShow;
+
+  return (
+    <div className="relative my-6 w-full first:mt-0 last:mb-0">
+      <div className="relative flex flex-col gap-0.5">
+        {itemsToShow.map((item) => (
+          <ProgressItem
+            key={item.id}
+            roadmapId={roadmapId}
+            topicId={item.id}
+            text={item.text}
+            action={item.action}
+            isStreaming={isLoading}
+            isBulkUpdating={isBulkUpdating}
+            isBulkUpdateSuccess={isBulkUpdateSuccess}
+          />
+        ))}
+
+        {hasMoreItemsToShow && (
+          <div className="relative mt-1 flex items-center justify-between gap-2">
+            <button
+              className="z-50 flex items-center gap-1 rounded-md bg-gray-400 px-2 py-1 text-xs font-medium text-white hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-70"
+              onClick={() => setShowAll(!showAll)}
+              disabled={isLoading}
+            >
+              {isLoading && (
+                <>
+                  <Loader2Icon className="size-3 animate-spin" />
+                  {progressItemWithText.length} loaded ..
+                </>
+              )}
+
+              {!isLoading && (
+                <>
+                  {showAll
+                    ? '- Show Less'
+                    : `+ Show ${progressItemWithText.length - itemCountToShow} More`}
+                </>
+              )}
+            </button>
+
+            <button
+              className="z-50 flex items-center gap-1 rounded-md bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70"
+              disabled={isBulkUpdating || isLoading || isBulkUpdateSuccess}
+              onClick={() => {
+                const done = updateUserProgress
+                  .filter((item) => item.action === 'done')
+                  .map((item) => item.id);
+                const learning = updateUserProgress
+                  .filter((item) => item.action === 'learning')
+                  .map((item) => item.id);
+                const skipped = updateUserProgress
+                  .filter((item) => item.action === 'skipped')
+                  .map((item) => item.id);
+                const pending = updateUserProgress
+                  .filter((item) => item.action === 'pending')
+                  .map((item) => item.id);
+
+                bulkUpdateResourceProgress({
+                  done,
+                  learning,
+                  skipped,
+                  pending,
+                });
+              }}
+            >
+              {isBulkUpdating && (
+                <Loader2Icon className="size-3 animate-spin" />
+              )}
+              {!isBulkUpdating && <CheckIcon additionalClasses="size-3" />}
+              Apply All
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type ProgressItemProps = {
+  roadmapId: string;
+  topicId: string;
+  text: string;
+  action: UpdateUserProgress['action'];
+  isStreaming: boolean;
+  isBulkUpdating: boolean;
+  isBulkUpdateSuccess: boolean;
+};
+
+function ProgressItem(props: ProgressItemProps) {
+  const {
+    roadmapId,
+    topicId,
+    text,
+    action,
+    isStreaming,
+    isBulkUpdating,
+    isBulkUpdateSuccess,
+  } = props;
+
+  const toast = useToast();
+  const {
+    mutate: updateTopicStatus,
+    isSuccess,
+    isPending: isUpdating,
+  } = useMutation(
+    {
+      mutationFn: (action: ResourceProgressType) => {
+        return updateResourceProgress(
+          {
+            resourceId: roadmapId,
+            resourceType: 'roadmap',
+            topicId,
+          },
+          action,
+        );
+      },
+      onMutate: () => {},
+      onSuccess: () => {
+        renderTopicProgress(topicId, action);
+      },
+      onError: () => {
+        toast.error('Something went wrong, please try again.');
+      },
+      onSettled: () => {
+        return queryClient.invalidateQueries(
+          userResourceProgressOptions('roadmap', roadmapId),
+        );
+      },
+    },
+    queryClient,
+  );
+
+  const textParts = text.split(' > ');
+  const lastIndex = textParts.length - 1;
+
+  return (
+    <div className="flex min-h-[40px] items-center justify-between gap-2 rounded-lg border border-gray-200 bg-white py-1 pr-1 pl-3">
+      <span className="flex items-center gap-1 truncate text-sm text-gray-500">
+        {textParts.map((part, index) => {
+          return (
+            <Fragment key={index}>
+              {part}
+              {index !== lastIndex && (
+                <span className="text-gray-500">
+                  <ChevronRightIcon className="size-3 shrink-0" />{' '}
+                </span>
+              )}
+            </Fragment>
+          );
+        })}
+      </span>
+      {!isSuccess && !isBulkUpdateSuccess && (
+        <>
+          {!isStreaming && (
+            <button
+              className={cn(
+                `flex shrink-0 items-center gap-1.5 rounded-md border border-gray-200 px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40`,
+                {
+                  'bg-green-100 hover:border-green-300 hover:bg-green-200':
+                    action === 'done',
+                  'bg-yellow-100 hover:border-yellow-300 hover:bg-yellow-200':
+                    action === 'learning',
+                  'bg-gray-800 text-white hover:border-black hover:bg-black':
+                    action === 'skipped',
+                  'bg-gray-100 hover:border-gray-300 hover:bg-gray-200':
+                    action === 'pending',
+                },
+              )}
+              onClick={() => updateTopicStatus(action)}
+              disabled={isStreaming || isUpdating || isBulkUpdating}
+            >
+              {(isUpdating || isBulkUpdating) && (
+                <Loader2Icon className="size-4 animate-spin" />
+              )}
+              {!isUpdating && !isBulkUpdating && (
+                <>
+                  <CheckIcon additionalClasses="size-3" />
+                  Mark it as {action}
+                </>
+              )}
+            </button>
+          )}
+          {isStreaming && (
+            <span className="flex size-[30px] items-center justify-center text-gray-300">
+              <Loader2Icon className="size-4 animate-spin" />
+            </span>
+          )}
+        </>
+      )}
+      {(isSuccess || isBulkUpdateSuccess) && (
+        <span className="flex size-[30px] items-center justify-center text-green-500">
+          <CheckIcon additionalClasses="size-4" />
+        </span>
+      )}
+    </div>
+  );
+}

src/components/ChatMessages/UserProgressList.tsx

@@ -0,0 +1,60 @@
+import { useQuery } from '@tanstack/react-query';
+import { getPercentage } from '../../lib/number';
+import { userResourceProgressOptions } from '../../queries/resource-progress';
+import { queryClient } from '../../stores/query-client';
+
+type RoadmapChatUserProgressListProps = {
+  roadmapId: string;
+};
+
+export function RoadmapChatUserProgressList(
+  props: RoadmapChatUserProgressListProps,
+) {
+  const { roadmapId } = props;
+
+  const { data: userResourceProgressData } = useQuery(
+    userResourceProgressOptions('roadmap', roadmapId),
+    queryClient,
+  );
+
+  const doneCount = userResourceProgressData?.done?.length ?? 0;
+  const skippedCount = userResourceProgressData?.skipped?.length ?? 0;
+
+  const totalTopicCount = userResourceProgressData?.totalTopicCount ?? 0;
+  const totalFinished = doneCount + skippedCount;
+  const progressPercentage = getPercentage(totalFinished, totalTopicCount);
+
+  return (
+    <div className="relative my-6 flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 first:mt-0 last:mb-0">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-gray-600">Progress</span>
+          <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
+            {progressPercentage}%
+          </span>
+        </div>
+        <span className="hidden text-sm font-medium text-gray-600 md:block">
+          {totalFinished} / {totalTopicCount} topics
+        </span>
+      </div>
+
+      <div className="relative h-2 w-full overflow-hidden rounded-full bg-gray-100">
+        <div
+          className="absolute inset-0 bg-gradient-to-r from-green-500 to-green-600 transition-all duration-300"
+          style={{ width: `${progressPercentage}%` }}
+        />
+      </div>
+
+      <div className="flex items-center gap-4 text-xs text-gray-500">
+        <div className="flex items-center gap-1">
+          <div className="h-2 w-2 rounded-full bg-green-500" />
+          <span>Completed: {doneCount}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="h-2 w-2 rounded-full bg-gray-400" />
+          <span>Skipped: {skippedCount}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Dashboard/DashboardPage.tsx

@@ -10,9 +10,9 @@ import { DashboardTabButton } from './DashboardTabButton';
 import { PersonalDashboard, type BuiltInRoadmap } from './PersonalDashboard';
 import { TeamDashboard } from './TeamDashboard';
 import type { QuestionGroupType } from '../../lib/question-group';
-import type { GuideFileType } from '../../lib/guide';
 import type { VideoFileType } from '../../lib/video';
 import { cn } from '../../lib/classname';
+import type { OfficialGuideDocument } from '../../queries/official-guide';
 
 type DashboardPageProps = {
   builtInRoleRoadmaps?: BuiltInRoadmap[];
@@ -20,7 +20,7 @@ type DashboardPageProps = {
   builtInBestPractices?: BuiltInRoadmap[];
   isTeamPage?: boolean;
   questionGroups?: QuestionGroupType[];
-  guides?: GuideFileType[];
+  guides?: OfficialGuideDocument[];
   videos?: VideoFileType[];
 };
 
@@ -30,7 +30,6 @@ export function DashboardPage(props: DashboardPageProps) {
     builtInBestPractices,
     builtInSkillRoadmaps,
     isTeamPage = false,
-    questionGroups,
     guides,
     videos,
   } = props;
@@ -132,7 +131,6 @@ export function DashboardPage(props: DashboardPageProps) {
               builtInRoleRoadmaps={builtInRoleRoadmaps}
               builtInSkillRoadmaps={builtInSkillRoadmaps}
               builtInBestPractices={builtInBestPractices}
-              questionGroups={questionGroups}
               guides={guides}
               videos={videos}
             />

src/components/Dashboard/PersonalDashboard.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import type { AllowedProfileVisibility } from '../../api/user.ts';
 import { useToast } from '../../hooks/use-toast';
 import { cn } from '../../lib/classname.ts';
-import type { GuideFileType } from '../../lib/guide';
 import { httpGet } from '../../lib/http';
 import type { QuestionGroupType } from '../../lib/question-group';
 import type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
@@ -21,6 +20,7 @@ import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
 import type { UserProgress } from '../TeamProgress/TeamProgressPage';
 import { useIsPaidUser } from '../../queries/billing.ts';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal.tsx';
+import type { OfficialGuideDocument } from '../../queries/official-guide.ts';
 
 const projectGroups = [
   {
@@ -66,7 +66,7 @@ type PersonalDashboardProps = {
   builtInSkillRoadmaps?: BuiltInRoadmap[];
   builtInBestPractices?: BuiltInRoadmap[];
   questionGroups?: QuestionGroupType[];
-  guides?: GuideFileType[];
+  guides?: OfficialGuideDocument[];
   videos?: VideoFileType[];
 };
 
@@ -193,7 +193,6 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
     builtInRoleRoadmaps = [],
     builtInBestPractices = [],
     builtInSkillRoadmaps = [],
-    questionGroups = [],
     guides = [],
     videos = [],
   } = props;
@@ -466,40 +465,15 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
             </div>
           </div>
         </div>
-
-        <div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
-          <div className="container">
-            <h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
-              Questions
-            </h2>
-
-            <div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
-              {questionGroups.map((questionGroup) => {
-                return (
-                  <HeroRoadmap
-                    percentageDone={0}
-                    key={questionGroup.id}
-                    resourceId={questionGroup.id}
-                    resourceType="roadmap"
-                    resourceTitle={questionGroup.frontmatter.briefTitle}
-                    url={`/questions/${questionGroup.id}`}
-                    allowFavorite={false}
-                    isNew={questionGroup.frontmatter.isNew}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        </div>
       </div>
 
       <div className="grid grid-cols-1 gap-5 bg-gray-50 px-4 py-5 sm:gap-16 sm:px-0 sm:py-16">
         <FeaturedGuideList
           heading="Guides"
-          guides={guides}
-          questions={questionGroups
-            .filter((questionGroup) => questionGroup.frontmatter.authorId)
-            .slice(0, 7)}
+          guides={guides.slice(0, 15)}
+          questions={guides
+            .filter((guide) => guide.roadmapId === 'questions')
+            .slice(0, 15)}
         />
         <FeaturedVideoList heading="Videos" videos={videos} />
       </div>

src/components/FeaturedGuides/FeaturedGuideList.tsx

@@ -1,22 +1,18 @@
-import type { GuideFileType } from '../../lib/guide';
-import type { QuestionGroupType } from '../../lib/question-group';
+import type { OfficialGuideDocument } from '../../queries/official-guide';
 import { GuideListItem } from './GuideListItem';
 
 export interface FeaturedGuidesProps {
   heading: string;
-  guides: GuideFileType[];
-  questions: QuestionGroupType[];
+  guides: OfficialGuideDocument[];
+  questions: OfficialGuideDocument[];
 }
 
 export function FeaturedGuideList(props: FeaturedGuidesProps) {
   const { heading, guides, questions = [] } = props;
 
-  const sortedGuides: (QuestionGroupType | GuideFileType)[] = [
-    ...guides,
-    ...questions,
-  ].sort((a, b) => {
-    const aDate = new Date(a.frontmatter.date as string);
-    const bDate = new Date(b.frontmatter.date as string);
+  const sortedGuides = [...guides, ...questions].sort((a, b) => {
+    const aDate = new Date(a.publishedAt ?? new Date());
+    const bDate = new Date(b.publishedAt ?? new Date());
 
     return bDate.getTime() - aDate.getTime();
   });
@@ -27,7 +23,7 @@ export function FeaturedGuideList(props: FeaturedGuidesProps) {
 
       <div className="mt-3 sm:my-5">
         {sortedGuides.map((guide) => (
-          <GuideListItem key={guide.id} guide={guide} />
+          <GuideListItem key={guide._id} guide={guide} />
         ))}
       </div>
 
@@ -48,4 +44,4 @@ export function FeaturedGuideList(props: FeaturedGuidesProps) {
       </div>
     </div>
   );
-} 
+}

src/components/FeaturedGuides/GuideListItem.tsx

@@ -1,52 +1,46 @@
-import type { GuideFileType, GuideFrontmatter } from '../../lib/guide';
-import { type QuestionGroupType } from '../../lib/question-group';
-import dayjs from 'dayjs';
+import { DateTime } from 'luxon';
+import {
+  getOfficialGuideHref,
+  type OfficialGuideDocument,
+} from '../../queries/official-guide';
 
 export interface GuideListItemProps {
-  guide: GuideFileType | QuestionGroupType;
-}
-
-function isQuestionGroupType(
-  guide: GuideFileType | QuestionGroupType,
-): guide is QuestionGroupType {
-  return (guide as QuestionGroupType).questions !== undefined;
+  guide: OfficialGuideDocument;
 }
 
 export function GuideListItem(props: GuideListItemProps) {
   const { guide } = props;
-  const { frontmatter, id } = guide;
+  const { title, slug, publishedAt, roadmapId } = guide;
 
-  let pageUrl = '';
-  let guideType = '';
-
-  if (isQuestionGroupType(guide)) {
-    pageUrl = `/questions/${id}`;
-    guideType = 'Questions';
-  } else {
-    const excludedBySlug = (frontmatter as GuideFrontmatter).excludedBySlug;
-    pageUrl = excludedBySlug ? excludedBySlug : `/guides/${id}`;
-    guideType = (frontmatter as GuideFrontmatter).type;
+  let guideType = 'Textual';
+  if (roadmapId === 'questions') {
+    guideType = 'Question';
   }
 
-  // Check if article is within the last 15 days
-  const isNew = frontmatter.date
-    ? dayjs().diff(dayjs(frontmatter.date), 'day') < 15
-    : false;
+  const publishedAtDate = publishedAt
+    ? DateTime.fromJSDate(new Date(publishedAt))
+    : null;
+
+  const isNew =
+    publishedAtDate && DateTime.now().diff(publishedAtDate, 'days').days < 15;
+  const publishedAtMonth = publishedAtDate
+    ? publishedAtDate.toFormat('MMMM')
+    : '';
 
   return (
     <a
-      className="text-md group block flex items-center justify-between border-b py-2 text-gray-600 no-underline hover:text-blue-600"
-      href={pageUrl}
+      className="text-md group flex items-center justify-between border-b py-2 text-gray-600 no-underline hover:text-blue-600"
+      href={getOfficialGuideHref(slug, roadmapId)}
     >
       <span className="text-sm transition-transform group-hover:translate-x-2 md:text-base">
-        {frontmatter.title}
+        {title}
 
         {isNew && (
           <span className="ml-2.5 rounded-xs bg-green-300 px-1.5 py-0.5 text-xs font-medium text-green-900 uppercase">
             New
             <span className="hidden sm:inline">
               &nbsp;&middot;&nbsp;
-              {frontmatter.date ? dayjs(frontmatter.date).format('MMMM') : ''}
+              {publishedAtMonth}
             </span>
           </span>
         )}

src/components/FrameRenderer/RoadmapFloatingChat.tsx

@@ -1,3 +1,5 @@
+import '../ChatMessages/AIChat.css';
+
 import { useQuery } from '@tanstack/react-query';
 import type { JSONContent } from '@tiptap/core';
 import {
@@ -14,13 +16,9 @@ import {
   Wand2,
   X,
 } from 'lucide-react';
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useKeydown } from '../../hooks/use-keydown';
-import {
-  roadmapAIChatRenderer,
-  useRoadmapAIChat,
-} from '../../hooks/use-roadmap-ai-chat';
 import { cn } from '../../lib/classname';
 import { lockBodyScroll } from '../../lib/dom';
 import { isLoggedIn } from '../../lib/jwt';
@@ -33,10 +31,14 @@ import { roadmapJSONOptions } from '../../queries/roadmap';
 import { roadmapQuestionsOptions } from '../../queries/roadmap-questions';
 import { queryClient } from '../../stores/query-client';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
-import { RoadmapAIChatCard } from '../RoadmapAIChat/RoadmapAIChatCard';
 import { RoadmapAIChatHistory } from '../RoadmapAIChatHistory/RoadmapAIChatHistory';
 import { CLOSE_TOPIC_DETAIL_EVENT } from '../TopicDetail/TopicDetail';
 import { UpdatePersonaModal } from '../UserPersona/UpdatePersonaModal';
+import { shuffle } from '../../helper/shuffle';
+import { useChat } from '@ai-sdk/react';
+import { chatRoadmapTransport } from '../../lib/ai';
+import { useAIChatScroll } from '../../hooks/use-ai-chat-scroll';
+import { RoadmapChatMessages } from '../ChatMessages/RoadmapChatMessages';
 
 type ChatHeaderButtonProps = {
   onClick?: () => void;
@@ -158,10 +160,12 @@ type RoadmapChatProps = {
 
 export function RoadmapFloatingChat(props: RoadmapChatProps) {
   const { roadmapId } = props;
+
   const [isOpen, setIsOpen] = useState(false);
-  const scrollareaRef = useRef<HTMLDivElement>(null);
   const [inputValue, setInputValue] = useState('');
+
   const inputRef = useRef<HTMLInputElement>(null);
+
   const [isPersonalizeOpen, setIsPersonalizeOpen] = useState(false);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
 
@@ -176,9 +180,7 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
     if (!questionsData?.questions || questionsData.questions.length === 0) {
       return [];
     }
-    const shuffled = [...questionsData.questions].sort(
-      () => 0.5 - Math.random(),
-    );
+    const shuffled = shuffle([...questionsData.questions]);
     return shuffled.slice(0, 4);
   }, [questionsData]);
 
@@ -236,45 +238,36 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
     string | undefined
   >();
   const { data: chatHistory } = useQuery(
-    chatHistoryOptions(
-      activeChatHistoryId,
-      roadmapAIChatRenderer({
-        roadmapId,
-        totalTopicCount,
-        onSelectTopic,
-      }),
-    ),
+    chatHistoryOptions(activeChatHistoryId),
     queryClient,
   );
 
-  const {
-    aiChatHistory,
-    isStreamingMessage,
-    streamedMessage,
-    showScrollToBottom,
-    setShowScrollToBottom,
-    handleChatSubmit,
-    handleAbort,
-    scrollToBottom,
-    clearChat,
-    setAiChatHistory,
-  } = useRoadmapAIChat({
-    activeChatHistoryId,
-    roadmapId,
-    totalTopicCount,
-    scrollareaRef,
-    onSelectTopic,
-    onChatHistoryIdChange: (chatHistoryId) => {
-      setActiveChatHistoryId(chatHistoryId);
+  const { messages, sendMessage, status, stop, setMessages } = useChat({
+    transport: chatRoadmapTransport,
+    onData: (data) => {
+      if (data.type === 'data-redirect') {
+        const { title, chatId } = data.data as {
+          title: string;
+          chatId: string;
+        };
+
+        document.title = title;
+        setActiveChatHistoryId(chatId);
+      }
     },
   });
 
+  const { scrollToBottom, scrollableContainerRef, showScrollToBottomButton } =
+    useAIChatScroll({
+      messages,
+    });
+
   useEffect(() => {
     if (!chatHistory) {
       return;
     }
 
-    setAiChatHistory(chatHistory?.messages ?? []);
+    setMessages(chatHistory?.messages ?? []);
     setIsChatHistoryLoading(false);
     setTimeout(() => {
       scrollToBottom('instant');
@@ -286,9 +279,9 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
       return;
     }
 
-    setAiChatHistory([]);
+    setMessages([]);
     setIsChatHistoryLoading(false);
-  }, [activeChatHistoryId, setAiChatHistory, setIsChatHistoryLoading]);
+  }, [activeChatHistoryId]);
 
   useEffect(() => {
     lockBodyScroll(isOpen);
@@ -320,26 +313,45 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
     };
   }
 
-  const submitInput = () => {
+  const clearChat = () => {
+    setMessages([]);
+    setInputValue('');
+  };
+
+  const submitInput = (message?: string) => {
     if (!isLoggedIn()) {
       setIsOpen(false);
       showLoginPopup();
       return;
     }
 
-    const trimmed = inputValue.trim();
+    const trimmed = (message ?? inputValue).trim();
     if (!trimmed) {
       return;
     }
 
-    const json: JSONContent = textToJSON(trimmed);
+    sendMessage(
+      { text: trimmed, metadata: { json: textToJSON(trimmed) } },
+      {
+        body: {
+          roadmapId,
+          ...(activeChatHistoryId
+            ? { chatHistoryId: activeChatHistoryId }
+            : {}),
+        },
+      },
+    );
 
-    setInputValue('');
-    handleChatSubmit(json, isRoadmapDetailLoading);
+    setTimeout(() => {
+      scrollToBottom('smooth');
+      setInputValue('');
+      inputRef.current?.focus();
+    }, 0);
   };
 
-  const hasMessages = aiChatHistory.length > 0;
-  const newTabUrl = `/${roadmapId}/ai${activeChatHistoryId ? `?chatId=${activeChatHistoryId}` : ''}`;
+  const isStreamingMessage = status !== 'ready';
+  const hasMessages = messages.length > 0;
+  const newTabUrl = `/ai/roadmap-chat/${roadmapId}${activeChatHistoryId ? `?chatId=${activeChatHistoryId}` : ''}`;
 
   return (
     <>
@@ -371,7 +383,7 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
 
       <div
         className={cn(
-          'animate-fade-slide-up fixed bottom-5 left-1/2 max-h-[95vh] max-w-[968px] -translate-x-1/4 transform flex-col gap-1.5 overflow-hidden px-4 duration-300 sm:max-h-[50vh] lg:flex',
+          'animate-fade-slide-up ai-chat fixed bottom-5 left-1/2 max-h-[95vh] max-w-[968px] -translate-x-1/4 transform flex-col gap-1.5 overflow-hidden px-4 duration-300 sm:max-h-[50vh] lg:flex',
           isOpen ? 'z-91 h-full w-full' : 'z-40 w-auto',
         )}
       >
@@ -417,7 +429,6 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
                     onChatHistoryClick={(chatHistoryId) => {
                       setIsChatHistoryLoading(true);
                       setActiveChatHistoryId(chatHistoryId);
-                      setShowScrollToBottom(false);
                     }}
                     onDelete={(chatHistoryId) => {
                       if (activeChatHistoryId === chatHistoryId) {
@@ -443,82 +454,27 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
                   />
                 </div>
               </div>
-              <div
-                className="flex flex-1 flex-grow flex-col overflow-y-auto px-3 py-2"
-                ref={scrollareaRef}
-              >
-                <div className="flex flex-col gap-2 text-sm">
-                  <RoadmapAIChatCard
-                    role="assistant"
-                    jsx={
-                      <span className="mt-[2px]">
-                        Hey, I am your AI tutor. How can I help you today? 👋
-                      </span>
-                    }
-                    isIntro
+              <div className="relative flex grow flex-col">
+                <div
+                  className="relative grow overflow-y-auto"
+                  ref={scrollableContainerRef}
+                >
+                  <RoadmapChatMessages
+                    messages={messages}
+                    status={status}
+                    roadmapId={roadmapId}
+                    defaultQuestions={defaultQuestions}
+                    onTopicClick={onSelectTopic}
+                    onDefaultQuestionClick={submitInput}
                   />
-
-                  {/* Show default questions only when there's no chat history */}
-                  {aiChatHistory.length === 0 &&
-                    defaultQuestions.length > 0 && (
-                      <div className="mt-0.5 mb-1">
-                        <p className="mb-2 text-xs font-normal text-gray-500">
-                          Some questions you might have about this roadmap:
-                        </p>
-                        <div className="flex flex-col justify-end gap-1">
-                          {defaultQuestions.map((question, index) => (
-                            <button
-                              key={`default-question-${index}`}
-                              className="flex h-full self-start rounded-md bg-yellow-500/10 px-3 py-2 text-left text-sm text-black hover:bg-yellow-500/20"
-                              onClick={() => {
-                                if (!isLoggedIn()) {
-                                  setIsOpen(false);
-                                  showLoginPopup();
-                                  return;
-                                }
-
-                                if (isLimitExceeded) {
-                                  setShowUpgradeModal(true);
-                                  setIsOpen(false);
-                                  return;
-                                }
-
-                                handleChatSubmit(
-                                  textToJSON(question),
-                                  isRoadmapDetailLoading,
-                                );
-                              }}
-                            >
-                              {question}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-
-                  {aiChatHistory.map((chat, index) => (
-                    <Fragment key={`chat-${index}`}>
-                      <RoadmapAIChatCard {...chat} />
-                    </Fragment>
-                  ))}
-
-                  {isStreamingMessage && !streamedMessage && (
-                    <RoadmapAIChatCard role="assistant" html="Thinking..." />
-                  )}
-
-                  {streamedMessage && (
-                    <RoadmapAIChatCard role="assistant" jsx={streamedMessage} />
-                  )}
                 </div>
 
-                {/* Scroll to bottom button */}
-                {showScrollToBottom && (
+                {showScrollToBottomButton && (
                   <button
                     onClick={() => {
                       scrollToBottom('instant');
-                      setShowScrollToBottom(false);
                     }}
-                    className="sticky bottom-0 mx-auto mt-2 flex items-center gap-1.5 rounded-full bg-gray-900 px-3 py-1.5 text-xs text-white shadow-lg transition-all hover:bg-gray-800"
+                    className="absolute inset-x-0 bottom-2 mx-auto mt-2 flex w-fit items-center gap-1.5 rounded-full bg-gray-900 px-3 py-1.5 text-xs text-white shadow-lg transition-all hover:bg-gray-800"
                   >
                     <ChevronDown className="h-3 w-3" />
                     Scroll to bottom
@@ -534,6 +490,7 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
                   }}
                 />
               )}
+
               {!isLimitExceeded && (
                 <>
                   <div className="flex flex-row justify-between border-t border-gray-200 px-3 pt-2">
@@ -587,9 +544,10 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
                           e.preventDefault();
-                          if (isStreamingMessage) {
+                          if (status !== 'ready') {
                             return;
                           }
+
                           submitInput();
                         }
                       }}
@@ -609,9 +567,10 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
                       disabled={isRoadmapDetailLoading || isLimitExceeded}
                       onClick={() => {
                         if (isStreamingMessage) {
-                          handleAbort();
+                          stop();
                           return;
                         }
+
                         submitInput();
                       }}
                     >
@@ -637,7 +596,6 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
               setIsOpen(true);
               setTimeout(() => {
                 scrollToBottom('instant');
-                setShowScrollToBottom(false);
               }, 0);
             }}
           >

src/components/GenerateCourse/ForkCourseAlert.tsx

@@ -25,7 +25,7 @@ export function ForkCourseAlert(props: ForkCourseAlertProps) {
       )}
     >
       <p className="text-sm text-balance">
-        Fork the course to track progress and make changes to the course.
+        Fork the course to track you progress and make changes to the course.
       </p>
 
       <button

src/components/Global/CodeBlock.tsx

@@ -0,0 +1,160 @@
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+} from '@shikijs/transformers';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import type { HTMLAttributes } from 'react';
+import { useLayoutEffect, useState } from 'react';
+import { type BundledLanguage, codeToHtml } from 'shiki';
+import { cn } from '../../lib/classname';
+import { useCopyText } from '../../hooks/use-copy-text';
+export type { BundledLanguage } from 'shiki';
+
+const codeBlockClassName = cn(
+  'mt-0 text-sm',
+  '[&_pre]:py-0',
+  '[&_pre]:grid',
+  '[&_code]:py-4',
+  '[&_code]:w-full',
+  '[&_code]:grid',
+  '[&_code]:overflow-x-auto',
+  '[&_code]:no-scrollbar',
+  '[&_code]:bg-transparent',
+  '[&_.line]:px-3',
+  '[&_.line]:w-full',
+  '[&_.line]:relative',
+  '[&_.line]:min-h-5',
+);
+
+function highlight(html: string, language?: BundledLanguage) {
+  return codeToHtml(html, {
+    lang: language ?? 'typescript',
+    theme: 'github-light',
+    transformers: [
+      transformerNotationDiff({
+        matchAlgorithm: 'v3',
+      }),
+      transformerNotationHighlight({
+        matchAlgorithm: 'v3',
+      }),
+      transformerNotationWordHighlight({
+        matchAlgorithm: 'v3',
+      }),
+      transformerNotationFocus({
+        matchAlgorithm: 'v3',
+      }),
+      transformerNotationErrorLevel({
+        matchAlgorithm: 'v3',
+      }),
+    ],
+  });
+}
+
+type CodeBlockFallbackProps = HTMLAttributes<HTMLDivElement>;
+
+const CodeBlockFallback = ({ children, ...props }: CodeBlockFallbackProps) => (
+  <div {...props}>
+    <pre className="w-full bg-white">
+      <code>
+        {children
+          ?.toString()
+          .split('\n')
+          .map((line, i) => (
+            <span className="line" key={i}>
+              {line}
+            </span>
+          ))}
+      </code>
+    </pre>
+  </div>
+);
+
+export type CodeBlockItemProps = HTMLAttributes<HTMLDivElement> & {
+  value: string;
+  lineNumbers?: boolean;
+};
+
+export const CodeBlockItem = ({
+  children,
+  lineNumbers = true,
+  className,
+  value,
+  ...props
+}: CodeBlockItemProps) => {
+  return (
+    <div className={cn(codeBlockClassName, className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export type CodeBlockContentProps = HTMLAttributes<HTMLDivElement> & {
+  language?: BundledLanguage;
+  syntaxHighlighting?: boolean;
+  children: string;
+};
+
+export const CodeBlockContent = ({
+  children,
+  language,
+  syntaxHighlighting = true,
+  ...props
+}: CodeBlockContentProps) => {
+  const [html, setHtml] = useState<string | null>(null);
+  useLayoutEffect(() => {
+    if (!syntaxHighlighting) {
+      return;
+    }
+
+    if (typeof children !== 'string') {
+      return;
+    }
+
+    highlight(children, language).then(setHtml).catch(console.error);
+  }, [children, syntaxHighlighting, language]);
+
+  if (!(syntaxHighlighting && html)) {
+    return <CodeBlockFallback>{children}</CodeBlockFallback>;
+  }
+
+  return <div dangerouslySetInnerHTML={{ __html: html }} {...props} />;
+};
+
+type CodeBlockHeaderProps = HTMLAttributes<HTMLDivElement> & {
+  language: string;
+  code: string;
+};
+
+export function CodeBlockHeader(props: CodeBlockHeaderProps) {
+  const { language, code, className, ...rest } = props;
+
+  const { copyText, isCopied } = useCopyText();
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between gap-2 border-b border-gray-200 bg-gray-50 px-3 py-2',
+        className,
+      )}
+      {...rest}
+    >
+      <span className="text-sm text-gray-600">{language}</span>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => copyText(code)}
+          className="flex size-6 items-center justify-center gap-2 rounded-md text-gray-400 hover:bg-zinc-200 hover:text-black focus:outline-none"
+        >
+          {isCopied ? (
+            <CheckIcon className="size-3.5" />
+          ) : (
+            <CopyIcon className="size-3.5" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/Global/Markdown.tsx

@@ -0,0 +1,99 @@
+import 'katex/dist/katex.min.css';
+
+import { memo } from 'react';
+import ReactMarkdown, { type Options } from 'react-markdown';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { cn } from '../../lib/classname';
+import {
+  CodeBlockContent,
+  CodeBlockHeader,
+  CodeBlockItem,
+  type BundledLanguage,
+} from './CodeBlock';
+
+function getLanguage(children: React.ReactNode) {
+  if (
+    typeof children === 'object' &&
+    children !== null &&
+    'type' in children &&
+    children.type === 'code' &&
+    'props' in children &&
+    typeof children.props === 'object' &&
+    children.props !== null &&
+    'className' in children.props &&
+    typeof children.props.className === 'string'
+  ) {
+    return children.props.className.replace('language-', '').trim();
+  }
+
+  return 'javascript';
+}
+
+const components: Options['components'] = {
+  pre: (props) => {
+    const { children } = props;
+
+    const language = getLanguage(children);
+    const childrenIsCode =
+      typeof children === 'object' &&
+      children !== null &&
+      'type' in children &&
+      children.type === 'code';
+    if (!childrenIsCode) {
+      return <pre>{children}</pre>;
+    }
+
+    // it's fine to do it, because we only have one code block in the markdown
+    // so no worries, it will be fine
+    // we need to remove the last line because it always add a empty line at the end
+    // @see https://github.com/shikijs/shiki/pull/585
+    const code = (children.props as { children: string })?.children?.slice(
+      0,
+      -1
+    );
+
+    return (
+      <div className="not-prose my-6 max-w-full overflow-hidden rounded-lg border border-gray-200">
+        <CodeBlockHeader language={language} code={code} />
+
+        <CodeBlockItem key={language} value={language} lineNumbers={false}>
+          <CodeBlockContent language={language as BundledLanguage}>
+            {code}
+          </CodeBlockContent>
+        </CodeBlockItem>
+      </div>
+    );
+  },
+};
+
+type MarkdownProps = {
+  children: string;
+  className?: string;
+};
+
+function _Markdown(props: MarkdownProps) {
+  const { children, className } = props;
+
+  return (
+    <div
+      className={cn(
+        'overflow-hidden [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+        className
+      )}
+    >
+      <ReactMarkdown
+        components={components}
+        rehypePlugins={[rehypeKatex]}
+        remarkPlugins={[remarkGfm, remarkMath]}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+export const Markdown = memo(_Markdown, (prevProps, nextProps) => {
+  return prevProps.children === nextProps.children;
+});

src/components/Guide/GuideContent.astro

@@ -1,72 +0,0 @@
----
-import { getGuideTableOfContent, type GuideFileType } from '../../lib/guide';
-import MarkdownFile from '../MarkdownFile.astro';
-import { TableOfContent } from '../TableOfContent/TableOfContent';
-import { RelatedGuides } from './RelatedGuides';
-
-interface Props {
-  guide: GuideFileType;
-}
-
-const { guide } = Astro.props;
-
-const allHeadings = guide.getHeadings();
-const tableOfContent = getGuideTableOfContent(allHeadings);
-
-const showTableOfContent = tableOfContent.length > 0;
-const showRelatedGuides =
-  guide?.relatedGuides && Object.keys(guide?.relatedGuides).length > 0;
-const { frontmatter: guideFrontmatter, author } = guide;
----
-
-<article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>
-  {
-    (showTableOfContent || showRelatedGuides) && (
-      <div class='sticky top-0 lg:relative bg-linear-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
-        <RelatedGuides
-          relatedTitle={guideFrontmatter?.relatedTitle}
-          relatedGuides={guide?.relatedGuides || {}}
-          client:load
-        />
-        <TableOfContent toc={tableOfContent} client:load />
-      </div>
-    )
-  }
-
-  <div
-    class:list={[
-      'col-start-2 col-end-3 row-start-1 mx-auto max-w-[700px] py-5 sm:py-10',
-      {
-        'lg:border-r': showTableOfContent,
-      },
-    ]}
-  >
-    <MarkdownFile>
-      <h1 class='mb-3 text-balance text-4xl font-bold'>
-        {guideFrontmatter.title}
-      </h1>
-      <p class='my-0 flex items-center justify-start text-sm text-gray-400'>
-        <a
-          href={`/authors/${author.id}`}
-          class='inline-flex items-center font-medium underline-offset-2 hover:text-gray-600 hover:underline'
-        >
-          <img
-            alt={author.frontmatter.name}
-            src={author.frontmatter.imageUrl}
-            class='mb-0 mr-2 inline h-5 w-5 rounded-full'
-          />
-          {author.frontmatter.name}
-        </a>
-        <span class='mx-2 hidden sm:inline'>&middot;</span>
-        <a
-          class='hidden underline-offset-2 hover:text-gray-600 sm:inline'
-          href={`https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/guides/${guide.id}.md`}
-          target='_blank'
-        >
-          Improve this Guide
-        </a>
-      </p>
-      <guide.Content />
-    </MarkdownFile>
-  </div>
-</article>

src/components/Guide/GuideContent.tsx

@@ -0,0 +1,60 @@
+import { cn } from '../../lib/classname';
+import { guideRenderer } from '../../lib/guide-renderer';
+import type { OfficialGuideResponse } from '../../queries/official-guide';
+import { TableOfContent } from '../TableOfContent/TableOfContent';
+import { RelatedGuides } from './RelatedGuides';
+
+type GuideContentProps = {
+  guide: OfficialGuideResponse;
+};
+
+export function GuideContent(props: GuideContentProps) {
+  const { guide } = props;
+  const content = guideRenderer.render(guide.content);
+  const tableOfContents = guideRenderer.tableOfContents(guide.content);
+  const showTableOfContent = tableOfContents.length > 0;
+  const hasRelatedGuides =
+    guide.relatedGuides && guide.relatedGuides.length > 0;
+
+  return (
+    <article className="lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]">
+      {(showTableOfContent || hasRelatedGuides) && (
+        <div className="sticky top-0 bg-linear-to-r from-gray-50 py-0 lg:relative lg:col-start-3 lg:col-end-4 lg:row-start-1">
+          {hasRelatedGuides && (
+            <RelatedGuides relatedGuides={guide?.relatedGuides || []} />
+          )}
+
+          {showTableOfContent && <TableOfContent toc={tableOfContents} />}
+        </div>
+      )}
+
+      <div
+        className={cn(
+          'col-start-2 col-end-3 row-start-1 mx-auto max-w-[700px] py-5 sm:py-10',
+          showTableOfContent && 'lg:border-r',
+        )}
+      >
+        <div className="prose prose-xl prose-h2:mb-3 prose-h2:mt-10 prose-h2:scroll-mt-5 prose-h2:text-balance prose-h2:text-3xl prose-h3:mt-2 prose-h4:text-2xl prose-h3:scroll-mt-5 prose-h3:text-balance prose-h4:text-balance prose-h5:text-balance prose-h5:font-medium prose-blockquote:font-normal prose-code:bg-transparent prose-img:mt-1 sm:prose-h2:scroll-mt-10 sm:prose-h3:scroll-mt-10 prose-li:[&>p]:m-0 container">
+          <h1 className="mb-3 text-4xl font-bold text-balance">
+            {guide.title}
+          </h1>
+          <p className="my-0 mb-6 flex items-center justify-start text-sm text-gray-400">
+            <a
+              href={`/authors/${guide.author?.slug}`}
+              className="inline-flex items-center font-medium underline-offset-2 hover:text-gray-600 hover:underline"
+            >
+              <img
+                alt={guide.author?.name}
+                src={guide.author?.avatar}
+                className="mr-2 mb-0 inline h-5 w-5 rounded-full"
+              />
+              {guide.author?.name}
+            </a>
+          </p>
+
+          {content}
+        </div>
+      </div>
+    </article>
+  );
+}

src/components/Guide/RelatedGuides.tsx

@@ -1,10 +1,11 @@
 import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
+import type { OfficialGuideDocument } from '../../queries/official-guide';
 import { cn } from '../../lib/classname';
 
 type RelatedGuidesProps = {
   relatedTitle?: string;
-  relatedGuides: Record<string, string>;
+  relatedGuides: Pick<OfficialGuideDocument, 'title' | 'slug' | 'roadmapId'>[];
 };
 
 export function RelatedGuides(props: RelatedGuidesProps) {
@@ -12,14 +13,7 @@ export function RelatedGuides(props: RelatedGuidesProps) {
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const relatedGuidesArray = Object.entries(relatedGuides).map(
-    ([title, url]) => ({
-      title,
-      url,
-    }),
-  );
-
-  if (relatedGuidesArray.length === 0) {
+  if (relatedGuides.length === 0) {
     return null;
   }
 
@@ -47,23 +41,32 @@ export function RelatedGuides(props: RelatedGuidesProps) {
           isOpen && 'block',
         )}
       >
-        {relatedGuidesArray.map((relatedGuide) => (
-          <li key={relatedGuide.url}>
-            <a
-              href={relatedGuide.url}
-              className="text-sm text-gray-500 no-underline hover:text-black max-lg:block max-lg:border-b max-lg:px-3 max-lg:py-1"
-              onClick={() => {
-                if (!isOpen) {
-                  return;
-                }
+        {relatedGuides.map((relatedGuide) => {
+          const { roadmapId, slug, title } = relatedGuide;
+          const href = roadmapId ? `/${roadmapId}/${slug}` : `/guides/${slug}`;
 
-                setIsOpen(false);
-              }}
-            >
-              {relatedGuide.title}
-            </a>
-          </li>
-        ))}
+          const className = cn(
+            'text-sm text-gray-500 no-underline hover:text-black max-lg:block max-lg:border-b max-lg:px-3 max-lg:py-1',
+          );
+
+          return (
+            <li key={slug}>
+              <a
+                href={href}
+                className={className}
+                onClick={() => {
+                  if (!isOpen) {
+                    return;
+                  }
+
+                  setIsOpen(false);
+                }}
+              >
+                {title}
+              </a>
+            </li>
+          );
+        })}
       </ol>
     </div>
   );

src/components/Questions/QuestionCard.tsx

@@ -1,8 +1,6 @@
 import { Fragment, useEffect, useRef, useState } from 'react';
-import type { QuestionType } from '../../lib/question-group';
-import { markdownToHtml } from '../../lib/markdown';
-import Prism from 'prismjs';
-import './PrismAtom.css';
+import { guideRenderer, type QuestionType } from '../../lib/guide-renderer';
+import { cn } from '../../lib/classname';
 
 type QuestionCardProps = {
   question: QuestionType;
@@ -20,8 +18,6 @@ export function QuestionCard(props: QuestionCardProps) {
     // width if the answer is visible and the question height is less than
     // the answer height
     if (isAnswerVisible) {
-      Prism.highlightAll();
-
       const answerHeight = answerRef.current?.clientHeight || 0;
       const questionHeight = questionRef.current?.clientHeight || 0;
 
@@ -69,7 +65,7 @@ export function QuestionCard(props: QuestionCardProps) {
         </div>
 
         <div className="mx-auto flex max-w-[550px] flex-1 items-center justify-center py-3 sm:py-8">
-          <p className="px-4 text-xl font-semibold leading-snug! text-black sm:text-3xl">
+          <p className="px-4 text-xl leading-snug! font-semibold text-black sm:text-3xl">
             {question.question}
           </p>
         </div>
@@ -88,27 +84,15 @@ export function QuestionCard(props: QuestionCardProps) {
 
       <div
         ref={answerRef}
-        className={`absolute left-0 right-0 flex flex-col items-center justify-center rounded-[7px] bg-neutral-100 py-4 text-sm leading-normal text-black transition-all duration-300 sm:py-8 sm:text-xl ${
-          isAnswerVisible ? 'top-0 min-h-[248px] sm:min-h-[398px]' : 'top-full'
-        }`}
+        className={cn(
+          'absolute right-0 left-0 flex flex-col items-center justify-center rounded-[7px] bg-neutral-100 py-4 text-sm leading-normal text-black transition-all duration-300 sm:py-8 sm:text-xl',
+          isAnswerVisible ? 'top-0 min-h-[248px] sm:min-h-[398px]' : 'top-full',
+        )}
       >
-        {!question.isLongAnswer && (
-          <div
-            className={`mx-auto flex max-w-[600px] grow flex-col items-center justify-center py-0 px-5 text-center text-base [&>p]:leading-relaxed sm:text-xl`}
-            dangerouslySetInnerHTML={{
-              __html: markdownToHtml(question.answer, false),
-            }}
-          />
-        )}
+        <div className="qa-answer prose prose-h5:font-semibold prose-h5:mb-2 prose-h5:text-black prose-sm prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:mb-6! prose-pre:w-full prose-ul:my-2 prose-li:m-0 prose-li:mb-0.5 prose-li:[&>p]:mb-0 sm:prose-p:mb-4 mx-auto flex w-full max-w-[600px] grow flex-col items-start justify-center px-4 py-0 text-left text-sm sm:px-5 sm:text-lg">
+          {guideRenderer.render(question.answer)}
+        </div>
 
-        {question.isLongAnswer && (
-          <div
-            className={`qa-answer prose prose-h5:font-semibold prose-h5:mb-2 prose-h5:text-black prose-sm prose-quoteless mx-auto flex w-full max-w-[600px] grow flex-col items-start justify-center py-0 px-4 text-left text-sm prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:mb-6! prose-pre:w-full prose-ul:my-2 prose-li:m-0 prose-li:mb-0.5 sm:px-5 sm:text-lg sm:prose-p:mb-4`}
-            dangerouslySetInnerHTML={{
-              __html: markdownToHtml(question.answer, false),
-            }}
-          />
-        )}
         <div className="mt-7 text-center">
           <button
             onClick={() => {

src/components/Questions/QuestionGuide.astro

@@ -1,182 +0,0 @@
----
-import { getGuideTableOfContent, type HeadingGroupType } from '../../lib/guide';
-import { markdownToHtml } from '../../lib/markdown';
-import {
-  type QuestionGroupType,
-  type QuestionType,
-} from '../../lib/question-group';
-import { slugify } from '../../lib/slugger';
-import { RelatedGuides } from '../Guide/RelatedGuides';
-import MarkdownFile from '../MarkdownFile.astro';
-import { TableOfContent } from '../TableOfContent/TableOfContent';
-import { QuestionsList } from './QuestionsList';
-
-interface Props {
-  questionGroup: QuestionGroupType;
-}
-
-const { questionGroup } = Astro.props;
-
-const { frontmatter: guideFrontmatter, author } = questionGroup;
-
-// Group questions by topics
-const questionsGroupedByTopics = questionGroup.questions.reduce(
-  (acc, question) => {
-    question.topics?.forEach((topic) => {
-      acc[topic] = [...(acc[topic] || []), question];
-    });
-    return acc;
-  },
-  {} as Record<string, QuestionType[]>,
-);
-
-// Get all unique topics in the order they appear in the questions array
-const topicsInOrder: string[] = [];
-questionGroup.questions.forEach((question) => {
-  question.topics?.forEach((topic) => {
-    if (!topicsInOrder.includes(topic)) {
-      topicsInOrder.push(topic);
-    }
-  });
-});
-
-const allHeadings = questionGroup.getHeadings();
-let tableOfContent: HeadingGroupType[] = [
-  ...getGuideTableOfContent(allHeadings),
-  {
-    depth: 2,
-    children: [],
-    slug: 'test-with-flashcards',
-    text: 'Test yourself with Flashcards',
-  },
-  {
-    depth: 2,
-    children: topicsInOrder.map((topic) => {
-      let topicText = topic;
-      let topicSlug = slugify(topic);
-      if (topic.toLowerCase() === 'beginners') {
-        topicText = 'Beginner Level';
-        topicSlug = 'beginner-level';
-      } else if (topic.toLowerCase() === 'intermediate') {
-        topicText = 'Intermediate Level';
-        topicSlug = 'intermediate-level';
-      } else if (topic.toLowerCase() === 'advanced') {
-        topicText = 'Advanced Level';
-        topicSlug = 'advanced-level';
-      }
-
-      return {
-        depth: 2,
-        children: [],
-        slug: topicSlug,
-        text: topicText,
-      };
-    }),
-    slug: 'questions-list',
-    text: 'Questions List',
-  },
-];
-
-const showTableOfContent = tableOfContent.length > 0;
----
-
-<article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>
-  {
-    showTableOfContent && (
-      <div class='bg-linear-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
-        <RelatedGuides
-          relatedTitle={guideFrontmatter?.relatedTitle}
-          relatedGuides={questionGroup?.relatedGuides || {}}
-          client:load
-        />
-        <TableOfContent toc={tableOfContent} client:load />
-      </div>
-    )
-  }
-
-  <div
-    class:list={[
-      'col-start-2 col-end-3 row-start-1 mx-auto max-w-[700px] py-5 sm:py-10',
-      {
-        'lg:border-r': showTableOfContent,
-      },
-    ]}
-  >
-    <MarkdownFile>
-      <h1 class='mb-3 text-4xl font-bold text-balance'>
-        {guideFrontmatter.title}
-      </h1>
-      {
-        author && (
-          <p class='my-0 flex items-center justify-start text-sm text-gray-400'>
-            <a
-              href={`/authors/${author?.id}`}
-              class='inline-flex items-center font-medium underline-offset-2 hover:text-gray-600 hover:underline'
-            >
-              <img
-                alt={author.frontmatter.name}
-                src={author.frontmatter.imageUrl}
-                class='mr-2 mb-0 inline h-5 w-5 rounded-full'
-              />
-              {author.frontmatter.name}
-            </a>
-            <span class='mx-2 hidden sm:inline'>&middot;</span>
-            <a
-              class='hidden underline-offset-2 hover:text-gray-600 sm:inline'
-              href={`https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/question-groups/${questionGroup.id}`}
-              target='_blank'
-            >
-              Improve this Guide
-            </a>
-          </p>
-        )
-      }
-      <questionGroup.Content />
-
-      <h2 id='test-with-flashcards'>Test yourself with Flashcards</h2>
-      <p>
-        You can either use these flashcards or jump to the questions list
-        section below to see them in a list format.
-      </p>
-      <div class='mx-0 sm:-mb-32'>
-        <QuestionsList
-          groupId={questionGroup.id}
-          questions={questionGroup.questions}
-          client:load
-        />
-      </div>
-
-      <h2 id='questions-list'>Questions List</h2>
-      <p>
-        If you prefer to see the questions in a list format, you can find them
-        below.
-      </p>
-
-      {
-        topicsInOrder.map((questionLevel) => (
-          <div class='mb-5'>
-            <h3 id={slugify(questionLevel)} class='mb-0 capitalize'>
-              {questionLevel.toLowerCase() === 'beginners' ? 'Beginner Level' :
-               questionLevel.toLowerCase() === 'intermediate' ? 'Intermediate Level' :
-               questionLevel.toLowerCase() === 'advanced' ? 'Advanced Level' :
-               questionLevel}
-            </h3>
-            {questionsGroupedByTopics[questionLevel].map((q) => (
-              <div class='mb-5'>
-                <h4>{q.question}</h4>
-                <div set:html={markdownToHtml(q.answer, false)} />
-              </div>
-            ))}
-          </div>
-        ))
-      }
-      {
-        questionGroup.ending && (
-          <div class='mb-5'>
-            <div set:html={markdownToHtml(questionGroup.ending, false)} />
-          </div>
-        )
-      }
-    </MarkdownFile>
-  </div>
-</article>

src/components/Questions/QuestionsList.tsx

@@ -1,10 +1,10 @@
 import { useRef, useState } from 'react';
+import type { QuestionType } from '../../lib/guide-renderer';
 import { QuestionsProgress } from './QuestionsProgress';
-import { CheckCircle, SkipForward, Sparkles } from 'lucide-react';
-import { QuestionCard } from './QuestionCard';
-import { isLoggedIn } from '../../lib/jwt';
-import type { QuestionType } from '../../lib/question-group';
+import { cn } from '../../lib/classname';
 import { QuestionFinished } from './QuestionFinished';
+import { QuestionCard } from './QuestionCard';
+import { CheckCircleIcon, SkipForwardIcon, SparklesIcon } from 'lucide-react';
 import { Confetti } from '../Confetti';
 
 type UserQuestionProgress = {
@@ -16,12 +16,12 @@ type UserQuestionProgress = {
 export type QuestionProgressType = keyof UserQuestionProgress;
 
 type QuestionsListProps = {
-  groupId: string;
   questions: QuestionType[];
+  className?: string;
 };
 
 export function QuestionsList(props: QuestionsListProps) {
-  const { questions } = props;
+  const { questions, className } = props;
 
   const [showConfetti, setShowConfetti] = useState(false);
   const [currQuestionIndex, setCurrQuestionIndex] = useState(0);
@@ -73,7 +73,7 @@ export function QuestionsList(props: QuestionsListProps) {
   const hasFinished = hasProgress && currQuestionIndex === -1;
 
   return (
-    <div className="mb-0 gap-3 text-center sm:mb-40">
+    <div className={cn('mb-0 gap-3 text-center sm:mb-40', className)}>
       <QuestionsProgress
         knowCount={knowCount}
         didNotKnowCount={dontKnowCount}
@@ -139,9 +139,10 @@ export function QuestionsList(props: QuestionsListProps) {
       </div>
 
       <div
-        className={`flex flex-col gap-1 transition-opacity duration-300 sm:flex-row sm:gap-3 ${
-          hasFinished ? 'opacity-0' : 'opacity-100'
-        }`}
+        className={cn(
+          'flex flex-col gap-1 transition-opacity duration-300 sm:flex-row sm:gap-3',
+          hasFinished ? 'opacity-0' : 'opacity-100',
+        )}
       >
         <button
           disabled={!currQuestion}
@@ -152,7 +153,7 @@ export function QuestionsList(props: QuestionsListProps) {
           }}
           className="flex flex-1 items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm text-black transition-colors hover:border-black hover:bg-black hover:text-white disabled:pointer-events-none disabled:opacity-50 sm:rounded-lg sm:px-4 sm:py-3 sm:text-base"
         >
-          <CheckCircle className="mr-1 h-4 text-current" />
+          <CheckCircleIcon className="mr-1 h-4 text-current" />
           Already Know that
         </button>
         <button
@@ -162,7 +163,7 @@ export function QuestionsList(props: QuestionsListProps) {
           disabled={!currQuestion}
           className="flex flex-1 items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm text-black transition-colors hover:border-black hover:bg-black hover:text-white disabled:pointer-events-none disabled:opacity-50 sm:rounded-lg sm:px-4 sm:py-3 sm:text-base"
         >
-          <Sparkles className="mr-1 h-4 text-current" />
+          <SparklesIcon className="mr-1 h-4 text-current" />
           Didn't Know that
         </button>
         <button
@@ -173,7 +174,7 @@ export function QuestionsList(props: QuestionsListProps) {
           data-next-question="skip"
           className="flex flex-1 items-center rounded-md border border-red-600 px-2 py-2 text-sm text-red-600 hover:bg-red-600 hover:text-white disabled:pointer-events-none disabled:opacity-50 sm:rounded-lg sm:px-4 sm:py-3 sm:text-base"
         >
-          <SkipForward className="mr-1 h-4" />
+          <SkipForwardIcon className="mr-1 h-4" />
           Skip Question
         </button>
       </div>

src/components/RoadmapHeader.astro

@@ -156,7 +156,7 @@ const hasProjects = projectCount > 0;
             )}
             {hasAIChat && (
               <TabLink
-                url={`/${roadmapId}/ai`}
+                url={`/ai/roadmap-chat/${roadmapId}`}
                 icon={Bot}
                 text='AI Tutor'
                 mobileText='AI'

src/components/Roadmaps/RoadmapsPage.tsx

@@ -378,6 +378,11 @@ const groups: GroupType[] = [
   {
     group: 'Machine Learning',
     roadmaps: [
+      {
+        title: 'Machine Learning',
+        link: '/machine-learning',
+        type: 'role',
+      },
       {
         title: 'AI and Data Scientist',
         link: '/ai-data-scientist',
@@ -403,6 +408,16 @@ const groups: GroupType[] = [
         link: '/data-analyst',
         type: 'role',
       },
+      {
+        title: 'BI Analyst',
+        link: '/bi-analyst',
+        type: 'role',
+      },
+      {
+        title: 'Data Engineer',
+        link: '/data-engineer',
+        type: 'role',
+      },
       {
         title: 'MLOps',
         link: '/mlops',
@@ -597,7 +612,7 @@ export function RoadmapsPage() {
         {isFilterOpen && <X size={13} className="mr-1" />}
         Categories
       </button>
-      <div className="container relative flex flex-col gap-4 sm:flex-row">
+      <div className="relative container flex flex-col gap-4 sm:flex-row">
         <div
           className={cn(
             'hidden w-full flex-col from-gray-100 sm:w-[180px] sm:border-r sm:bg-linear-to-l sm:pt-6',
@@ -635,10 +650,10 @@ export function RoadmapsPage() {
             </div>
           </div>
         </div>
-        <div className="flex grow flex-col gap-6 pb-20 pt-2 sm:pt-8">
+        <div className="flex grow flex-col gap-6 pt-2 pb-20 sm:pt-8">
           {visibleGroups.map((group) => (
             <div key={`${group.group}-${group.roadmaps.length}`}>
-              <h2 className="mb-2 text-xs uppercase tracking-wide text-gray-400">
+              <h2 className="mb-2 text-xs tracking-wide text-gray-400 uppercase">
                 {group.group}
               </h2>
 

src/components/TableOfContent/TableOfContent.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { HeadingGroupType } from '../../lib/guide';
+import type { HeadingGroupType } from '../../lib/guide-renderer';
 import { ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/classname';
 
@@ -23,7 +23,7 @@ export function TableOfContent(props: TableOfContentProps) {
   return (
     <div
       className={cn(
-        'relative min-w-[250px] px-5 pt-0 max-lg:min-w-full max-lg:max-w-full max-lg:border-none max-lg:px-0 lg:pt-5',
+        'relative min-w-[250px] px-5 pt-0 max-lg:max-w-full max-lg:min-w-full max-lg:border-none max-lg:px-0 lg:pt-5',
         {
           'top-0 lg:sticky!': totalRows <= 20,
         },
@@ -68,7 +68,7 @@ export function TableOfContent(props: TableOfContentProps) {
             </a>
 
             {heading.children.length > 0 && (
-              <ol className="my-0 ml-4 mt-1 space-y-0 max-lg:ml-0 max-lg:mt-0 max-lg:list-none">
+              <ol className="my-0 mt-1 ml-4 space-y-0 max-lg:mt-0 max-lg:ml-0 max-lg:list-none">
                 {heading.children.map((children) => {
                   return (
                     <li key={children.slug}>

src/components/TopNavDropdowns/RoadmapDropdownMenu.tsx

@@ -17,7 +17,7 @@ const links = [
     isHighlighted: true,
   },
   {
-    link: '/ai?format=roadmap',
+    link: '/ai/roadmap',
     label: 'AI Roadmaps',
     description: 'Generate roadmaps with AI',
     Icon: Sparkles,

src/components/TopicDetail/TopicDetail.tsx

@@ -25,9 +25,7 @@ import { Ban, FileText, HeartHandshake, Star, X } from 'lucide-react';
 import { getUrlParams, parseUrl } from '../../lib/browser';
 import { Spinner } from '../ReactIcons/Spinner';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
-import {
-  type AllowedRoadmapRenderer
-} from '../../lib/roadmap.ts';
+import { type AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
 import { lockBodyScroll } from '../../lib/dom.ts';
 import { TopicDetailLink } from './TopicDetailLink.tsx';
 import { ResourceListSeparator } from './ResourceListSeparator.tsx';
@@ -42,6 +40,8 @@ import type { AIChatHistoryType } from '../GenerateCourse/AICourseLessonChat.tsx
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal.tsx';
 import { TopicProgressButton } from './TopicProgressButton.tsx';
 import { CreateCourseModal } from './CreateCourseModal.tsx';
+import { useChat } from '@ai-sdk/react';
+import { topicDetailAiChatTransport } from '../../lib/ai.ts';
 
 type PaidResourceType = {
   _id?: string;
@@ -134,8 +134,6 @@ export function TopicDetail(props: TopicDetailProps) {
   const [links, setLinks] = useState<RoadmapContentDocument['links']>([]);
   const [activeTab, setActiveTab] =
     useState<AllowedTopicDetailsTabs>(defaultActiveTab);
-  const [aiChatHistory, setAiChatHistory] =
-    useState<AIChatHistoryType[]>(defaultChatHistory);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
   const [isCustomResource, setIsCustomResource] = useState(false);
 
@@ -156,14 +154,20 @@ export function TopicDetail(props: TopicDetailProps) {
   const [resourceType, setResourceType] = useState<ResourceType>('roadmap');
   const [paidResources, setPaidResources] = useState<PaidResourceType[]>([]);
 
+  const chatId = `${resourceType}-${resourceId}-${topicId}`;
+  const { messages, sendMessage, setMessages, status } = useChat({
+    id: chatId,
+    transport: topicDetailAiChatTransport,
+  });
+
   const handleClose = () => {
     onClose?.();
     setIsActive(false);
     setIsContributing(false);
     setShowUpgradeModal(false);
-    setAiChatHistory(defaultChatHistory);
     setActiveTab('content');
     setShowSubjectSearchModal(false);
+    setMessages([]);
 
     lockBodyScroll(false);
 
@@ -485,8 +489,10 @@ export function TopicDetail(props: TopicDetailProps) {
                   resourceId={resourceId}
                   resourceType={resourceType}
                   topicId={topicId}
-                  aiChatHistory={aiChatHistory}
-                  setAiChatHistory={setAiChatHistory}
+                  messages={messages}
+                  setMessages={setMessages}
+                  status={status}
+                  sendMessage={sendMessage}
                   hasUpgradeButtons={hasUpgradeButtons}
                   onUpgrade={() => setShowUpgradeModal(true)}
                   onLogin={() => {

src/components/TopicDetail/TopicDetailAI.tsx

@@ -1,3 +1,5 @@
+import '../ChatMessages/AIChat.css';
+
 import { useQuery } from '@tanstack/react-query';
 import {
   BotIcon,
@@ -9,14 +11,11 @@ import {
   Trash2,
   WandSparkles,
 } from 'lucide-react';
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
+import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useToast } from '../../hooks/use-toast';
-import { readStream } from '../../lib/ai';
 import { cn } from '../../lib/classname';
-import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
-import { markdownToHtmlWithHighlighting } from '../../lib/markdown';
+import { isLoggedIn } from '../../lib/jwt';
 import { getPercentage } from '../../lib/number';
 import { showLoginPopup } from '../../lib/popup';
 import type { ResourceType } from '../../lib/resource-progress';
@@ -24,14 +23,12 @@ import { aiLimitOptions } from '../../queries/ai-course';
 import { billingDetailsOptions } from '../../queries/billing';
 import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';
 import { queryClient } from '../../stores/query-client';
-import {
-  AIChatCard,
-  type AIChatHistoryType,
-} from '../GenerateCourse/AICourseLessonChat';
-import '../GenerateCourse/AICourseLessonChat.css';
 import { AILimitsPopup } from '../GenerateCourse/AILimitsPopup';
-import { PredefinedActions, promptLabelMapping } from './PredefinedActions';
-import { defaultChatHistory } from './TopicDetail';
+import { PredefinedActions } from './PredefinedActions';
+import type { ChatStatus, UIMessage } from 'ai';
+import type { UseChatHelpers } from '@ai-sdk/react';
+import { useAIChatScroll } from '../../hooks/use-ai-chat-scroll';
+import { TopicChatMessages } from '../ChatMessages/TopicChatMessages';
 
 type TopicDetailAIProps = {
   resourceId: string;
@@ -40,8 +37,10 @@ type TopicDetailAIProps = {
 
   hasUpgradeButtons?: boolean;
 
-  aiChatHistory: AIChatHistoryType[];
-  setAiChatHistory: (history: AIChatHistoryType[]) => void;
+  messages: UIMessage[];
+  sendMessage: UseChatHelpers<UIMessage>['sendMessage'];
+  setMessages: UseChatHelpers<UIMessage>['setMessages'];
+  status: ChatStatus;
 
   onUpgrade: () => void;
   onLogin: () => void;
@@ -51,8 +50,11 @@ type TopicDetailAIProps = {
 
 export function TopicDetailAI(props: TopicDetailAIProps) {
   const {
-    aiChatHistory,
-    setAiChatHistory,
+    messages,
+    sendMessage,
+    setMessages,
+    status,
+
     resourceId,
     resourceType,
     topicId,
@@ -63,7 +65,6 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
   } = props;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const scrollareaRef = useRef<HTMLDivElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
 
   const sanitizedTopicId = topicId?.includes('@')
@@ -72,8 +73,6 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
 
   const toast = useToast();
   const [message, setMessage] = useState('');
-  const [isStreamingMessage, setIsStreamingMessage] = useState(false);
-  const [streamedMessage, setStreamedMessage] = useState('');
   const [showAILimitsPopup, setShowAILimitsPopup] = useState(false);
   const { data: tokenUsage, isLoading } = useQuery(
     aiLimitOptions(),
@@ -105,7 +104,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
 
     if (
       !trimmedMessage ||
-      isStreamingMessage ||
+      status !== 'ready' ||
       !isLoggedIn() ||
       isLimitExceeded ||
       isLoading
@@ -113,110 +112,30 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
       return;
     }
 
-    const newMessages: AIChatHistoryType[] = [
-      ...aiChatHistory,
+    sendMessage(
       {
-        role: 'user',
-        content: trimmedMessage,
+        text: trimmedMessage,
       },
-    ];
+      {
+        body: {
+          resourceId,
+          resourceType,
+          topicId: sanitizedTopicId,
+        },
+      },
+    );
 
-    flushSync(() => {
-      setAiChatHistory(newMessages);
-      setMessage('');
-    });
-
-    scrollToBottom();
-    completeAITutorChat(newMessages);
+    setMessage('');
+    setTimeout(() => {
+      scrollToBottom();
+      textareaRef.current?.focus();
+    }, 0);
   };
 
-  const scrollToBottom = useCallback(() => {
-    scrollareaRef.current?.scrollTo({
-      top: scrollareaRef.current.scrollHeight,
-      behavior: 'smooth',
+  const { scrollToBottom, scrollableContainerRef, showScrollToBottomButton } =
+    useAIChatScroll({
+      messages,
     });
-  }, [scrollareaRef]);
-
-  const completeAITutorChat = async (messages: AIChatHistoryType[]) => {
-    try {
-      setIsStreamingMessage(true);
-
-      const response = await fetch(
-        `${import.meta.env.PUBLIC_API_URL}/v1-topic-detail-chat`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          credentials: 'include',
-          body: JSON.stringify({
-            resourceId,
-            resourceType,
-            topicId: sanitizedTopicId,
-            messages: messages.slice(-10),
-          }),
-        },
-      );
-
-      if (!response.ok) {
-        const data = await response.json();
-
-        toast.error(data?.message || 'Something went wrong');
-        setAiChatHistory([...messages].slice(0, messages.length - 1));
-        setIsStreamingMessage(false);
-
-        if (data.status === 401) {
-          removeAuthToken();
-          window.location.reload();
-        }
-
-        queryClient.invalidateQueries(aiLimitOptions());
-        return;
-      }
-
-      const reader = response.body?.getReader();
-
-      if (!reader) {
-        setIsStreamingMessage(false);
-        toast.error('Something went wrong');
-        return;
-      }
-
-      await readStream(reader, {
-        onStream: async (content) => {
-          flushSync(() => {
-            setStreamedMessage(content);
-          });
-
-          scrollToBottom();
-        },
-        onStreamEnd: async (content) => {
-          const newMessages: AIChatHistoryType[] = [
-            ...messages,
-            {
-              role: 'assistant',
-              content,
-              html: await markdownToHtmlWithHighlighting(content),
-            },
-          ];
-
-          flushSync(() => {
-            setStreamedMessage('');
-            setIsStreamingMessage(false);
-            setAiChatHistory(newMessages);
-          });
-
-          queryClient.invalidateQueries(aiLimitOptions());
-          scrollToBottom();
-        },
-      });
-
-      setIsStreamingMessage(false);
-    } catch (error) {
-      toast.error('Something went wrong');
-      setIsStreamingMessage(false);
-    }
-  };
 
   useEffect(() => {
     scrollToBottom();
@@ -228,7 +147,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
     tokenUsage?.used || 0,
     tokenUsage?.limit || 0,
   );
-  const hasChatHistory = aiChatHistory.length > 1;
+  const hasChatHistory = messages.length > 0;
   const nodeTextParts = roadmapTreeMapping?.text?.split('>') || [];
   const hasSubjects =
     (roadmapTreeMapping?.subjects &&
@@ -236,7 +155,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
     nodeTextParts.length > 1;
 
   return (
-    <div className="relative mt-4 flex grow flex-col overflow-hidden rounded-lg border border-gray-200">
+    <div className="ai-chat relative mt-4 flex grow flex-col overflow-hidden rounded-lg border border-gray-200">
       {isDataLoading && (
         <div className="absolute inset-0 z-20 flex items-center justify-center gap-2 bg-white text-black">
           <Loader2Icon className="size-8 animate-spin stroke-3 text-gray-500" />
@@ -278,8 +197,8 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
                       return;
                     }
                   }}
-                  href={`/ai/course?term=${subject}&difficulty=beginner&src=topic`}
-                  className="flex items-center gap-1 gap-2 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black"
+                  href={`/ai/course/search?term=${subject}&difficulty=beginner&src=topic`}
+                  className="flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black"
                 >
                   {subject}
                 </a>
@@ -289,7 +208,20 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
             {roadmapTreeMapping?.subjects?.length === 0 && (
               <a
                 target="_blank"
-                href={`/ai/course?term=${roadmapTreeMapping?.text}&difficulty=beginner&src=topic`}
+                onClick={(e) => {
+                  if (!isLoggedIn()) {
+                    e.preventDefault();
+                    onLogin();
+                    return;
+                  }
+
+                  if (isLimitExceeded) {
+                    e.preventDefault();
+                    onUpgrade();
+                    return;
+                  }
+                }}
+                href={`/ai/course/search?term=${roadmapTreeMapping?.text}&difficulty=beginner&src=topic`}
                 className="flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black [&>svg:last-child]:hidden"
               >
                 {nodeTextParts.slice(-2).map((text, index) => {
@@ -349,7 +281,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
               <button
                 className="rounded-md bg-white px-2 py-2 text-xs font-medium text-black hover:bg-gray-200"
                 onClick={() => {
-                  setAiChatHistory(defaultChatHistory);
+                  setMessages([]);
                 }}
               >
                 <Trash2 className="size-3.5" />
@@ -416,39 +348,9 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
 
       <div
         className="scrollbar-thumb-gray-300 scrollbar-track-transparent scrollbar-thin relative grow overflow-y-auto"
-        ref={scrollareaRef}
+        ref={scrollableContainerRef}
       >
-        <div className="absolute inset-0 flex flex-col">
-          <div className="relative flex grow flex-col justify-end">
-            <div className="flex flex-col justify-end gap-2 px-3 py-2">
-              {aiChatHistory.map((chat, index) => {
-                let content = chat.content;
-
-                if (chat.role === 'user' && promptLabelMapping[chat.content]) {
-                  content = promptLabelMapping[chat.content];
-                }
-
-                return (
-                  <Fragment key={`chat-${index}`}>
-                    <AIChatCard
-                      role={chat.role}
-                      content={content}
-                      html={chat.html}
-                    />
-                  </Fragment>
-                );
-              })}
-
-              {isStreamingMessage && !streamedMessage && (
-                <AIChatCard role="assistant" content="Thinking..." />
-              )}
-
-              {streamedMessage && (
-                <AIChatCard role="assistant" content={streamedMessage} />
-              )}
-            </div>
-          </div>
-        </div>
+        <TopicChatMessages messages={messages} status={status} />
       </div>
 
       <form
@@ -517,7 +419,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
         />
         <button
           type="submit"
-          disabled={isStreamingMessage || isLimitExceeded}
+          disabled={status !== 'ready' || isLimitExceeded}
           className="flex aspect-square size-[41px] items-center justify-center text-zinc-500 hover:text-black disabled:cursor-not-allowed disabled:opacity-50"
         >
           <SendIcon className="size-4 stroke-[2.5]" />

src/data/changelogs/ai-agents-red-teaming-roadmaps.md

@@ -1,18 +0,0 @@
----
-title: 'AI Agents, Red Teaming Roadmaps and Community Courses'
-description: 'New roadmaps for AI Agents and Red Teaming plus access to community-generated AI courses'
-images:
-  'AI Agents': 'https://assets.roadmap.sh/guest/ai-agents-roadmap-min-poii3.png'
-  'Red Teaming': 'https://assets.roadmap.sh/guest/ai-red-teaming-omyvx.png'
-  'AI Community Courses': 'https://assets.roadmap.sh/guest/ai-community-courses.png'
-seo:
-  title: 'AI Agents, Red Teaming Roadmaps and Community Courses'
-  description: ''
-date: 2025-05-12
----
-
-We added new AI roadmaps for AI Agents and Red Teaming and made our AI Tutor better with courses created by the community.
-
-- We just released a new [AI Agents Roadmap](https://roadmap.sh/ai-agents) that covers how to build, design, and run smart autonomous systems.
-- There's also a new [Red Teaming Roadmap](https://roadmap.sh/ai-red-teaming) for people who want to learn about testing AI systems for weaknesses and security flaws.
-- Our [AI Tutor](https://roadmap.sh/ai) now lets you use courses made by other users. You can learn from their content or share your own learning plans.

src/data/changelogs/ai-engineer-roadmap.md

@@ -1,25 +0,0 @@
----
-title: 'AI Engineer Roadmap, Leaderboards, Editor AI, and more'
-description: 'New AI Engineer Roadmap, New Leaderboards, AI Integration in Editor, and more'
-images:
-  "AI Engineer Roadmap": "https://assets.roadmap.sh/guest/ai-engineer-roadmap.png"
-  "Refer Others": "https://assets.roadmap.sh/guest/invite-users.png"
-  "Editor AI Integration": "https://assets.roadmap.sh/guest/editor-ai-integration.png"
-  "Project Status": "https://assets.roadmap.sh/guest/project-status.png"
-  "Leaderboards": "https://assets.roadmap.sh/guest/new-leaderboards.png"
-seo:
-  title: 'AI Engineer Roadmap, Leaderboards, Editor AI, and more'
-  description: ''
-date: 2024-10-04
----
-
-We have a new AI Engineer roadmap, Contributor leaderboards, AI integration in the editor, and more.
-
-- [AI Engineer Roadmap](https://roadmap.sh/ai-engineer) is now live
-- You can now refer others to join roadmap.sh
-- AI integration [in the editor](https://draw.roadmap.sh) to help you create and edit roadmaps faster
-- New [Leaderboards](/leaderboard) for contributors and people who refer others
-- [Projects pages](/frontend/projects) now show the status of each project
-- Bug fixes and performance improvements
-
-ML Engineer roadmap and team dashboards are coming up next. Stay tuned!

src/data/changelogs/ai-quiz-summary-go-roadmap-videos.md

@@ -1,20 +0,0 @@
----
-title: 'AI Quiz Summaries, New Go Roadmap, and YouTube Videos'
-description: 'Personalized AI summaries for quizzes, completely redrawn Go roadmap, and new YouTube videos for AI features'
-images:
-  'AI Quiz Summary': 'https://assets.roadmap.sh/guest/quiz-summary-gnwel.png'
-  'New Go Roadmap': 'https://assets.roadmap.sh/guest/roadmapsh_golang-rqzoc.png'
-  'YouTube Videos': 'https://assets.roadmap.sh/guest/youtube-videos-4kygb.jpeg'
-  'Roadmap Editor': 'https://assets.roadmap.sh/guest/ai-inside-editor.png'
-seo:
-  title: 'AI Quiz Summaries, New Go Roadmap, and YouTube Videos'
-  description: ''
-date: 2025-07-23
----
-
-We've added new AI-powered features and improved our content to help you learn more effectively.
-
-- [AI quizzes](/ai/quiz) now provide personalized AI-generated summaries at the end, along with tailored course and guide suggestions to help you continue learning.
-- The [Go roadmap](/golang) has been completely redrawn with better quality and a more language-focused approach, replacing the previous version that was too web development oriented.
-- We now have [8 new YouTube videos](https://www.youtube.com/playlist?list=PLkZYeFmDuaN38LRfCSdAkzWVtTXMJt11A) covering all our AI features to help you make the most of them.
-- [Roadmap editor](/account/roadmaps) now allows you to generate a base roadmap from a prompt.

src/data/changelogs/ai-roadmaps-depth.md

@@ -1,22 +0,0 @@
----
-title: 'AI Roadmaps Improved, Schedule Learning Time'
-description: 'AI Roadmaps are now deeper and we have added a new feature to schedule learning time'
-images:
-  "AI Roadmaps Depth": "https://assets.roadmap.sh/guest/3-level-roadmaps-lotx1.png"
-  "Schedule Learning Time": "https://assets.roadmap.sh/guest/schedule-learning-time.png"
-  "Schedule Learning Time Modal": "https://assets.roadmap.sh/guest/schedule-learning-time-2.png"
-seo:
-  title: 'AI Roadmaps Improved, Schedule Learning Time'
-  description: ''
-date: 2024-11-18
----
-
-We have improved our AI roadmaps, added a way to schedule learning time, and made some site wide bug fixes and improvements. Here are the details:
-
-- [AI generated roadmaps](https://roadmap.sh/ai) are now 3 levels deep giving you more detailed information. We have also improved the quality of the generated roadmaps.
-- Schedule learning time on your calendar for any roadmap. Just click on the "Schedule Learning Time" button and select the time slot you want to block.
-- You can now dismiss the sticky roadmap progress indicator at the bottom of any roadmap. 
-- We have added some new Project Ideas to our [Frontend Roadmap](/frontend/projects).
-- Bug fixes and performance improvements
-
-We have a new Engineering Manager Roadmap coming this week. Stay tuned!

src/data/changelogs/ai-tutor-cpp-java-roadmaps.md

@@ -1,18 +0,0 @@
----
-title: 'AI Tutor, C++ and Java Roadmaps'
-description: 'We just launched our first paid SQL course'
-images:
-  'AI Tutor': 'https://assets.roadmap.sh/guest/ai-tutor-xwth3.png'
-  'Java Roadmap': 'https://assets.roadmap.sh/guest/new-java-roadmap-t7pkk.png'
-  'C++ Roadmap': 'https://assets.roadmap.sh/guest/new-cpp-roadmap.png'
-seo:
-  title: 'AI Tutor, C++ and Java Roadmaps'
-  description: ''
-date: 2025-04-03
----
-
-We have revised the C++ and Java roadmaps and introduced an AI tutor to help you learn anything.
-
-- We just launched an [AI Tutor](https://roadmap.sh/ai), just give it a topic, pick a difficulty level and it will generate a personalized study plan for you. There is a map view, quizzes an embedded chat to help you along the way.
-- [C++ roadmap](https://roadmap.sh/cpp) has been revised with improved content
-- We have also redrawn the [Java roadmap](https://roadmap.sh/java) from scratch, replacing the deprecated items, adding new content and improving the overall structure.