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

Height fixes

Browse Source
This commit is contained in:
Kamran Ahmed
2025-06-10 16:31:00 +01:00
parent 97b7f54c6f
commit a48b8c6acf
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/FrameRenderer/RoadmapFloatingChat.tsx
View File

@@ -1,13 +1,13 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import type { JSONContent } from '@tiptap/core'; import type { JSONContent } from '@tiptap/core';
import { import {
AppWindow,
BookOpen, BookOpen,
ChevronDown, ChevronDown,
MessageCirclePlus, MessageCirclePlus,
PauseCircleIcon, PauseCircleIcon,
PersonStanding, PersonStanding,
SendIcon, SendIcon,
SquareArrowOutUpRight,
Trash2, Trash2,
Wand2, Wand2,
X, X,
@@ -120,7 +120,7 @@ function UsageButton(props: UsageButtonProps) {
return ( return (
<button <button
onClick={onUpgradeClick} onClick={onUpgradeClick}
className="ml-2 flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-all hover:bg-yellow-200" className="flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-all hover:bg-yellow-200"
> >
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<div className="h-1.5 w-6 overflow-hidden rounded-full bg-gray-200"> <div className="h-1.5 w-6 overflow-hidden rounded-full bg-gray-200">
@@ -303,38 +303,30 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
<div <div
className={cn( className={cn(
'animate-fade-slide-up fixed bottom-5 left-1/2 z-91 max-h-[95vh] max-w-[968px] -translate-x-1/4 transform flex-col gap-1.5 overflow-hidden px-4 transition-all duration-300 sm:max-h-[55vh] lg:flex', 'animate-fade-slide-up fixed bottom-5 left-1/2 z-91 max-h-[95vh] max-w-[968px] -translate-x-1/4 transform flex-col gap-1.5 overflow-hidden px-4 transition-all duration-300 sm:max-h-[50vh] lg:flex',
isOpen ? 'w-full' : 'w-auto', isOpen ? 'h-full w-full' : 'w-auto',
)} )}
> >
{isOpen && ( {isOpen && (
<> <>
<div className="flex h-full max-h-[95vh] w-full flex-col overflow-hidden rounded-lg bg-white shadow-lg sm:max-h-[55vh]"> <div className="flex h-full w-full flex-col overflow-hidden rounded-lg bg-white shadow-lg">
{/* Messages area */} {/* Messages area */}
<div className="flex items-center justify-between px-3 py-2"> <div className="flex items-center justify-between px-3 py-2">
<div className="flex"> <div className="flex">
<ChatHeaderButton <ChatHeaderButton
icon={<BookOpen className="h-3.5 w-3.5" />} icon={<BookOpen className="h-3.5 w-3.5" />}
className="mr-2 hidden text-sm sm:flex" className="text-sm"
> >
AI Tutor AI Tutor
</ChatHeaderButton> </ChatHeaderButton>
{!isPaidUser && (
<UsageButton
percentageUsed={percentageUsed}
onUpgradeClick={() => {
window.open('/premium', '_blank');
}}
/>
)}
</div> </div>
<div className="flex items-center gap-2"> <div className="flex gap-1.5">
<ChatHeaderButton <ChatHeaderButton
href={`/${roadmapId}/ai`} href={`/${roadmapId}/ai`}
target="_blank" target="_blank"
icon={<AppWindow className="h-3.5 w-3.5" />} icon={<SquareArrowOutUpRight className="h-3.5 w-3.5" />}
className="hidden rounded-md bg-gray-200 py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300 sm:flex" className="hidden rounded-md py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300 sm:flex"
> >
Open in new tab Open in new tab
</ChatHeaderButton> </ChatHeaderButton>
@@ -429,16 +421,26 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
)} )}
{!isLimitExceeded && ( {!isLimitExceeded && (
<> <>
<div className="flex flex-row gap-2 border-t border-gray-200 px-3 pt-2"> <div className="flex flex-row justify-between border-t border-gray-200 px-3 pt-2">
<ChatHeaderButton <div className="flex gap-2">
onClick={() => { <ChatHeaderButton
setIsPersonalizeOpen(true); onClick={() => {
}} setIsPersonalizeOpen(true);
icon={<PersonStanding className="h-3.5 w-3.5" />} }}
className="rounded-md bg-gray-200 py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300" icon={<PersonStanding className="h-3.5 w-3.5" />}
> className="rounded-md bg-gray-200 py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300"
Personalize >
</ChatHeaderButton> Personalize
</ChatHeaderButton>
{!isPaidUser && (
<UsageButton
percentageUsed={percentageUsed}
onUpgradeClick={() => {
window.open('/premium', '_blank');
}}
/>
)}
</div>
{hasMessages && ( {hasMessages && (
<ChatHeaderButton <ChatHeaderButton
onClick={() => { onClick={() => {