@nextclaw/ui 0.13.13 → 0.14.1-beta.0

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

@@ -0,0 +1,152 @@
+import { useMemo } from "react";
+import { ChatConversationHeader } from "@/features/chat/components/conversation/chat-conversation-header";
+import { ChatSessionHeaderActions } from "@/features/chat/features/session/components/session-header/chat-session-header-actions";
+import { ChatSessionProjectBadge } from "@/features/chat/features/session/components/session-header/chat-session-project-badge";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { useChatConversationWorkspaceState } from "@/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state";
+import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
+import { sessionDisplayName } from "@/features/chat/features/session/utils/chat-session-display.utils";
+import {
+  buildSessionTypeOptions,
+  normalizeSessionType,
+  resolveSessionTypeLabel,
+} from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { getSessionProjectName } from "@/shared/lib/session-project";
+import { t } from "@/shared/lib/i18n";
+
+type ChatConversationHeaderSectionProps = {
+  layoutMode: "desktop" | "mobile";
+  onBackToList?: () => void;
+};
+
+export function ChatConversationHeaderSection({
+  layoutMode,
+  onBackToList,
+}: ChatConversationHeaderSectionProps) {
+  const presenter = usePresenter();
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const sessionKey = useChatSessionListStore(
+    (state) => state.snapshot.selectedSessionKey,
+  );
+  const effectiveSessionKey = sessionKey ?? snapshot.sessionKey;
+  const pendingSessionType = useChatInputStore(
+    (state) => state.snapshot.pendingSessionType,
+  );
+  const sessionTypesData = useChatQueryStore(
+    (state) => state.snapshot.sessionTypesQuery?.data ?? null,
+  );
+  const selectedSession = useNcpChatSelectedSession(sessionKey);
+  const sessionTypeOptions = useMemo(
+    () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
+    [sessionTypesData?.options],
+  );
+  const sessionType = normalizeSessionType(
+    selectedSession?.sessionType ?? pendingSessionType,
+  );
+  const sessionTypeOption =
+    sessionTypeOptions.find((option) => option.value === sessionType) ?? null;
+  const sessionTypeLabel =
+    sessionTypeOption?.label ?? resolveSessionTypeLabel(sessionType);
+  const sessionProjectRoot = selectedSession?.projectRoot ?? null;
+  const sessionProjectName =
+    selectedSession?.projectName ?? getSessionProjectName(sessionProjectRoot);
+  const canDeleteSession = Boolean(selectedSession);
+  const { childSessionTabs, sessionCronJobs } =
+    useChatConversationWorkspaceState(snapshot);
+  const shouldShowSessionHeader = Boolean(effectiveSessionKey || sessionTypeLabel);
+  const sessionHeaderTitle =
+    (selectedSession ? sessionDisplayName(selectedSession) : undefined) ||
+    (canDeleteSession && sessionKey
+      ? sessionKey
+      : null) ||
+    t("chatSidebarNewTask");
+  const normalizedAgentId =
+    selectedSession?.agentId?.trim() ?? snapshot.agentId?.trim() ?? "";
+  const shouldShowHeaderAgentAvatar =
+    normalizedAgentId.length > 0 && normalizedAgentId.toLowerCase() !== "main";
+  const openChildSessions = () => {
+    if (!effectiveSessionKey) {
+      return;
+    }
+    presenter.chatThreadManager.openChildSessionPanel({
+      parentSessionKey: effectiveSessionKey,
+      activeChildSessionKey: childSessionTabs[0]?.sessionKey ?? null,
+    });
+  };
+  const openSessionCronJobs = () => {
+    if (!effectiveSessionKey || sessionCronJobs.length === 0) {
+      return;
+    }
+    presenter.chatThreadManager.openSessionCronPanel(effectiveSessionKey);
+  };
+
+  return (
+    <ChatConversationHeader
+      layoutMode={layoutMode}
+      title={sessionHeaderTitle}
+      shouldShow={shouldShowSessionHeader}
+      onBackToList={onBackToList}
+      leading={
+        shouldShowHeaderAgentAvatar ? (
+          <div className="inline-flex shrink-0 items-center">
+            <AgentIdentityAvatar
+              agentId={normalizedAgentId}
+              className="h-5 w-5"
+            />
+          </div>
+        ) : null
+      }
+      sessionTypeBadge={
+        sessionTypeLabel ? (
+          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+            {sessionTypeOption?.icon?.src ? (
+              <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">
+                <SessionContextIconNode
+                  icon={{
+                    kind: "runtime-image",
+                    src: sessionTypeOption.icon.src,
+                    alt: sessionTypeOption.icon.alt ?? null,
+                    name: sessionTypeLabel,
+                  }}
+                />
+              </span>
+            ) : null}
+            {sessionTypeLabel}
+          </span>
+        ) : null
+      }
+      projectBadge={
+        sessionProjectName ? (
+          <ChatSessionProjectBadge
+            sessionKey={effectiveSessionKey ?? "draft"}
+            projectName={sessionProjectName}
+            projectRoot={sessionProjectRoot}
+            persistToServer={canDeleteSession}
+          />
+        ) : null
+      }
+      actions={
+        effectiveSessionKey ? (
+          <ChatSessionHeaderActions
+            sessionKey={effectiveSessionKey}
+            canDeleteSession={canDeleteSession}
+            isDeletePending={snapshot.isDeletePending}
+            projectRoot={sessionProjectRoot}
+            metadata={selectedSession?.metadata ?? null}
+            childSessionCount={childSessionTabs.length}
+            sessionCronJobCount={sessionCronJobs.length}
+            onOpenChildSessions={openChildSessions}
+            onOpenSessionCronJobs={openSessionCronJobs}
+            onDeleteSession={presenter.chatThreadManager.deleteSession}
+          />
+        ) : null
+      }
+    />
+  );
+}

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

