highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-08-03 11:10:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #995 from multica-ai/feat/chat-skeleton

Browse Source 
feat(chat): skeleton while switching to an un-cached session
This commit is contained in:
Naiyuan Qing
2026-04-14 19:16:48 +08:00
committed by GitHub
parent 34e452776b d3f7570177
commit 76ba9cfb0b
2 changed files with 37 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/views/chat/components/chat-message-list.tsx
View File

@@ -75,6 +75,33 @@ export function ChatMessageList({
);
}
/**
* Placeholder shown while `chat_message` for a session is being fetched
* (initial refresh, or switching to an un-cached session). Shape roughly
* mirrors an assistant → user → assistant exchange so the window doesn't
* shift under the user when real messages arrive.
*/
export function ChatMessageSkeleton() {
return (
<div className="flex-1 overflow-hidden">
<div className="mx-auto w-full max-w-4xl px-5 py-4 space-y-5">
<div className="space-y-2">
<div className="h-3.5 w-3/4 rounded bg-muted animate-pulse" />
<div className="h-3.5 w-1/2 rounded bg-muted animate-pulse" />
</div>
<div className="flex justify-end">
<div className="h-8 w-48 rounded-2xl bg-muted animate-pulse" />
</div>
<div className="space-y-2">
<div className="h-3.5 w-2/3 rounded bg-muted animate-pulse" />
<div className="h-3.5 w-5/6 rounded bg-muted animate-pulse" />
<div className="h-3.5 w-1/3 rounded bg-muted animate-pulse" />
</div>
</div>
</div>
);
}
function toTimelineItem(m: TaskMessagePayload): ChatTimelineItem {
return {
seq: m.seq,

14
packages/views/chat/components/chat-window.tsx
View File

@@ -29,7 +29,7 @@ import {
} from "@multica/core/chat/queries";
import { useCreateChatSession, useMarkChatSessionRead } from "@multica/core/chat/mutations";
import { useChatStore } from "@multica/core/chat";
import { ChatMessageList } from "./chat-message-list";
import { ChatMessageList, ChatMessageSkeleton } from "./chat-message-list";
import { ChatInput } from "./chat-input";
import { ChatResizeHandles } from "./chat-resize-handles";
import { useChatResize } from "./use-chat-resize";
@@ -52,11 +52,15 @@ export function ChatWindow() {
const { data: members = [] } = useQuery(memberListOptions(wsId));
const { data: sessions = [] } = useQuery(chatSessionsOptions(wsId));
const { data: allSessions = [] } = useQuery(allChatSessionsOptions(wsId));
const { data: rawMessages } = useQuery(
const { data: rawMessages, isLoading: messagesLoading } = useQuery(
chatMessagesOptions(activeSessionId ?? ""),
);
// When no active session, always show empty — don't use stale cache
const messages = activeSessionId ? rawMessages ?? [] : [];
// Skeleton only shows for an un-cached session fetch. Cached switches
// return data synchronously — no flash. `enabled: false` (new chat)
// keeps isLoading false so the starter prompts aren't hidden.
const showSkeleton = !!activeSessionId && messagesLoading;
// Server-authoritative pending task. Survives refresh / reopen / session
// switch because it's keyed on sessionId in the Query cache; WS events
@@ -374,8 +378,10 @@ export function ChatWindow() {
</div>
</div>
{/* Messages or Empty State */}
{hasMessages ? (
{/* Messages / skeleton / empty state */}
{showSkeleton ? (
<ChatMessageSkeleton />
) : hasMessages ? (
<ChatMessageList
messages={messages}
pendingTaskId={pendingTaskId}