diff options
| -rw-r--r-- | apps/web/app/(navigation)/chat/[id]/page.tsx | 2 | ||||
| -rw-r--r-- | apps/web/components/header.tsx | 8 | ||||
| -rw-r--r-- | apps/web/components/masonry-memory-list.tsx | 30 | ||||
| -rw-r--r-- | apps/web/components/views/chat/chat-messages.tsx | 2 |
4 files changed, 30 insertions, 12 deletions
diff --git a/apps/web/app/(navigation)/chat/[id]/page.tsx b/apps/web/app/(navigation)/chat/[id]/page.tsx index b3812998..da64a79d 100644 --- a/apps/web/app/(navigation)/chat/[id]/page.tsx +++ b/apps/web/app/(navigation)/chat/[id]/page.tsx @@ -20,7 +20,7 @@ export default function ChatPage() { return ( <div className="flex flex-col w-full"> <div className="flex flex-col h-[93vh]"> - <div className="flex-1 flex justify-center min-h-0 w-full px-4"> + <div className="flex-1 flex justify-center min-h-0 w-full md:px-4"> <div className="flex flex-col min-h-0 w-full max-w-4xl"> <ChatMessages /> </div> diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx index 44bb1f74..1448588e 100644 --- a/apps/web/components/header.tsx +++ b/apps/web/components/header.tsx @@ -124,9 +124,11 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) { rel="noopener noreferrer" > {getCurrentChat()?.title && pathname.includes("/chat") ? ( - <div className="flex items-center gap-4"> - <Logo className="h-6 block text-foreground" /> - <span className="truncate">{getCurrentChat()?.title}</span> + <div className="flex items-center gap-2 md:gap-4 min-w-0 max-w-[200px] md:max-w-md"> + <Logo className="h-6 block text-foreground flex-shrink-0" /> + <span className="truncate text-sm md:text-base"> + {getCurrentChat()?.title} + </span> </div> ) : ( <> diff --git a/apps/web/components/masonry-memory-list.tsx b/apps/web/components/masonry-memory-list.tsx index 0511a061..16cd65c9 100644 --- a/apps/web/components/masonry-memory-list.tsx +++ b/apps/web/components/masonry-memory-list.tsx @@ -214,14 +214,30 @@ export const MasonryMemoryList = ({ </div> </div> ) : isLoading ? ( - <div className="h-full flex items-center justify-center p-4"> - <div className="rounded-xl overflow-hidden"> - <div className="relative z-10 px-6 py-4"> - <div className="flex items-center gap-2"> - <Sparkles className="w-4 h-4 animate-spin text-blue-400" /> - <span>Loading memory list...</span> + <div className="h-full overflow-auto px-4 pt-4"> + <div + className={`grid gap-4 ${isMobile ? "grid-cols-1" : "grid-cols-2 md:grid-cols-3 lg:grid-cols-4"}`} + > + {Array.from({ length: 8 }, (_, i) => ({ + id: `skeleton-${Math.random()}-${i}`, + height: 100 + (i % 3), + })).map((item) => ( + <div + key={item.id} + className="rounded-xl border border-gray-200 dark:border-gray-800 p-4 animate-pulse" + style={{ height: `${item.height}px` }} + > + <div className="flex flex-col gap-3 h-full"> + <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-3/4" /> + <div className="h-3 bg-gray-200 dark:bg-gray-800 rounded w-full" /> + <div className="h-3 bg-gray-200 dark:bg-gray-800 rounded w-5/6" /> + <div className="mt-auto flex gap-2"> + <div className="h-6 w-16 bg-gray-200 dark:bg-gray-800 rounded-full" /> + <div className="h-6 w-16 bg-gray-200 dark:bg-gray-800 rounded-full" /> + </div> + </div> </div> - </div> + ))} </div> </div> ) : filteredDocuments.length === 0 && !isLoading ? ( diff --git a/apps/web/components/views/chat/chat-messages.tsx b/apps/web/components/views/chat/chat-messages.tsx index babaa9a2..05e8afdf 100644 --- a/apps/web/components/views/chat/chat-messages.tsx +++ b/apps/web/components/views/chat/chat-messages.tsx @@ -428,7 +428,7 @@ export function ChatMessages() { > <div className={cn( - "flex flex-col gap-2 max-w-4/5", + "flex flex-col gap-2 md:max-w-4/5", message.role === "user" ? "bg-accent/50 px-3 py-1.5 border border-border rounded-lg" : "", |