wip

package.json

@@ -119,6 +119,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwind-scrollbar": "^4.0.2",
     "tsx": "^4.19.4"
   }
 }

pnpm-lock.yaml

@@ -267,6 +267,9 @@ importers:
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
         version: 0.6.11(prettier-plugin-astro@0.14.1)(prettier@3.5.3)
+      tailwind-scrollbar:
+        specifier: ^4.0.2
+        version: 4.0.2(react@19.1.0)(tailwindcss@4.1.7)
       tsx:
         specifier: ^4.19.4
         version: 4.19.4
@@ -3496,6 +3499,11 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  prism-react-renderer@2.4.1:
+    resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
+    peerDependencies:
+      react: '>=16.0.0'
+
   prismjs@1.30.0:
     resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
@@ -3919,6 +3927,12 @@ packages:
   tailwind-merge@3.3.0:
     resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
 
+  tailwind-scrollbar@4.0.2:
+    resolution: {integrity: sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: 4.x
+
   tailwindcss@4.1.5:
     resolution: {integrity: sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA==}
 
@@ -7548,6 +7562,12 @@ snapshots:
 
   prettier@3.5.3: {}
 
+  prism-react-renderer@2.4.1(react@19.1.0):
+    dependencies:
+      '@types/prismjs': 1.26.5
+      clsx: 2.1.1
+      react: 19.1.0
+
   prismjs@1.30.0: {}
 
   prompts@2.4.2:
@@ -8144,6 +8164,13 @@ snapshots:
 
   tailwind-merge@3.3.0: {}
 
+  tailwind-scrollbar@4.0.2(react@19.1.0)(tailwindcss@4.1.7):
+    dependencies:
+      prism-react-renderer: 2.4.1(react@19.1.0)
+      tailwindcss: 4.1.7
+    transitivePeerDependencies:
+      - react
+
   tailwindcss@4.1.5: {}
 
   tailwindcss@4.1.7: {}

src/components/AIChat/AIChat.tsx

@@ -37,6 +37,7 @@ import { showLoginPopup } from '../../lib/popup';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 import { readChatStream } from '../../lib/chat';
 import { chatHistoryOptions } from '../../queries/chat-history';
+import { cn } from '../../lib/classname';
 
 export const aiChatRenderer: Record<string, MessagePartRenderer> = {
   'roadmap-recommendations': (options) => {
@@ -382,10 +383,15 @@ export function AIChat(props: AIChatProps) {
     scrollToBottom('instant');
   }, []);
 
+  const shouldShowUpgradeBanner = !isPaidUser && aiChatHistory.length > 0;
+
   return (
     <div className="ai-chat relative flex grow flex-col gap-2 bg-gray-100">
       <div
-        className="absolute inset-0 overflow-y-auto pb-55"
+        className={cn(
+          'scrollbar-none absolute inset-0 overflow-y-auto pb-55',
+          shouldShowUpgradeBanner ? 'pb-60' : 'pb-55',
+        )}
         ref={scrollableContainerRef}
       >
         <div className="relative mx-auto w-full max-w-3xl grow px-4">
@@ -433,6 +439,24 @@ export function AIChat(props: AIChatProps) {
         className="pointer-events-none absolute right-0 bottom-0 left-0 mx-auto w-full max-w-3xl px-4"
         ref={chatContainerRef}
       >
+        {shouldShowUpgradeBanner && (
+          <div className="mb-2 rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-800">
+            <div className="pointer-events-auto flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <LockIcon className="size-4" strokeWidth={2.5} />
+                <p>Upgrade to Pro to keep your conversations.</p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowUpgradeModal(true)}
+                className="shrink-0 cursor-pointer rounded-md bg-yellow-200 px-2 py-1 text-xs font-medium text-yellow-800 hover:bg-yellow-200"
+              >
+                Upgrade to Pro
+              </button>
+            </div>
+          </div>
+        )}
+
         <div className="mb-2 flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">
             <QuickActionButton

src/styles/global.css

@@ -2,6 +2,7 @@
 @import '@roadmapsh/editor/style.css';
 
 @config '../../tailwind.config.cjs';
+@plugin 'tailwind-scrollbar';
 
 @font-face {
   font-family: 'Balsamiq Sans';