From 70f2c582f332aeaa696021568c3681bb17c5dde9 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 12 Jun 2025 16:53:24 +0100
Subject: [PATCH] UI design improvement for empty sidebar

---
 .astro/types.d.ts                             |  1 -
 src/components/AIChat/AIChat.tsx              | 18 -----------
 .../AIChatHistory/ListChatHistory.tsx         | 32 +++++++++++++++----
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index 03d7cc43f..f964fe0cf 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/src/components/AIChat/AIChat.tsx b/src/components/AIChat/AIChat.tsx
index 652206d56..669708207 100644
--- a/src/components/AIChat/AIChat.tsx
+++ b/src/components/AIChat/AIChat.tsx
@@ -433,24 +433,6 @@ 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>Your chat history is not saved.</p>
-              </div>
-              <button
-                type="button"
-                onClick={() => onUpgrade?.()}
-                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
diff --git a/src/components/AIChatHistory/ListChatHistory.tsx b/src/components/AIChatHistory/ListChatHistory.tsx
index f67cf50f5..706d5cea1 100644
--- a/src/components/AIChatHistory/ListChatHistory.tsx
+++ b/src/components/AIChatHistory/ListChatHistory.tsx
@@ -17,6 +17,7 @@ import { groupChatHistory } from '../../helper/grouping';
 import { SearchAIChatHistory } from './SearchAIChatHistory';
 import { ChatHistoryGroup } from './ChatHistoryGroup';
 import { isLoggedIn } from '../../lib/jwt';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
 
 type ListChatHistoryProps = {
   activeChatHistoryId?: string;
@@ -228,14 +229,33 @@ export function UpgradeToProMessage(props: UpgradeToProMessageProps) {
         {closeButton}
       </div>
 
-      <div className="flex grow flex-col items-center justify-center">
-        <LockIcon className="size-8 text-gray-400" />
-        <p className="mt-4 text-center text-sm text-balance text-gray-500">
-          Upgrade to Pro to keep your chat history.
-        </p>
+      <div className="flex grow flex-col items-center justify-center px-2">
+        <div className="flex flex-col items-center">
+          <div className="mb-3 rounded-full bg-yellow-100 p-3">
+            <LockIcon className="size-6 text-yellow-600" />
+          </div>
+          <h2 className="text-lg font-semibold text-gray-900">
+            Unlock History
+          </h2>
+          <p className="mt-2 text-center text-sm text-balance text-gray-600">
+            Save conversations and pick up right where you left off.
+          </p>
+        </div>
+
+        <div className="w-full space-y-2 my-5">
+          <div className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
+            <CheckIcon additionalClasses="size-4 text-green-500" />
+            <span className="text-sm text-gray-600">Unlimited history</span>
+          </div>
+          <div className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
+            <CheckIcon additionalClasses="size-4 text-green-500" />
+            <span className="text-sm text-gray-600">Search old chats</span>
+          </div>
+        </div>
+
         <button
           type="button"
-          className="mt-2 shrink-0 cursor-pointer rounded-md bg-yellow-300 px-3 py-1.5 text-sm font-medium text-black hover:bg-yellow-400"
+          className="w-full cursor-pointer rounded-lg bg-yellow-400 px-4 py-2 text-sm font-medium text-black hover:bg-yellow-500"
           onClick={() => {
             onUpgrade?.();
           }}