@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -6,11 +6,8 @@ import {
   type RefObject,
 } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
-import { CHAT_PROJECT_TOKEN_KIND } from "@nextclaw/shared";
-import { toast } from "sonner";
 import {
   type ChatInlineDisplayViewModel,
-  type ChatInlineTokenViewModel,
   type ChatMessageViewModel,
   type ChatPanelAppCardViewModel,
   ChatMessageList,
@@ -29,14 +26,20 @@ import {
 } from "@/features/chat/features/message/utils/chat-message-texts.utils";
 import {
   readInlineTokensFromMetadata,
-  resolveWorkspaceReferencePath,
 } from "@/features/chat/features/input/utils/chat-inline-token.utils";
-import { adaptNcpMessageToUiMessage } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
-import { type ContextCompactionTimelineView } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
+import {
+  adaptNcpMessagePartsForChat,
+  adaptNcpMessageToUiMessage,
+} from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import { ChatInlineFilePreview } from "@/features/chat/features/message/components/chat-inline-file-preview";
 import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
+import {
+  ChatContextCompactionDivider,
+  ChatContextInheritanceDivider,
+} from "@/features/chat/features/message/components/chat-message-timeline-dividers";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-layout.store";
 import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
@@ -49,17 +52,27 @@ import { useI18n } from "@/app/components/i18n-provider";
 import { useChatMessageVirtualizer } from "@/features/chat/features/message/hooks/use-chat-message-virtualizer";
 import {
   buildChatMessageTimelineItems,
-  isVisibleChatMessage,
+  CONTEXT_COMPACTION_PART_EXTENSION_TYPE,
+  projectVisibleChatMessages,
+  type ContextCompactionPartData,
   type ChatTimelineItem,
-  type ContextInheritanceTimelineView,
 } from "@/features/chat/features/message/utils/chat-message-timeline.utils";
-import { buildServerPathContentUrl, fetchNcpSessionSkills } from "@/shared/lib/api";
+import { useChatMessageActions } from "@/features/chat/features/message/hooks/use-chat-message-actions";
+import { useChatInlineTokenActions } from "@/features/chat/features/message/hooks/use-chat-inline-token-actions";
+import { buildServerPathContentUrl } from "@/shared/lib/api";
 import { formatDateTime, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type ChatMessageListContainerProps = {
+  canContinue?: boolean;
   messages: readonly NcpMessage[];
   isSending: boolean;
+  messageActionsDisabled?: boolean;
+  onContinueRun?: () => Promise<void> | void;
+  onEditMessage?: (payload: {
+    readonly message: NcpMessage;
+    readonly messageId: string;
+  }) => Promise<void> | void;
   sessionKey: string | null;
   scrollRef: RefObject<HTMLDivElement | null>;
   className?: string;
@@ -77,15 +90,17 @@ class ChatMessageViewModelAdapter {
   >();
 
   adapt = (params: {
+    continuationRunning: boolean;
     executionLabels: ReturnType<typeof buildChatMessageExecutionLabels>;
     language: Parameters<typeof formatDateTime>[1];
     processedLabel: string;
     rawMessages: readonly NcpMessage[];
     texts: ReturnType<typeof buildChatMessageAdapterTexts>;
   }): ChatMessageViewModel[] => {
-    const { executionLabels, language, processedLabel, rawMessages, texts } =
-      params;
-    return rawMessages.filter(isVisibleChatMessage).flatMap((message) => {
+    const {
+      continuationRunning, executionLabels, language, processedLabel, rawMessages, texts,
+    } = params;
+    return projectVisibleChatMessages(rawMessages, { continuationRunning }).map((message) => {
       const processSummary = buildChatMessageProcessSummary({
         message,
         processedLabel,
@@ -103,7 +118,7 @@ class ChatMessageViewModelAdapter {
         cached.processSummaryLabel === processSummaryLabel &&
         cached.executionPresentationKey === executionPresentationKey
       ) {
-        return [cached.viewModel];
+        return cached.viewModel;
       }
 
       const uiMessage = adaptNcpMessageToUiMessage(message);
@@ -118,7 +133,7 @@ class ChatMessageViewModelAdapter {
           executionSummaryLabel: executionPresentation?.summaryLabel,
           moreActions: executionPresentation?.moreActions,
         },
-        parts: uiMessage.parts as unknown as ChatMessageSource["parts"],
+        parts: adaptNcpMessagePartsForChat(message.parts) as ChatMessageSource["parts"],
       };
       const viewModel = adaptChatMessage(sourceMessage, {
         formatTimestamp: (value) => formatDateTime(value, language),
@@ -131,7 +146,7 @@ class ChatMessageViewModelAdapter {
         executionPresentationKey,
         viewModel,
       });
-      return [viewModel];
+      return viewModel;
     });
   };
 }
@@ -161,69 +176,22 @@ const renderChatPanelAppCard = (panelApp: ChatPanelAppCardViewModel) => (
   <ChatInlinePanelAppCard panelApp={panelApp} />
 );
 
-export function ChatContextCompactionDivider({
-  checkpoint,
-}: {
-  checkpoint?: ContextCompactionTimelineView;
-}) {
-  const isCompacting = !checkpoint || checkpoint.status === "compressing";
-  const title = checkpoint
-    ? [
-        `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
-        `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
-        `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
-      ].join("\n")
-    : undefined;
-  return (
-    <div
-      className="my-4 flex items-center gap-3 text-[11px] text-muted-foreground"
-      title={title}
-    >
-      <div className="h-px flex-1 bg-border" />
-      <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1">
-        {isCompacting ? (
-          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground" />
-        ) : (
-          <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/45" />
-        )}
-        <span>
-          {isCompacting
-            ? t("chatContextCompactionCompressing")
-            : t("chatContextCompactionCompressed")}
-        </span>
-      </div>
-      <div className="h-px flex-1 bg-border" />
-    </div>
-  );
-}
+export { ChatContextCompactionDivider } from "@/features/chat/features/message/components/chat-message-timeline-dividers";
 
-function ChatContextInheritanceDivider({
-  inheritance,
-}: {
-  inheritance: ContextInheritanceTimelineView;
-}) {
-  const title = [
-    `${t("chatContextInheritanceSourceSession")}: ${inheritance.sourceSessionId}`,
-    `${t("chatContextInheritanceMessages")}: ${inheritance.inheritedMessageCount}`,
-  ].join("\n");
-  return (
-    <div
-      className="my-4 flex items-center gap-3 text-[11px] text-emerald-700"
-      title={title}
-    >
-      <div className="h-px flex-1 bg-emerald-100" />
-      <div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1">
-        <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
-        <span>{t("chatContextInheritanceInherited")}</span>
-      </div>
-      <div className="h-px flex-1 bg-emerald-100" />
-    </div>
-  );
+function isAwaitingAssistantOutputRow(
+  item: ChatTimelineItem,
+  activeRowKey: string | null,
+): boolean {
+  return item.kind === "typing" || item.key === activeRowKey;
 }
 
 export function ChatMessageListContainer({
+  canContinue = false,
   messages: rawMessages,
   isSending,
+  messageActionsDisabled = false,
+  onContinueRun,
+  onEditMessage,
   scrollRef,
   sessionKey,
   className,
@@ -232,14 +200,18 @@ export function ChatMessageListContainer({
   const { language } = useI18n();
   const messageLayout = useChatMessageLayoutStore((state) => state.layout);
   const selectedSession = useNcpChatSelectedSession(sessionKey);
+  const selectedAgentId = useChatSessionListStore(
+    (state) => state.snapshot.selectedAgentId,
+  );
   const sessionTypesData = useChatQueryStore(
     (state) => state.snapshot.sessionTypesQuery?.data ?? null,
   );
   const activeSessionType = normalizeSessionType(
-    selectedSession?.sessionType ??
-      sessionTypesData?.defaultType ??
-      DEFAULT_SESSION_TYPE,
+    selectedSession?.sessionType ?? sessionTypesData?.defaultType,
   );
+  const showAssistantHeader =
+    activeSessionType !== DEFAULT_SESSION_TYPE ||
+    (selectedSession?.agentId ?? selectedAgentId).trim().toLowerCase() !== "main";
   const sessionTypeOption = buildSessionTypeOptions(
     sessionTypesData?.options ?? [],
   ).find((option) => option.value === activeSessionType);
@@ -295,18 +267,27 @@ export function ChatMessageListContainer({
     () => buildChatMessageExecutionLabels(language),
     [language],
   );
-
-  const messages = useMemo(
+  const adaptedMessages = useMemo(
     () =>
       chatMessageViewModelAdapter.adapt({
+        continuationRunning: isSending,
         executionLabels,
         language,
         processedLabel: t("chatProcessSummaryProcessed"),
         rawMessages,
         texts,
       }),
-    [executionLabels, language, rawMessages, texts],
+    [executionLabels, isSending, language, rawMessages, texts],
   );
+  const { handleMessageAction, messages, renderMessageContent } =
+    useChatMessageActions({
+      adaptedMessages,
+      canContinue,
+      disabled: messageActionsDisabled,
+      onContinueRun,
+      onEditMessage,
+      rawMessages,
+    });
 
   const activeAssistantMessage = messages.findLast(
     (message) =>
@@ -337,104 +318,28 @@ export function ChatMessageListContainer({
     activeRowKey,
     focusedRowKey,
   });
-  const handleInlineTokenClick = useCallback(
-    (token: ChatInlineTokenViewModel) => {
-      if (token.kind === "panel_app" && "key" in token) {
-        void presenter.chatUiManager.showContent({
-          target: { type: "panel_app", payload: { appId: token.key } },
-        });
-        return;
-      }
-      if (
-        "key" in token &&
-        (token.kind === CHAT_PROJECT_TOKEN_KIND ||
-          token.kind === "workspace_file" ||
-          token.kind === "workspace_directory")
-      ) {
-        const path = token.kind === CHAT_PROJECT_TOKEN_KIND
-          ? token.key
-          : resolveWorkspaceReferencePath({
-              projectRoot: selectedSession?.projectRoot,
-              relativePath: token.key,
-            });
-        if (path) {
-          presenter.chatThreadManager.openFilePreview({
-            path,
-            label: token.label,
-            viewMode: "preview",
-          });
-        }
-        return;
-      }
-      if (token.kind !== "skill" || !("ref" in token)) return;
-      const skillPath = token.path?.trim();
-      if (skillPath) {
-        presenter.chatThreadManager.openFilePreview({
-          path: skillPath,
-          label: token.label || token.name,
-          viewMode: "preview",
-          previewViewer: "rendered",
-        });
-        return;
-      }
-      if (!sessionKey) {
-        toast.error(t("chatSkillPreviewUnavailable"));
-        return;
-      }
-      void fetchNcpSessionSkills(sessionKey, {
-        projectRoot: selectedSession?.projectRoot ?? null,
-      }).then(({ records }) => {
-        const exact = records.find((record) => record.ref === token.ref);
-        const named = records.filter((record) => record.name === token.name);
-        const matched = exact ?? (named.length === 1 ? named[0] : null);
-        const legacyPath = matched?.path.trim();
-        if (!matched || !legacyPath) {
-          toast.error(t("chatSkillPreviewUnavailable"));
-          return;
-        }
-        presenter.chatThreadManager.openFilePreview({
-          path: legacyPath,
-          label: token.label || matched.name,
-          viewMode: "preview",
-          previewViewer: "rendered",
-        });
-      }).catch(() => toast.error(t("chatSkillPreviewUnavailable")));
-    },
-    [
-      presenter.chatThreadManager,
-      presenter.chatUiManager,
-      selectedSession?.projectRoot,
-      sessionKey,
-    ],
-  );
-  const handleAttachmentOpen = useCallback(
-    (file: {
-      label: string;
-      mimeType: string;
-      dataUrl?: string;
-      sizeBytes?: number;
-      isImage: boolean;
-    }) => {
-      const contentUrl = file.dataUrl?.trim();
-      if (!contentUrl) {
-        return;
-      }
-      const label = file.label.trim() || "attachment";
-      presenter.chatThreadManager.openFilePreview({
-        path: label,
-        label,
-        viewMode: "preview",
-        contentUrl,
-        mimeType: file.mimeType,
-      });
-    },
-    [presenter.chatThreadManager],
-  );
+  const { handleAttachmentOpen, handleInlineTokenClick } =
+    useChatInlineTokenActions({ selectedSession, sessionKey });
   const handleRowBlur = useCallback((event: FocusEvent<HTMLDivElement>) => {
     if (!event.currentTarget.contains(event.relatedTarget)) {
       setFocusedRowKey(null);
     }
   }, []);
+  const renderCustomPart = useCallback(
+    (part: Extract<ChatMessageViewModel["parts"][number], { type: "custom" }>) => {
+      if (part.customType !== CONTEXT_COMPACTION_PART_EXTENSION_TYPE) {
+        return undefined;
+      }
+      const data = part.data as ContextCompactionPartData;
+      return (
+        <ChatContextCompactionDivider
+          checkpoint={data.checkpoint}
+          inline
+        />
+      );
+    },
+    [],
+  );
   return (
     <div className={cn("relative", className)} ref={containerRef}>
       {virtualizer.getVirtualItems().map((virtualRow) => {
@@ -459,17 +364,21 @@ export function ChatMessageListContainer({
               <div className={item.kind === "message" ? "pb-5" : undefined}>
                 <ChatMessageList
                   assistantAvatarIcon={assistantAvatarIcon}
+                  showAssistantHeader={showAssistantHeader}
                   layout={messageLayout}
                   messages={item.kind === "message" ? [item.message] : []}
-                  isSending={item.kind === "typing"}
+                  isSending={isAwaitingAssistantOutputRow(item, activeRowKey)}
                   hasAssistantDraft={hasAssistantDraft}
                   texts={messageTexts}
                   onToolAction={presenter.chatThreadManager.handleToolAction}
                   onFileOpen={presenter.chatThreadManager.openFilePreview}
                   onAttachmentOpen={handleAttachmentOpen}
                   onInlineTokenClick={handleInlineTokenClick}
+                  onMessageAction={handleMessageAction}
                   resolveFileContentUrl={resolveFileContentUrl}
+                  renderCustomPart={renderCustomPart}
                   renderInlineDisplay={renderInlineDisplayWithFiles}
+                  renderMessageContent={renderMessageContent}
                   renderToolAgent={renderChatToolAgent}
                   renderPanelAppCard={renderChatPanelAppCard}
                 />

package/src/features/chat/features/message/components/chat-message-timeline-dividers.tsx

@@ -0,0 +1,75 @@
+import { t } from "@/shared/lib/i18n";
+import type { ContextCompactionTimelineView } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
+import type { ContextInheritanceTimelineView } from "@/features/chat/features/message/utils/chat-message-timeline.utils";
+
+export function ChatContextCompactionDivider({
+  checkpoint,
+  inline = false,
+}: {
+  checkpoint?: ContextCompactionTimelineView;
+  inline?: boolean;
+}) {
+  const isCompacting = !checkpoint || checkpoint.status === "compressing";
+  const isFailed = checkpoint?.status === "failed";
+  const isCancelled = checkpoint?.status === "cancelled";
+  const title = checkpoint
+    ? [
+        `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
+        `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
+        `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
+      ].join("\n")
+    : undefined;
+  return (
+    <div
+      data-context-compaction-placement={inline ? "assistant" : "timeline"}
+      className={inline
+        ? "my-3 flex items-center gap-3 text-[11px] text-muted-foreground"
+        : "my-4 flex items-center gap-3 text-[11px] text-muted-foreground"}
+      aria-live="polite"
+      title={title}
+    >
+      <div className="h-px flex-1 bg-border" />
+      <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1">
+        {isCompacting ? (
+          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground" />
+        ) : (
+          <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/45" />
+        )}
+        <span>
+          {isCompacting
+            ? t("chatContextCompactionCompressing")
+            : isCancelled
+              ? t("chatContextCompactionCancelled")
+              : isFailed
+                ? t("chatContextCompactionFailed")
+                : t("chatContextCompactionCompressed")}
+        </span>
+      </div>
+      <div className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+export function ChatContextInheritanceDivider({
+  inheritance,
+}: {
+  inheritance: ContextInheritanceTimelineView;
+}) {
+  const title = [
+    `${t("chatContextInheritanceSourceSession")}: ${inheritance.sourceSessionId}`,
+    `${t("chatContextInheritanceMessages")}: ${inheritance.inheritedMessageCount}`,
+  ].join("\n");
+  return (
+    <div
+      className="my-4 flex items-center gap-3 text-[11px] text-emerald-700"
+      title={title}
+    >
+      <div className="h-px flex-1 bg-emerald-100" />
+      <div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1">
+        <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+        <span>{t("chatContextInheritanceInherited")}</span>
+      </div>
+      <div className="h-px flex-1 bg-emerald-100" />
+    </div>
+  );
+}

package/src/features/chat/features/message/hooks/use-chat-inline-token-actions.ts

@@ -0,0 +1,125 @@
+import { useCallback } from "react";
+import type { ChatInlineTokenViewModel } from "@nextclaw/agent-chat-ui";
+import {
+  CHAT_PROJECT_TOKEN_KIND,
+  CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
+} from "@nextclaw/shared";
+import { toast } from "sonner";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { resolveWorkspaceReferencePath } from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import { fetchNcpSessionSkills } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+
+type SelectedSessionPaths = {
+  projectRoot?: string | null;
+  workingDir?: string | null;
+} | null | undefined;
+
+export function useChatInlineTokenActions(params: {
+  selectedSession: SelectedSessionPaths;
+  sessionKey: string | null;
+}) {
+  const { selectedSession, sessionKey } = params;
+  const presenter = usePresenter();
+  const projectRoot = selectedSession?.projectRoot ?? selectedSession?.workingDir;
+
+  const handleInlineTokenClick = useCallback((token: ChatInlineTokenViewModel) => {
+    if (token.kind === "panel_app" && "key" in token) {
+      void presenter.chatUiManager.showContent({
+        target: { type: "panel_app", payload: { appId: token.key } },
+      });
+      return;
+    }
+    if (
+      "key" in token &&
+      (token.kind === CHAT_PROJECT_TOKEN_KIND ||
+        token.kind === "workspace_file" ||
+        token.kind === "workspace_directory")
+    ) {
+      const path = token.kind === CHAT_PROJECT_TOKEN_KIND
+        ? token.key
+        : resolveWorkspaceReferencePath({ projectRoot, relativePath: token.key });
+      if (path) {
+        presenter.chatThreadManager.openFilePreview({
+          path,
+          label: token.label,
+          viewMode: "preview",
+        });
+      }
+      return;
+    }
+    if (token.kind === CHAT_WORKSPACE_EXCERPT_TOKEN_KIND && "excerpt" in token) {
+      const path = resolveWorkspaceReferencePath({
+        projectRoot,
+        relativePath: token.path,
+      });
+      if (path) {
+        presenter.chatThreadManager.openFilePreview({
+          path,
+          label: token.label,
+          line: token.startLine ?? undefined,
+          viewMode: "preview",
+        });
+      }
+      return;
+    }
+    if (token.kind !== "skill" || !("ref" in token)) {
+      return;
+    }
+    const skillPath = token.path?.trim();
+    if (skillPath) {
+      presenter.chatThreadManager.openFilePreview({
+        path: skillPath,
+        label: token.label || token.name,
+        viewMode: "preview",
+        previewViewer: "rendered",
+      });
+      return;
+    }
+    if (!sessionKey) {
+      toast.error(t("chatSkillPreviewUnavailable"));
+      return;
+    }
+    void fetchNcpSessionSkills(sessionKey, {
+      projectRoot: selectedSession?.projectRoot ?? null,
+    }).then(({ records }) => {
+      const exact = records.find((record) => record.ref === token.ref);
+      const named = records.filter((record) => record.name === token.name);
+      const matched = exact ?? (named.length === 1 ? named[0] : null);
+      const legacyPath = matched?.path.trim();
+      if (!matched || !legacyPath) {
+        toast.error(t("chatSkillPreviewUnavailable"));
+        return;
+      }
+      presenter.chatThreadManager.openFilePreview({
+        path: legacyPath,
+        label: token.label || matched.name,
+        viewMode: "preview",
+        previewViewer: "rendered",
+      });
+    }).catch(() => toast.error(t("chatSkillPreviewUnavailable")));
+  }, [presenter, projectRoot, selectedSession?.projectRoot, sessionKey]);
+
+  const handleAttachmentOpen = useCallback((file: {
+    label: string;
+    mimeType: string;
+    dataUrl?: string;
+    sizeBytes?: number;
+    isImage: boolean;
+  }) => {
+    const contentUrl = file.dataUrl?.trim();
+    if (!contentUrl) {
+      return;
+    }
+    const label = file.label.trim() || "attachment";
+    presenter.chatThreadManager.openFilePreview({
+      path: label,
+      label,
+      viewMode: "preview",
+      contentUrl,
+      mimeType: file.mimeType,
+    });
+  }, [presenter]);
+
+  return { handleAttachmentOpen, handleInlineTokenClick };
+}