@nextclaw/ui 0.13.13 → 0.14.0

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -1,380 +1,14 @@
-import { useMemo, useRef } from "react";
-import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
-import { ChatInputBarContainer } from "@/features/chat/components/conversation/chat-input-bar.container";
-import { ChatMessageListContainer } from "@/features/chat/components/conversation/chat-message-list.container";
-import {
-  ChatConversationHeader,
-  ChatParentSessionBanner,
-} from "@/features/chat/components/conversation/chat-conversation-header";
-import { ChatWelcome } from "@/features/chat/components/chat-welcome";
-import { ChatSessionWorkspacePanel } from "@/features/chat/components/chat-session-workspace-panel";
-import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
-import { resolveAgentRuntimeSessionType } from "@/features/chat/hooks/use-chat-session-type-state";
-import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
-import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
-import { useCronJobs } from "@/shared/hooks/use-config";
-import { isCronJobForSession } from "@/shared/lib/cron";
-import { Skeleton } from "@/shared/components/ui/skeleton";
-import { t } from "@/shared/lib/i18n";
-import { cn } from "@/shared/lib/utils";
+import { ChatInputBarContainer } from "@/features/chat/features/input/components/chat-input-bar.container";
+import { ChatConversationAlerts } from "@/features/chat/components/conversation/chat-conversation-alerts";
+import { ChatConversationContent } from "@/features/chat/components/conversation/chat-conversation-content";
+import { ChatConversationHeaderSection } from "@/features/chat/components/conversation/chat-conversation-header-section";
+import { ChatConversationParentBanner } from "@/features/chat/components/conversation/chat-conversation-parent-banner";
+import { ChatConversationSkeleton } from "@/features/chat/components/conversation/chat-conversation-skeleton";
+import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
+import { useNcpChatProviderStateResolved } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 
-const CHAT_CONVERSATION_SKELETON_BUBBLES = [
-  {
-    key: "hero",
-    alignmentClassName: "justify-start",
-    bubbleClassName: "max-w-[78%] h-32 rounded-[30px]",
-  },
-  {
-    key: "follow-up",
-    alignmentClassName: "justify-start",
-    bubbleClassName: "max-w-[62%] h-24 rounded-[28px]",
-  },
-  {
-    key: "reply",
-    alignmentClassName: "justify-end",
-    bubbleClassName: "max-w-[70%] h-24 rounded-[28px]",
-  },
-  {
-    key: "detail",
-    alignmentClassName: "justify-start",
-    bubbleClassName: "max-w-[88%] h-36 rounded-[30px]",
-  },
-] as const;
-
-function ChatConversationSkeleton() {
-  return (
-    <section
-      data-testid="chat-conversation-skeleton"
-      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white"
-    >
-      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
-        <div className="mx-auto flex min-h-full w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
-          <div className="flex flex-1 flex-col gap-8">
-            <div className="space-y-6">
-              <Skeleton className="h-6 w-52 rounded-lg bg-gray-200/90" />
-              <div className="space-y-5">
-                {CHAT_CONVERSATION_SKELETON_BUBBLES.map((bubble) => (
-                  <div
-                    key={bubble.key}
-                    className={cn("flex w-full", bubble.alignmentClassName)}
-                  >
-                    <Skeleton
-                      data-testid="chat-conversation-skeleton-bubble"
-                      className={cn(
-                        "w-full bg-gray-200/80",
-                        bubble.bubbleClassName,
-                      )}
-                    />
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="mt-auto grid gap-4 pb-2 sm:grid-cols-[minmax(0,1fr)_minmax(180px,240px)] sm:items-end">
-              <div className="space-y-3">
-                <Skeleton className="h-4 w-40 rounded-full bg-gray-200/70" />
-                <Skeleton className="h-[112px] w-full rounded-[30px] bg-gray-200/70" />
-              </div>
-              <div className="hidden justify-end sm:flex">
-                <Skeleton className="h-10 w-36 rounded-full bg-gray-200/75" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="border-t border-gray-200/80 bg-white p-4">
-        <div className="mx-auto w-full max-w-[min(1120px,100%)]">
-          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card">
-            <div className="px-4 py-2.5">
-              <Skeleton className="h-[84px] w-full rounded-[28px] bg-gray-200/80" />
-            </div>
-            <div className="flex items-center justify-between gap-3 px-3 pb-3">
-              <div className="flex items-center gap-2">
-                <Skeleton className="h-8 w-20 rounded-full bg-gray-200/75" />
-                <Skeleton className="h-8 w-28 rounded-full bg-gray-200/75" />
-                <Skeleton className="hidden h-8 w-24 rounded-full bg-gray-200/70 sm:block" />
-              </div>
-              <Skeleton className="h-8 w-8 rounded-full bg-gray-200/85" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-type ChatThreadSnapshot = ReturnType<
-  typeof useChatThreadStore.getState
->["snapshot"];
 type ChatConversationLayoutMode = "desktop" | "mobile";
 
-function ChatConversationAlerts() {
-  const presenter = usePresenter();
-  const snapshot = useChatThreadStore((state) => state.snapshot);
-  const shouldShowProviderHint =
-    snapshot.isProviderStateResolved && snapshot.modelOptions.length === 0;
-
-  return (
-    <>
-      {shouldShowProviderHint ? (
-        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0 sm:px-5">
-          <span className="text-xs text-amber-800">
-            {t("chatModelNoOptions")}
-          </span>
-          <button
-            type="button"
-            onClick={presenter.chatThreadManager.goToProviders}
-            className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
-          >
-            {t("chatGoConfigureProvider")}
-          </button>
-        </div>
-      ) : null}
-      {snapshot.sessionTypeUnavailable &&
-      snapshot.sessionTypeUnavailableMessage?.trim() ? (
-        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0 sm:px-5">
-          <span className="text-xs text-amber-800">
-            {snapshot.sessionTypeUnavailableMessage}
-          </span>
-        </div>
-      ) : null}
-    </>
-  );
-}
-
-function ChatConversationContent() {
-  const presenter = usePresenter();
-  const defaultSessionType = useChatInputStore(
-    (state) => state.snapshot.defaultSessionType,
-  );
-  const snapshot = useChatThreadStore((state) => state.snapshot);
-  const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
-  const threadRef = snapshot.threadRef ?? fallbackThreadRef;
-  const availableAgents = snapshot.availableAgents ?? [];
-  const showWelcome =
-    !snapshot.canDeleteSession &&
-    !snapshot.hasSubmittedDraftMessage &&
-    snapshot.messages.length === 0 &&
-    !snapshot.isSending;
-  const hideEmptyHint =
-    snapshot.isHistoryLoading &&
-    snapshot.messages.length === 0 &&
-    !snapshot.isSending &&
-    !snapshot.isAwaitingAssistantOutput;
-  const resolveDraftAgent = (agentId: string) =>
-    availableAgents.find((agent) => agent.id === agentId) ?? null;
-  const createDraftSessionForAgent = () => {
-    const sessionType = resolveAgentRuntimeSessionType(
-      resolveDraftAgent(snapshot.agentId ?? "main"),
-      defaultSessionType,
-    );
-    presenter.chatSessionListManager.createSession(sessionType);
-  };
-  const selectDraftAgent = (agentId: string) => {
-    presenter.chatSessionListManager.setSelectedAgentId(agentId);
-    presenter.chatInputManager.setPendingSessionType(
-      resolveAgentRuntimeSessionType(
-        resolveDraftAgent(agentId),
-        defaultSessionType,
-      ),
-    );
-  };
-  const { onScroll } = useStickyBottomScroll({
-    scrollRef: threadRef,
-    resetKey: snapshot.sessionKey,
-    isLoading: snapshot.isHistoryLoading,
-    hasContent: snapshot.messages.length > 0,
-    contentVersion: snapshot.messages[snapshot.messages.length - 1] ?? null,
-  });
-  const hasMessages = snapshot.messages.length > 0;
-  const isAwaitingAssistantOutput =
-    hasMessages && snapshot.isSending && snapshot.isAwaitingAssistantOutput;
-  const shouldShowMessages = hasMessages;
-
-  return (
-    <div
-      ref={threadRef}
-      onScroll={onScroll}
-      data-chat-scroll-container="true"
-      className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
-    >
-      {showWelcome ? (
-        <ChatWelcome
-          onCreateSession={createDraftSessionForAgent}
-          agents={availableAgents}
-          selectedAgentId={snapshot.agentId ?? "main"}
-          onSelectAgent={selectDraftAgent}
-        />
-      ) : hideEmptyHint || !shouldShowMessages ? null : (
-        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
-          <ChatMessageListContainer
-            messages={snapshot.messages}
-            isSending={isAwaitingAssistantOutput}
-            onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
-            onFileOpen={presenter.chatThreadManager.openFilePreview}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function shouldShowWorkspacePanel(
-  snapshot: ChatThreadSnapshot,
-  childSessionTabs: ChatThreadSnapshot["childSessionTabs"],
-  workspaceFileTabs: ChatThreadSnapshot["workspaceFileTabs"],
-  sessionCronJobCount: number,
-) {
-  if (snapshot.workspacePanelParentKey !== snapshot.sessionKey) {
-    return false;
-  }
-  return (
-    childSessionTabs.length > 0 ||
-    workspaceFileTabs.length > 0 ||
-    sessionCronJobCount > 0
-  );
-}
-
-function useSessionWorkspaceState(snapshot: ChatThreadSnapshot) {
-  const childSessionTabs = useMemo(
-    () =>
-      snapshot.childSessionTabs.filter(
-        (tab) => tab.parentSessionKey === snapshot.sessionKey,
-      ),
-    [snapshot.childSessionTabs, snapshot.sessionKey],
-  );
-  const workspaceFileTabs = useMemo(
-    () =>
-      snapshot.workspaceFileTabs.filter(
-        (tab) => tab.parentSessionKey === snapshot.sessionKey,
-      ),
-    [snapshot.sessionKey, snapshot.workspaceFileTabs],
-  );
-  const cronQuery = useCronJobs({ all: true });
-  const sessionCronJobs = useMemo(
-    () =>
-      (cronQuery.data?.jobs ?? []).filter((job) =>
-        isCronJobForSession(job, snapshot.sessionKey),
-      ),
-    [cronQuery.data?.jobs, snapshot.sessionKey],
-  );
-  return {
-    childSessionTabs,
-    workspaceFileTabs,
-    sessionCronJobs,
-    showWorkspacePanel: shouldShowWorkspacePanel(
-      snapshot,
-      childSessionTabs,
-      workspaceFileTabs,
-      sessionCronJobs.length,
-    ),
-  };
-}
-
-function ChatParentSessionBannerContainer() {
-  const presenter = usePresenter();
-  const snapshot = useChatThreadStore((state) => state.snapshot);
-  return (
-    <ChatParentSessionBanner
-      parentSessionLabel={
-        snapshot.parentSessionKey ? (snapshot.parentSessionLabel ?? null) : null
-      }
-      onGoToParentSession={presenter.chatThreadManager.goToParentSession}
-    />
-  );
-}
-
-function ChatConversationHeaderContainer({
-  layoutMode,
-  onBackToList,
-}: {
-  layoutMode: ChatConversationLayoutMode;
-  onBackToList?: () => void;
-}) {
-  const presenter = usePresenter();
-  const snapshot = useChatThreadStore((state) => state.snapshot);
-  const { childSessionTabs, sessionCronJobs } =
-    useSessionWorkspaceState(snapshot);
-  const shouldShowSessionHeader = Boolean(
-    snapshot.sessionKey || snapshot.sessionTypeLabel,
-  );
-  const sessionHeaderTitle =
-    snapshot.sessionDisplayName ||
-    (snapshot.canDeleteSession && snapshot.sessionKey
-      ? snapshot.sessionKey
-      : null) ||
-    t("chatSidebarNewTask");
-  const normalizedAgentId = snapshot.agentId?.trim() ?? "";
-  const shouldShowHeaderAgentAvatar =
-    normalizedAgentId.length > 0 && normalizedAgentId.toLowerCase() !== "main";
-  const openChildSessions = () => {
-    if (!snapshot.sessionKey) {
-      return;
-    }
-    presenter.chatThreadManager.openChildSessionPanel({
-      parentSessionKey: snapshot.sessionKey,
-      activeChildSessionKey: childSessionTabs[0]?.sessionKey ?? null,
-    });
-  };
-  const openSessionCronJobs = () => {
-    if (!snapshot.sessionKey || sessionCronJobs.length === 0) {
-      return;
-    }
-    presenter.chatThreadManager.openSessionCronPanel(snapshot.sessionKey);
-  };
-
-  return (
-    <ChatConversationHeader
-      snapshot={snapshot}
-      childSessionCount={childSessionTabs.length}
-      sessionCronJobCount={sessionCronJobs.length}
-      layoutMode={layoutMode}
-      normalizedAgentId={normalizedAgentId}
-      sessionHeaderTitle={sessionHeaderTitle}
-      shouldShowHeaderAgentAvatar={shouldShowHeaderAgentAvatar}
-      shouldShowSessionHeader={shouldShowSessionHeader}
-      onBackToList={onBackToList}
-      onOpenChildSessions={openChildSessions}
-      onOpenSessionCronJobs={openSessionCronJobs}
-      onDeleteSession={presenter.chatThreadManager.deleteSession}
-    />
-  );
-}
-
-function ChatSessionWorkspacePanelContainer({
-  layoutMode,
-}: {
-  layoutMode: ChatConversationLayoutMode;
-}) {
-  const snapshot = useChatThreadStore((state) => state.snapshot);
-  const {
-    childSessionTabs,
-    workspaceFileTabs,
-    sessionCronJobs,
-    showWorkspacePanel,
-  } = useSessionWorkspaceState(snapshot);
-
-  if (!showWorkspacePanel) {
-    return null;
-  }
-
-  return (
-    <ChatSessionWorkspacePanel
-      sessionKey={snapshot.sessionKey}
-      childSessionTabs={childSessionTabs}
-      activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
-      workspaceFileTabs={workspaceFileTabs}
-      activeWorkspaceFileKey={snapshot.activeWorkspaceFileKey ?? null}
-      workspaceNavigationHistory={snapshot.workspaceNavigationHistory}
-      workspaceNavigationHistoryIndex={snapshot.workspaceNavigationHistoryIndex}
-      activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
-      sessionCronJobs={sessionCronJobs}
-      sessionProjectRoot={snapshot.sessionProjectRoot ?? null}
-      sessionWorkingDir={snapshot.sessionWorkingDir ?? snapshot.sessionProjectRoot ?? null}
-      displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
-    />
-  );
-}
-
 export function ChatConversationPanel({
   layoutMode = "desktop",
   onBackToList,
@@ -382,17 +16,17 @@ export function ChatConversationPanel({
   layoutMode?: ChatConversationLayoutMode;
   onBackToList?: () => void;
 }) {
-  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const isProviderStateResolved = useNcpChatProviderStateResolved();
 
-  if (!snapshot.isProviderStateResolved) {
+  if (!isProviderStateResolved) {
     return <ChatConversationSkeleton />;
   }
 
   return (
     <section className="flex-1 min-h-0 flex overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-        <ChatParentSessionBannerContainer />
-        <ChatConversationHeaderContainer
+        <ChatConversationParentBanner />
+        <ChatConversationHeaderSection
           layoutMode={layoutMode}
           onBackToList={onBackToList}
         />
@@ -401,7 +35,7 @@ export function ChatConversationPanel({
         <ChatInputBarContainer />
       </div>
 
-      <ChatSessionWorkspacePanelContainer layoutMode={layoutMode} />
+      <ChatConversationWorkspaceSection layoutMode={layoutMode} />
     </section>
   );
 }

package/src/features/chat/components/conversation/chat-conversation-parent-banner.tsx

@@ -0,0 +1,16 @@
+import { ChatParentSessionBanner } from "@/features/chat/components/conversation/chat-conversation-header";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+
+export function ChatConversationParentBanner() {
+  const presenter = usePresenter();
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  return (
+    <ChatParentSessionBanner
+      parentSessionLabel={
+        snapshot.parentSessionKey ? (snapshot.parentSessionLabel ?? null) : null
+      }
+      onGoToParentSession={presenter.chatThreadManager.goToParentSession}
+    />
+  );
+}

package/src/features/chat/components/conversation/chat-conversation-skeleton.tsx

@@ -0,0 +1,86 @@
+import { Skeleton } from "@/shared/components/ui/skeleton";
+import { cn } from "@/shared/lib/utils";
+
+const CHAT_CONVERSATION_SKELETON_BUBBLES = [
+  {
+    key: "hero",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[78%] h-32 rounded-[30px]",
+  },
+  {
+    key: "follow-up",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[62%] h-24 rounded-[28px]",
+  },
+  {
+    key: "reply",
+    alignmentClassName: "justify-end",
+    bubbleClassName: "max-w-[70%] h-24 rounded-[28px]",
+  },
+  {
+    key: "detail",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[88%] h-36 rounded-[30px]",
+  },
+] as const;
+
+export function ChatConversationSkeleton() {
+  return (
+    <section
+      data-testid="chat-conversation-skeleton"
+      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white"
+    >
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+        <div className="mx-auto flex min-h-full w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
+          <div className="flex flex-1 flex-col gap-8">
+            <div className="space-y-6">
+              <Skeleton className="h-6 w-52 rounded-lg bg-gray-200/90" />
+              <div className="space-y-5">
+                {CHAT_CONVERSATION_SKELETON_BUBBLES.map((bubble) => (
+                  <div
+                    key={bubble.key}
+                    className={cn("flex w-full", bubble.alignmentClassName)}
+                  >
+                    <Skeleton
+                      data-testid="chat-conversation-skeleton-bubble"
+                      className={cn(
+                        "w-full bg-gray-200/80",
+                        bubble.bubbleClassName,
+                      )}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="mt-auto grid gap-4 pb-2 sm:grid-cols-[minmax(0,1fr)_minmax(180px,240px)] sm:items-end">
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-40 rounded-full bg-gray-200/70" />
+                <Skeleton className="h-[112px] w-full rounded-[30px] bg-gray-200/70" />
+              </div>
+              <div className="hidden justify-end sm:flex">
+                <Skeleton className="h-10 w-36 rounded-full bg-gray-200/75" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-gray-200/80 bg-white p-4">
+        <div className="mx-auto w-full max-w-[min(1120px,100%)]">
+          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card">
+            <div className="px-4 py-2.5">
+              <Skeleton className="h-[84px] w-full rounded-[28px] bg-gray-200/80" />
+            </div>
+            <div className="flex items-center justify-between gap-3 px-3 pb-3">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-8 w-20 rounded-full bg-gray-200/75" />
+                <Skeleton className="h-8 w-28 rounded-full bg-gray-200/75" />
+                <Skeleton className="hidden h-8 w-24 rounded-full bg-gray-200/70 sm:block" />
+              </div>
+              <Skeleton className="h-8 w-8 rounded-full bg-gray-200/85" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/features/chat/components/conversation/chat-conversation-workspace-section.tsx

@@ -0,0 +1,42 @@
+import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/components/chat-session-workspace-panel";
+import { useChatConversationWorkspaceState } from "@/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+
+type ChatConversationWorkspaceSectionProps = {
+  layoutMode: "desktop" | "mobile";
+};
+
+export function ChatConversationWorkspaceSection({
+  layoutMode,
+}: ChatConversationWorkspaceSectionProps) {
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const {
+    childSessionTabs,
+    workspaceFileTabs,
+    sessionCronJobs,
+    showWorkspacePanel,
+  } = useChatConversationWorkspaceState(snapshot);
+
+  if (!showWorkspacePanel) {
+    return null;
+  }
+
+  return (
+    <ChatSessionWorkspacePanel
+      sessionKey={snapshot.sessionKey}
+      childSessionTabs={childSessionTabs}
+      activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
+      workspaceFileTabs={workspaceFileTabs}
+      activeWorkspaceFileKey={snapshot.activeWorkspaceFileKey ?? null}
+      workspaceNavigationHistory={snapshot.workspaceNavigationHistory}
+      workspaceNavigationHistoryIndex={snapshot.workspaceNavigationHistoryIndex}
+      activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
+      sessionCronJobs={sessionCronJobs}
+      sessionProjectRoot={snapshot.sessionProjectRoot ?? null}
+      sessionWorkingDir={
+        snapshot.sessionWorkingDir ?? snapshot.sessionProjectRoot ?? null
+      }
+      displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
+    />
+  );
+}

package/src/features/chat/components/layout/{chat-page-shell.test.tsx → __tests__/chat-page-shell.test.tsx}

@@ -30,7 +30,7 @@ vi.mock("@/features/agents", () => ({
   AgentsPage: () => <div>Agents</div>,
 }));
 
-vi.mock("@/shared/components/cron-config", () => ({
+vi.mock("@/features/cron", () => ({
   CronConfig: () => <div>Cron</div>,
 }));