@@ -1,18 +1,9 @@
-import type { ComponentProps } from "react";
+import type { ReactNode } from "react";
 import { ArrowLeft } from "lucide-react";
-import { AgentAvatar } from "@/shared/components/common/agent-avatar";
-import { SessionContextIconNode } from "@/features/chat/components/session/session-context-icon";
-import { ChatSessionHeaderActions } from "@/features/chat/components/conversation/session-header/chat-session-header-actions";
-import { ChatSessionProjectBadge } from "@/features/chat/components/conversation/session-header/chat-session-project-badge";
-import type { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
-type ChatThreadSnapshot = ReturnType<typeof useChatThreadStore.getState>["snapshot"];
-type ChatHeaderDeleteHandler = ComponentProps<
-  typeof ChatSessionHeaderActions
->["onDeleteSession"];
-
 export function ChatParentSessionBanner({
   parentSessionLabel,
   onGoToParentSession,
@@ -42,31 +33,23 @@ export function ChatParentSessionBanner({
 }
 
 export function ChatConversationHeader({
-  snapshot,
-  childSessionCount,
-  sessionCronJobCount,
   layoutMode,
-  normalizedAgentId,
-  sessionHeaderTitle,
-  shouldShowHeaderAgentAvatar,
-  shouldShowSessionHeader,
+  actions,
+  leading,
   onBackToList,
-  onOpenChildSessions,
-  onOpenSessionCronJobs,
-  onDeleteSession,
+  projectBadge,
+  sessionTypeBadge,
+  shouldShow,
+  title,
 }: {
-  snapshot: ChatThreadSnapshot;
-  childSessionCount: number;
-  sessionCronJobCount: number;
   layoutMode: "desktop" | "mobile";
-  normalizedAgentId: string;
-  sessionHeaderTitle: string;
-  shouldShowHeaderAgentAvatar: boolean;
-  shouldShowSessionHeader: boolean;
+  actions?: ReactNode;
+  leading?: ReactNode;
   onBackToList?: () => void;
-  onOpenChildSessions: () => void;
-  onOpenSessionCronJobs: () => void;
-  onDeleteSession: ChatHeaderDeleteHandler;
+  projectBadge?: ReactNode;
+  sessionTypeBadge?: ReactNode;
+  shouldShow: boolean;
+  title: string;
 }) {
   const isMobileLayout = layoutMode === "mobile";
 
@@ -75,78 +58,32 @@ export function ChatConversationHeader({
       className={cn(
         "border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
         isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
-        shouldShowSessionHeader ? "opacity-100" : "h-0 py-0 opacity-0 border-b-0",
-        shouldShowSessionHeader && (isMobileLayout ? "min-h-12 pb-2 pt-2" : "h-[52px]"),
+        shouldShow ? "opacity-100" : "h-0 py-0 opacity-0 border-b-0",
+        shouldShow && (isMobileLayout ? "min-h-12 pb-2 pt-2" : "h-[52px]"),
       )}
       style={
-        isMobileLayout && shouldShowSessionHeader
+        isMobileLayout && shouldShow
           ? { paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.5rem)" }
           : undefined
       }
     >
       <div className="min-w-0 flex-1 flex items-center gap-2">
         {isMobileLayout && onBackToList ? (
-          <button
-            type="button"
+          <IconActionButton
+            icon={<ArrowLeft className="h-4 w-4" />}
+            label={t("chat")}
             onClick={onBackToList}
             className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
-            aria-label={t("chat")}
-          >
-            <ArrowLeft className="h-4 w-4" />
-          </button>
-        ) : null}
-        {shouldShowHeaderAgentAvatar ? (
-          <div className="inline-flex shrink-0 items-center">
-            <AgentAvatar
-              agentId={normalizedAgentId}
-              displayName={snapshot.agentDisplayName}
-              avatarUrl={snapshot.agentAvatarUrl}
-              className="h-5 w-5"
-            />
-          </div>
+          />
         ) : null}
+        {leading}
         <span className="text-sm font-medium text-gray-700 truncate">
-          {sessionHeaderTitle}
+          {title}
         </span>
-        {snapshot.sessionTypeLabel ? (
-          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
-            {snapshot.sessionTypeIcon?.src ? (
-              <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">
-                <SessionContextIconNode
-                  icon={{
-                    kind: "runtime-image",
-                    src: snapshot.sessionTypeIcon.src,
-                    alt: snapshot.sessionTypeIcon.alt ?? null,
-                    name: snapshot.sessionTypeLabel,
-                  }}
-                />
-              </span>
-            ) : null}
-            {snapshot.sessionTypeLabel}
-          </span>
-        ) : null}
-        {snapshot.sessionProjectName ? (
-          <ChatSessionProjectBadge
-            sessionKey={snapshot.sessionKey ?? "draft"}
-            projectName={snapshot.sessionProjectName}
-            projectRoot={snapshot.sessionProjectRoot}
-            persistToServer={snapshot.canDeleteSession}
-          />
-        ) : null}
+        {sessionTypeBadge}
+        {projectBadge}
       </div>
-      {snapshot.sessionKey ? (
-        <ChatSessionHeaderActions
-          sessionKey={snapshot.sessionKey}
-          canDeleteSession={snapshot.canDeleteSession}
-          isDeletePending={snapshot.isDeletePending}
-          projectRoot={snapshot.sessionProjectRoot}
-          childSessionCount={childSessionCount}
-          sessionCronJobCount={sessionCronJobCount}
-          onOpenChildSessions={onOpenChildSessions}
-          onOpenSessionCronJobs={onOpenSessionCronJobs}
-          onDeleteSession={onDeleteSession}
-        />
-      ) : null}
+      {actions}
     </div>
   );
 }