onDragStart(e, "top")}
- className="absolute top-0 left-4 right-0 h-1 z-10 cursor-row-resize"
- />
- {/* Top-left corner — expands both width and height */}
-
onDragStart(e, "corner")}
- className="absolute top-0 left-0 size-4 z-20 cursor-nw-resize"
- />
-
- );
-}
diff --git a/packages/views/chat/components/chat-session-history.tsx b/packages/views/chat/components/chat-session-history.tsx
deleted file mode 100644
index fe731785f..000000000
--- a/packages/views/chat/components/chat-session-history.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { ArrowLeft, MessageSquare, Bot } from "lucide-react";
-import { cn } from "@multica/ui/lib/utils";
-import { Button } from "@multica/ui/components/ui/button";
-import { Tooltip, TooltipTrigger, TooltipContent } from "@multica/ui/components/ui/tooltip";
-import { Avatar, AvatarFallback, AvatarImage } from "@multica/ui/components/ui/avatar";
-import { useWorkspaceId } from "@multica/core/hooks";
-import { agentListOptions } from "@multica/core/workspace/queries";
-import { allChatSessionsOptions } from "@multica/core/chat/queries";
-import { useChatStore } from "@multica/core/chat";
-import { createLogger } from "@multica/core/logger";
-import type { ChatSession, Agent } from "@multica/core/types";
-
-const logger = createLogger("chat.ui");
-
-export function ChatSessionHistory() {
- const wsId = useWorkspaceId();
- const setShowHistory = useChatStore((s) => s.setShowHistory);
- const setActiveSession = useChatStore((s) => s.setActiveSession);
- const activeSessionId = useChatStore((s) => s.activeSessionId);
-
- const { data: sessions = [] } = useQuery(allChatSessionsOptions(wsId));
- const { data: agents = [] } = useQuery(agentListOptions(wsId));
-
- const agentMap = new Map(agents.map((a) => [a.id, a]));
-
- const handleSelectSession = (session: ChatSession) => {
- logger.info("selectSession", {
- from: activeSessionId,
- to: session.id,
- agentId: session.agent_id,
- status: session.status,
- });
- // Changing activeSessionId flips the query keys for messages +
- // pending-task; no manual clear needed.
- setActiveSession(session.id);
- setShowHistory(false);
- };
-
- return (
-
- {/* Header */}
-
-
- setShowHistory(false)}
- />
- }
- >
-
-
- Back
-
-
Chat History
-
-
- {/* Session list */}
-
- {sessions.length === 0 ? (
-
-
- No chat sessions yet
-
- ) : (
-
- {sessions.map((session) => (
- handleSelectSession(session)}
- />
- ))}
-
- )}
-
-
- );
-}
-
-function SessionItem({
- session,
- agent,
- isActive,
- onSelect,
-}: {
- session: ChatSession;
- agent: Agent | null;
- isActive: boolean;
- onSelect: () => void;
-}) {
- const timeAgo = formatTimeAgo(session.updated_at);
-
- return (
-
- );
-}
-
-function formatTimeAgo(dateStr: string): string {
- const date = new Date(dateStr);
- const now = new Date();
- const diffMs = now.getTime() - date.getTime();
- const diffMins = Math.floor(diffMs / 60000);
- const diffHours = Math.floor(diffMs / 3600000);
- const diffDays = Math.floor(diffMs / 86400000);
-
- if (diffMins < 1) return "just now";
- if (diffMins < 60) return `${diffMins}m ago`;
- if (diffHours < 24) return `${diffHours}h ago`;
- if (diffDays < 7) return `${diffDays}d ago`;
- return date.toLocaleDateString();
-}
diff --git a/packages/views/chat/components/chat-window.tsx b/packages/views/chat/components/chat-window.tsx
deleted file mode 100644
index 81ba095a0..000000000
--- a/packages/views/chat/components/chat-window.tsx
+++ /dev/null
@@ -1,648 +0,0 @@
-"use client";
-
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Minus, Maximize2, Minimize2, ChevronDown, Bot, Plus, Check } from "lucide-react";
-import { Avatar, AvatarFallback, AvatarImage } from "@multica/ui/components/ui/avatar";
-import { Button } from "@multica/ui/components/ui/button";
-import { Tooltip, TooltipTrigger, TooltipContent } from "@multica/ui/components/ui/tooltip";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuGroup,
- DropdownMenuItem,
- DropdownMenuLabel,
- DropdownMenuSeparator,
- DropdownMenuTrigger,
-} from "@multica/ui/components/ui/dropdown-menu";
-import { useWorkspaceId } from "@multica/core/hooks";
-import { useAuthStore } from "@multica/core/auth";
-import { agentListOptions, memberListOptions } from "@multica/core/workspace/queries";
-import { canAssignAgent } from "@multica/views/issues/components";
-import { api } from "@multica/core/api";
-import {
- chatSessionsOptions,
- allChatSessionsOptions,
- chatMessagesOptions,
- pendingChatTaskOptions,
- chatKeys,
-} from "@multica/core/chat/queries";
-import { useCreateChatSession, useMarkChatSessionRead } from "@multica/core/chat/mutations";
-import { useChatStore } from "@multica/core/chat";
-import { ChatMessageList, ChatMessageSkeleton } from "./chat-message-list";
-import { ChatInput } from "./chat-input";
-import {
- ContextAnchorButton,
- ContextAnchorCard,
- buildAnchorMarkdown,
- useRouteAnchorCandidate,
-} from "./context-anchor";
-import { ChatResizeHandles } from "./chat-resize-handles";
-import { useChatResize } from "./use-chat-resize";
-import { createLogger } from "@multica/core/logger";
-import type { Agent, ChatMessage, ChatSession } from "@multica/core/types";
-
-const uiLogger = createLogger("chat.ui");
-const apiLogger = createLogger("chat.api");
-
-export function ChatWindow() {
- const wsId = useWorkspaceId();
- const isOpen = useChatStore((s) => s.isOpen);
- const activeSessionId = useChatStore((s) => s.activeSessionId);
- const selectedAgentId = useChatStore((s) => s.selectedAgentId);
- const setOpen = useChatStore((s) => s.setOpen);
- const setActiveSession = useChatStore((s) => s.setActiveSession);
- const setSelectedAgentId = useChatStore((s) => s.setSelectedAgentId);
- const user = useAuthStore((s) => s.user);
- const { data: agents = [] } = useQuery(agentListOptions(wsId));
- const { data: members = [] } = useQuery(memberListOptions(wsId));
- const { data: sessions = [] } = useQuery(chatSessionsOptions(wsId));
- const { data: allSessions = [] } = useQuery(allChatSessionsOptions(wsId));
- 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
- // (chat:message / chat:done / task:*) keep it invalidated in real time.
- //
- // This is the SOLE source for pendingTaskId — no mirror in the store.
- const { data: pendingTask } = useQuery(
- pendingChatTaskOptions(activeSessionId ?? ""),
- );
- const pendingTaskId = pendingTask?.task_id ?? null;
-
- // Check if current session is archived
- const currentSession = activeSessionId
- ? allSessions.find((s) => s.id === activeSessionId)
- : null;
- const isSessionArchived = currentSession?.status === "archived";
-
- const qc = useQueryClient();
- const createSession = useCreateChatSession();
- const markRead = useMarkChatSessionRead();
-
- const currentMember = members.find((m) => m.user_id === user?.id);
- const memberRole = currentMember?.role;
- const availableAgents = agents.filter(
- (a) => !a.archived_at && canAssignAgent(a, user?.id, memberRole),
- );
-
- // Resolve selected agent: stored preference → first available
- const activeAgent =
- availableAgents.find((a) => a.id === selectedAgentId) ??
- availableAgents[0] ??
- null;
-
- // Mount / unmount logging. ChatWindow lives in DashboardLayout, so this
- // fires on layout mount (login / workspace switch / fresh page load).
- useEffect(() => {
- uiLogger.info("ChatWindow mount", {
- isOpen,
- activeSessionId,
- pendingTaskId,
- selectedAgentId,
- wsId,
- });
- return () => {
- uiLogger.info("ChatWindow unmount", {
- activeSessionId,
- pendingTaskId,
- });
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps -- once per mount
- }, []);
-
- // Auto-restore most recent active session from server (only once on mount)
- const didRestoreRef = useRef(false);
- useEffect(() => {
- if (didRestoreRef.current) return;
- didRestoreRef.current = true;
- if (activeSessionId || sessions.length === 0) {
- uiLogger.debug("restore session skipped", {
- reason: activeSessionId ? "already has session" : "no sessions",
- activeSessionId,
- sessionCount: sessions.length,
- });
- return;
- }
- const latest = sessions.find((s) => s.status === "active");
- if (latest) {
- uiLogger.info("restore session on mount", { sessionId: latest.id });
- setActiveSession(latest.id);
- } else {
- uiLogger.debug("restore session: no active session found");
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps -- run once when sessions load
- }, [sessions]);
-
- // WS events are handled globally in useRealtimeSync — the query cache
- // stays current even when this window is closed. See packages/core/realtime/.
-
- // Auto mark-as-read whenever the user is looking at a session with unread
- // state: window open + a session active + has_unread → PATCH.
- // has_unread comes from the list query; WS handlers invalidate it on
- // chat:done so a reply arriving while the user watches triggers this
- // effect again and is instantly cleared.
- const currentHasUnread =
- sessions.find((s) => s.id === activeSessionId)?.has_unread ?? false;
- useEffect(() => {
- if (!isOpen || !activeSessionId) return;
- if (!currentHasUnread) return;
- uiLogger.info("auto markRead", { sessionId: activeSessionId });
- markRead.mutate(activeSessionId);
- // eslint-disable-next-line react-hooks/exhaustive-deps -- markRead ref stable
- }, [isOpen, activeSessionId, currentHasUnread]);
-
- // Focus-mode anchor: derived from route each render. Prepended to the
- // outgoing message when focus is on; the anchor persists across sends
- // (focus mode tracks the user's page, not a per-message attachment).
- const { candidate: anchorCandidate } = useRouteAnchorCandidate(wsId);
-
- const handleSend = useCallback(
- async (content: string) => {
- if (!activeAgent) {
- apiLogger.warn("sendChatMessage skipped: no active agent");
- return;
- }
-
- const focusOn = useChatStore.getState().focusMode;
- const finalContent = focusOn && anchorCandidate
- ? `${buildAnchorMarkdown(anchorCandidate)}\n\n${content}`
- : content;
-
- let sessionId = activeSessionId;
- const isNewSession = !sessionId;
-
- apiLogger.info("sendChatMessage.start", {
- sessionId,
- isNewSession,
- agentId: activeAgent.id,
- contentLength: finalContent.length,
- hasAnchor: focusOn && !!anchorCandidate,
- });
-
- if (!sessionId) {
- const session = await createSession.mutateAsync({
- agent_id: activeAgent.id,
- title: finalContent.slice(0, 50),
- });
- sessionId = session.id;
- setActiveSession(sessionId);
- }
-
- // Optimistic: show user message immediately.
- const optimistic: ChatMessage = {
- id: `optimistic-${Date.now()}`,
- chat_session_id: sessionId,
- role: "user",
- content: finalContent,
- task_id: null,
- created_at: new Date().toISOString(),
- };
- qc.setQueryData
(
- chatKeys.messages(sessionId),
- (old) => (old ? [...old, optimistic] : [optimistic]),
- );
- apiLogger.debug("sendChatMessage.optimistic", { sessionId, optimisticId: optimistic.id });
-
- const result = await api.sendChatMessage(sessionId, finalContent);
- apiLogger.info("sendChatMessage.success", {
- sessionId,
- messageId: result.message_id,
- taskId: result.task_id,
- });
- // Seed pending-task optimistically so the spinner shows instantly —
- // the WS chat:message handler will invalidate + refetch to confirm.
- qc.setQueryData(chatKeys.pendingTask(sessionId), {
- task_id: result.task_id,
- status: "queued",
- });
- qc.invalidateQueries({ queryKey: chatKeys.messages(sessionId) });
- },
- [
- activeSessionId,
- activeAgent,
- anchorCandidate,
- createSession,
- setActiveSession,
- qc,
- ],
- );
-
- const handleStop = useCallback(async () => {
- if (!pendingTaskId) {
- apiLogger.debug("cancelTask skipped: no pending task");
- return;
- }
- apiLogger.info("cancelTask.start", { taskId: pendingTaskId, sessionId: activeSessionId });
- try {
- await api.cancelTaskById(pendingTaskId);
- apiLogger.info("cancelTask.success", { taskId: pendingTaskId });
- } catch (err) {
- // Task may already be completed
- apiLogger.warn("cancelTask.error (task may have already finished)", { taskId: pendingTaskId, err });
- }
- if (activeSessionId) {
- // Clear pending immediately; WS task:cancelled will confirm.
- qc.setQueryData(chatKeys.pendingTask(activeSessionId), {});
- qc.invalidateQueries({ queryKey: chatKeys.messages(activeSessionId) });
- }
- }, [pendingTaskId, activeSessionId, qc]);
-
- const handleSelectAgent = useCallback(
- (agent: Agent) => {
- // No-op when clicking the already-active agent — don't clobber the
- // current session just because the user closed the menu this way.
- // Compare against activeAgent (what the UI shows), not selectedAgentId
- // (which may be null / point to an archived agent on first load).
- if (activeAgent && agent.id === activeAgent.id) return;
- uiLogger.info("selectAgent", {
- from: selectedAgentId,
- to: agent.id,
- previousSessionId: activeSessionId,
- });
- setSelectedAgentId(agent.id);
- // Reset session when switching agent
- setActiveSession(null);
- },
- [activeAgent, selectedAgentId, activeSessionId, setSelectedAgentId, setActiveSession],
- );
-
- const handleNewChat = useCallback(() => {
- uiLogger.info("newChat", {
- previousSessionId: activeSessionId,
- previousPendingTask: pendingTaskId,
- });
- setActiveSession(null);
- }, [activeSessionId, pendingTaskId, setActiveSession]);
-
- const handleSelectSession = useCallback(
- (session: ChatSession) => {
- // Sessions are bound 1:1 to an agent — picking a session from a
- // different agent implicitly switches the agent too.
- if (activeAgent && session.agent_id !== activeAgent.id) {
- uiLogger.info("selectSession (cross-agent)", {
- from: activeAgent.id,
- toAgent: session.agent_id,
- toSession: session.id,
- });
- setSelectedAgentId(session.agent_id);
- }
- setActiveSession(session.id);
- },
- [activeAgent, setSelectedAgentId, setActiveSession],
- );
-
- const handleMinimize = useCallback(() => {
- uiLogger.info("minimize (close)", {
- activeSessionId,
- pendingTaskId,
- });
- setOpen(false);
- }, [activeSessionId, pendingTaskId, setOpen]);
-
- const windowRef = useRef(null);
- const { renderWidth, renderHeight, isAtMax, boundsReady, isDragging, toggleExpand, startDrag } = useChatResize(windowRef);
-
- // Show the list (vs empty state) as soon as there's anything to display —
- // a real message, or a pending task whose timeline will stream in.
- const hasMessages = messages.length > 0 || !!pendingTaskId;
-
- const isVisible = isOpen && boundsReady;
-
- const containerClass = "absolute bottom-2 right-2 z-50 flex flex-col rounded-xl ring-1 ring-foreground/10 bg-sidebar shadow-2xl overflow-hidden";
- const containerStyle: React.CSSProperties = {
- width: `${renderWidth}px`,
- height: `${renderHeight}px`,
- opacity: isVisible ? 1 : 0,
- transform: isVisible ? "scale(1)" : "scale(0.95)",
- transformOrigin: "bottom right",
- pointerEvents: isOpen ? "auto" : "none",
- transition: isDragging
- ? "none"
- : "width 200ms ease-out, height 200ms ease-out, opacity 150ms ease-out, transform 150ms ease-out",
- };
-
- return (
-
-
- {/* Header — ⊕ new + session dropdown | window tools */}
-
-
-
-
- }
- >
-
-
- New chat
-
-
-
-
-
-
- }
- >
- {isAtMax ? : }
-
-
- {isAtMax ? "Restore" : "Expand"}
-
-
-
-
- }
- >
-
-
- Minimize
-
-
-
-
- {/* Messages / skeleton / empty state */}
- {showSkeleton ? (
-
- ) : hasMessages ? (
-
- ) : (
-
handleSend(text)}
- />
- )}
-
- {/* Input — disabled for archived sessions */}
- }
- leftAdornment={
-
- }
- rightAdornment={}
- />
-
- No previous chats
-
- ) : (
- sessions.map((session) => {
- const isCurrent = session.id === activeSessionId;
- const agent = agentById.get(session.agent_id) ?? null;
- return (
- onSelectSession(session)}
- className="flex min-w-0 items-center gap-2"
- >
- {agent ? (
-
- ) : (
-
- )}
-
- {session.title?.trim() || "New chat"}
-
- {session.has_unread && (
-
- )}
- {isCurrent && }
-
- );
- })
- )}
-
-
- );
-}
-
-function AgentAvatarSmall({ agent }: { agent: Agent }) {
- return (
-
- {agent.avatar_url && }
-
-
-
-
- );
-}
-
-/**
- * Three starter prompts shown on the empty state. Tapping one sends it
- * immediately — ChatGPT-style — because the point is showing users what
- * this chat is for: operating on the workspace, not open-ended Q&A.
- */
-const STARTER_PROMPTS: { icon: string; text: string }[] = [
- { icon: "📋", text: "List my open tasks by priority" },
- { icon: "📝", text: "Summarize what I did today" },
- { icon: "💡", text: "Plan what to work on next" },
-];
-
-function EmptyState({
- agentName,
- onPickPrompt,
-}: {
- agentName?: string;
- onPickPrompt: (text: string) => void;
-}) {
- return (
-
-
-
- {agentName ? `Hi, I'm ${agentName}` : "Welcome to Multica"}
-
-
Try asking
-
-
- {STARTER_PROMPTS.map((prompt) => (
-
- ))}
-
-