info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-26 08:59:01 +02:00
Code Issues Releases Wiki Activity

Refactor chat

Browse Source
This commit is contained in:
Kamran Ahmed
2025-05-23 12:35:47 +01:00
parent df5bdb5b9a
commit 62d364d25c
1 changed files with 78 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/RoadmapAIChat/RoadmapAIChat.tsx
View File

@@ -16,7 +16,7 @@ import {
Loader2Icon, Loader2Icon,
LockIcon, LockIcon,
PauseCircleIcon, PauseCircleIcon,
SendIcon SendIcon,
} from 'lucide-react'; } from 'lucide-react';
import { ChatEditor } from '../ChatEditor/ChatEditor'; import { ChatEditor } from '../ChatEditor/ChatEditor';
import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree'; import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';
@@ -394,90 +394,92 @@ export function RoadmapAIChat(props: RoadmapAIChatProps) {
)} )}
</div> </div>
<div className="relative flex items-start border-t border-gray-200 text-sm"> {!isLoading && (
<ChatEditor <div className="relative flex items-start border-t border-gray-200 text-sm">
editorRef={editorRef} <ChatEditor
roadmapId={roadmapId} editorRef={editorRef}
onSubmit={(content) => { roadmapId={roadmapId}
if ( onSubmit={(content) => {
isStreamingMessage || if (
abortControllerRef.current || isStreamingMessage ||
!isLoggedIn() || abortControllerRef.current ||
isDataLoading || !isLoggedIn() ||
isEmptyContent(content) isDataLoading ||
) { isEmptyContent(content)
return; ) {
} return;
}
handleChatSubmit(content); handleChatSubmit(content);
}} }}
/> />
{isLimitExceeded && isLoggedIn() && ( {isLimitExceeded && isLoggedIn() && (
<div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white"> <div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white">
<LockIcon <LockIcon
className="size-4 cursor-not-allowed" className="size-4 cursor-not-allowed"
strokeWidth={2.5} strokeWidth={2.5}
/> />
<p className="cursor-not-allowed"> <p className="cursor-not-allowed">
Limit reached for today Limit reached for today
{isPaidUser ? '. Please wait until tomorrow.' : ''} {isPaidUser ? '. Please wait until tomorrow.' : ''}
</p> </p>
{!isPaidUser && ( {!isPaidUser && (
<button
onClick={() => {
setShowUpgradeModal(true);
}}
className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
>
Upgrade for more
</button>
)}
</div>
)}
{!isLoggedIn() && (
<div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white">
<LockIcon
className="size-4 cursor-not-allowed"
strokeWidth={2.5}
/>
<p className="cursor-not-allowed">Please login to continue</p>
<button <button
onClick={() => { onClick={() => {
setShowUpgradeModal(true); showLoginPopup();
}} }}
className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300" className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
> >
Upgrade for more Login / Register
</button> </button>
)} </div>
</div>
)}
{!isLoggedIn() && (
<div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white">
<LockIcon
className="size-4 cursor-not-allowed"
strokeWidth={2.5}
/>
<p className="cursor-not-allowed">Please login to continue</p>
<button
onClick={() => {
showLoginPopup();
}}
className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
>
Login / Register
</button>
</div>
)}
<button
className="flex aspect-square size-[36px] items-center justify-center p-2 text-zinc-500 hover:text-black disabled:cursor-not-allowed disabled:opacity-50"
onClick={(e) => {
if (isStreamingMessage || abortControllerRef.current) {
handleAbort();
return;
}
const json = editorRef.current?.getJSON();
if (!json || isEmptyContent(json)) {
toast.error('Please enter a message');
return;
}
handleChatSubmit(json);
}}
>
{isStreamingMessage ? (
<PauseCircleIcon className="size-4 stroke-[2.5]" />
) : (
<SendIcon className="size-4 stroke-[2.5]" />
)} )}
</button>
</div> <button
className="flex aspect-square size-[36px] items-center justify-center p-2 text-zinc-500 hover:text-black disabled:cursor-not-allowed disabled:opacity-50"
onClick={(e) => {
if (isStreamingMessage || abortControllerRef.current) {
handleAbort();
return;
}
const json = editorRef.current?.getJSON();
if (!json || isEmptyContent(json)) {
toast.error('Please enter a message');
return;
}
handleChatSubmit(json);
}}
>
{isStreamingMessage ? (
<PauseCircleIcon className="size-4 stroke-[2.5]" />
) : (
<SendIcon className="size-4 stroke-[2.5]" />
)}
</button>
</div>
)}
</div> </div>
</div> </div>
); );