info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 06:12:53 +02:00
Code Issues Releases Wiki Activity

UI design improvement for empty sidebar

Browse Source
This commit is contained in:
Kamran Ahmed
2025-06-12 16:53:24 +01:00
parent ba838dc7d5
commit 70f2c582f3
3 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.astro/types.d.ts vendored
View File

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

18
src/components/AIChat/AIChat.tsx
View File

@@ -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

30
src/components/AIChatHistory/ListChatHistory.tsx
View File

@@ -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.
<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?.();
}}