@nextclaw/ui 0.14.1 → 0.14.2

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -1,7 +1,4 @@
 import { useEffect, useMemo, useState } from "react";
-import { BrandHeader } from "@/shared/components/common/brand-header";
-import { StatusBadge } from "@/shared/components/common/status-badge";
-import { ChatSidebarListModeSwitch } from "@/features/chat/components/chat-sidebar-list-mode-switch";
 import {
   getSessionTitle,
   groupChildSessionsByParentKey,
@@ -25,37 +22,26 @@ import { THEME_OPTIONS } from "@/shared/lib/theme";
 import { useI18n } from "@/app/components/i18n-provider";
 import { useTheme } from "@/app/components/theme-provider";
 import { useDocBrowser } from "@/shared/components/doc-browser";
-import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
-import { AlarmClock, Bot, BrainCircuit } from "lucide-react";
 import { ChatSidebarSessionEntry } from "@/features/chat/features/session/components/chat-sidebar-session-entry";
-import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import {
   ChatSidebarDesktopToolbar,
   ChatSidebarMobileToolbar,
 } from "@/features/chat/components/layout/chat-sidebar-toolbar";
-import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
+import {
+  ChatSidebarDesktopFooter,
+  ChatSidebarDesktopHeader,
+  ChatSidebarDesktopNav,
+  ChatSidebarSessionArea,
+} from "@/features/chat/components/layout/chat-sidebar-desktop-layout";
 import { openApps } from "@/features/panel-apps";
-import { isWindowsDesktopHost } from "@/platforms/desktop";
 import {
   buildSessionTypeOptions,
   DEFAULT_SESSION_TYPE,
   normalizeSessionType,
 } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { useChatNewSessionTypePreference } from "@/features/chat/features/session-type/hooks/use-chat-new-session-type-preference";
-
-const navItems = [
-  {
-    target: "/cron",
-    label: () => t("chatSidebarScheduledTasks"),
-    icon: AlarmClock,
-  },
-  {
-    target: "/skills",
-    label: () => t("chatSidebarSkills"),
-    icon: BrainCircuit,
-  },
-  { target: "/agents", label: () => t("agentsPageTitle"), icon: Bot },
-];
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import { SIDEBAR_RAIL_WIDTH_CLASS } from "@/app/components/layout/sidebar-rail.styles";
 
 type ChatSidebarVariant = "desktop" | "mobile";
 
@@ -104,6 +90,9 @@ export function ChatSidebar({
   const isMobileVariant = variant === "mobile";
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
+  const isSidebarCollapsed = useViewportLayoutStore(
+    (state) => state.isSidebarCollapsed,
+  );
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
   const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
@@ -179,6 +168,7 @@ export function ChatSidebar({
     sessionTypeOptions,
   });
   const isProjectFirstView = listSnapshot.listMode === "project-first";
+  const shouldCollapse = !isMobileVariant && isSidebarCollapsed;
   const optimisticReadAtBySessionKey = useChatSessionUnreadState(
     items,
     listSnapshot.selectedSessionKey,
@@ -237,19 +227,23 @@ export function ChatSidebar({
   return (
     <aside
       className={cn(
-        "flex h-full min-h-0 flex-col bg-secondary",
+        "flex h-full min-h-0 flex-col bg-secondary transition-[width] duration-200 ease-out",
         isMobileVariant
           ? "flex-1 overflow-hidden"
-          : "w-[280px] shrink-0 border-r border-gray-200/60",
+          : shouldCollapse
+            ? cn(
+                SIDEBAR_RAIL_WIDTH_CLASS,
+                "shrink-0 border-r border-gray-200/60",
+              )
+            : "w-[280px] shrink-0 border-r border-gray-200/60",
       )}
+      data-sidebar-collapsed={shouldCollapse ? "true" : "false"}
     >
-      {!isMobileVariant && !isWindowsDesktopHost() ? (
-        <div className="px-5 py-2.5">
-          <BrandHeader
-            className="flex min-w-0 items-center gap-2"
-            suffix={<StatusBadge status={systemStatus.connectionStatus} />}
-          />
-        </div>
+      {!isMobileVariant ? (
+        <ChatSidebarDesktopHeader
+          connectionStatus={systemStatus.connectionStatus}
+          isCollapsed={shouldCollapse}
+        />
       ) : null}
 
       {isMobileVariant ? (
@@ -287,75 +281,48 @@ export function ChatSidebar({
             newSessionTypePreference.setSelectedSessionType
           }
           onQueryChange={presenter.chatSessionListManager.setQuery}
+          collapsed={shouldCollapse}
         />
       )}
 
       {!isMobileVariant ? (
-        <div className="px-3 pb-2">
-          <ul className="space-y-0.5">
-            {navItems.map((item) => (
-              <li key={item.target}>
-                <SidebarNavLinkItem
-                  to={item.target}
-                  label={item.label()}
-                  icon={item.icon}
-                  density="compact"
-                />
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-
-      {!isMobileVariant ? (
-        <div className="mx-4 border-t border-gray-200/60" />
+        <ChatSidebarDesktopNav isCollapsed={shouldCollapse} />
       ) : null}
 
-      <div className="flex items-center justify-between px-5 pb-2 pt-3">
-        <div className="text-[11px] font-medium uppercase tracking-wider text-gray-400">
-          {t("chatSidebarTaskRecords")}
-        </div>
-        <ChatSidebarListModeSwitch
-          isProjectFirstView={isProjectFirstView}
-          onSelectMode={presenter.chatSessionListManager.setListMode}
-        />
-      </div>
-
-      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
-        <ChatSidebarSessionList
-          isLoading={isLoading}
-          isProjectFirstView={isProjectFirstView}
-          groups={groups}
-          projectGroups={projectGroups}
-          defaultSessionType={newSessionTypePreference.selectedSessionType}
-          sessionTypeOptions={sessionTypeOptions}
-          renderSessionItem={renderSessionItem}
-          onCreateSession={createSessionAndOpenIfNeeded}
-        />
-      </div>
+      <ChatSidebarSessionArea
+        defaultSessionType={newSessionTypePreference.selectedSessionType}
+        groups={groups}
+        isCollapsed={shouldCollapse}
+        isLoading={isLoading}
+        isProjectFirstView={isProjectFirstView}
+        onCreateSession={createSessionAndOpenIfNeeded}
+        onSelectMode={presenter.chatSessionListManager.setListMode}
+        projectGroups={projectGroups}
+        renderSessionItem={renderSessionItem}
+        sessionTypeOptions={sessionTypeOptions}
+      />
 
       {!isMobileVariant ? (
-        <div className="px-3 py-3 border-t border-gray-200/60">
-          <ChatSidebarUtilityMenu
-            isOpen={isUtilityMenuOpen}
-            onOpenChange={setIsUtilityMenuOpen}
-            currentTheme={theme}
-            currentThemeLabel={currentThemeLabel}
-            themeOptions={utilityThemeOptions}
-            onSelectTheme={setTheme}
-            currentLanguage={language}
-            currentLanguageLabel={currentLanguageLabel}
-            languageOptions={utilityLanguageOptions}
-            onSelectLanguage={handleLanguageSwitch}
-            onOpenDocs={() =>
-              docBrowser.open(undefined, {
-                kind: "docs",
-                title: t("docBrowserHelp"),
-              })
-            }
-            onOpenApps={() => openApps(docBrowser)}
-          />
-        </div>
+        <ChatSidebarDesktopFooter
+          currentLanguage={language}
+          currentLanguageLabel={currentLanguageLabel}
+          currentTheme={theme}
+          currentThemeLabel={currentThemeLabel}
+          isCollapsed={shouldCollapse}
+          isOpen={isUtilityMenuOpen}
+          languageOptions={utilityLanguageOptions}
+          onOpenApps={() => openApps(docBrowser)}
+          onOpenChange={setIsUtilityMenuOpen}
+          onOpenDocs={() =>
+            docBrowser.open(undefined, {
+              kind: "docs",
+              title: t("docBrowserHelp"),
+            })
+          }
+          onSelectLanguage={handleLanguageSwitch}
+          onSelectTheme={setTheme}
+          themeOptions={utilityThemeOptions}
+        />
       ) : null}
     </aside>
   );

package/src/features/chat/components/providers/chat-presenter.provider.tsx

@@ -2,25 +2,19 @@ import { createContext, useContext, type ReactNode } from 'react';
 import type {
   ChatSessionListManager,
 } from '@/features/chat/managers/chat-session-list.manager';
-import type { ChatRunManager } from '@/features/chat/managers/chat-run.manager';
 import type { ChatUiManager } from '@/features/chat/managers/chat-ui.manager';
-import type { ChatInputManager } from '@/features/chat/managers/chat-input.manager';
 import type { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import type { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 
 type PublicManager<T extends object> = Pick<T, keyof T>;
 
-export type ChatInputManagerLike = PublicManager<ChatInputManager>;
 export type ChatThreadManagerLike = PublicManager<ChatThreadManager>;
 
 export type ChatPresenterLike = {
   chatUiManager: ChatUiManager;
-  chatRunManager: ChatRunManager;
-  chatInputManager: ChatInputManagerLike;
   chatQueryManager: ChatQueryManager;
   chatSessionListManager: ChatSessionListManager;
   chatThreadManager: ChatThreadManagerLike;
-  startAgentCreationDraft: (prompt: string) => void;
 };
 
 const ChatPresenterContext = createContext<ChatPresenterLike | null>(null);

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -0,0 +1,289 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useAppPresenter } from '@/app/components/app-presenter-provider';
+import { ChatConversationContent } from '@/features/chat/components/conversation/chat-conversation-content';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import {
+  isNcpAgentStartupUnavailableErrorMessage,
+  useNcpSessionConversation,
+} from '@/features/chat/features/ncp/hooks/use-ncp-session-conversation';
+import { isNcpChatRuntimeBlocked, resolveNcpChatSendErrorMessage } from '@/features/chat/features/runtime/utils/ncp-chat-runtime-availability.utils';
+import { buildChatContextWindowIndicator } from '@/features/chat/features/session/utils/chat-context-window-indicator.utils';
+import { readNcpContextWindowValue } from '@/features/chat/features/session/utils/ncp-session-context-metadata.utils';
+import { ChatConversationWelcome } from '@/features/chat/features/welcome/components/chat-conversation-welcome';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
+import { useSystemStatus } from '@/features/system-status';
+import { t } from '@/shared/lib/i18n';
+
+import {
+  useSessionConversationController,
+  type SessionConversationMaterializationContext,
+} from '@/features/chat/features/conversation/hooks/use-session-conversation-controller';
+import { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
+import { useSessionConversationInputState } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
+import { SessionConversationInput } from './session-conversation-input';
+
+type SessionConversationAreaProps = {
+  readonly consumeDraftIntent?: boolean;
+  readonly materializationContext?: SessionConversationMaterializationContext | null;
+  readonly onSessionMaterialized?: (sessionKey: string) => void;
+  readonly sessionKey: string | null;
+  readonly showWelcomeForDraft?: boolean;
+};
+
+function useSessionConversationDraftIntent(params: {
+  readonly consumeDraftIntent: boolean;
+  readonly applyPromptSuggestion: (prompt: string) => void;
+}) {
+  const { applyPromptSuggestion, consumeDraftIntent } = params;
+  const appPresenter = useAppPresenter();
+  const presenter = usePresenter();
+  useEffect(() => {
+    if (!consumeDraftIntent) {
+      return undefined;
+    }
+    const applyIntent = (intent: { id: number; prompt: string }) => {
+      presenter.chatSessionListManager.createSession();
+      presenter.chatSessionListManager.setSelectedAgentId('main');
+      applyPromptSuggestion(intent.prompt);
+      appPresenter.chatDraftIntentManager.markConsumed(intent.id);
+    };
+    const unsubscribe = appPresenter.chatDraftIntentManager.subscribe(applyIntent);
+    const pendingIntent = appPresenter.chatDraftIntentManager.consumePending();
+    if (pendingIntent) {
+      applyIntent(pendingIntent);
+    }
+    return unsubscribe;
+  }, [
+    appPresenter,
+    applyPromptSuggestion,
+    consumeDraftIntent,
+    presenter,
+  ]);
+}
+
+type ChatDraftRouteState = {
+  readonly sessionType?: unknown;
+  readonly projectRoot?: unknown;
+};
+
+function readChatDraftRouteState(value: unknown): ChatDraftRouteState | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  const draft = (value as { chatDraft?: unknown }).chatDraft;
+  if (!draft || typeof draft !== 'object') {
+    return null;
+  }
+  return draft as ChatDraftRouteState;
+}
+
+function useSessionConversationDraftRouteState(params: {
+  readonly sessionKey: string | null;
+  readonly setPendingProjectRoot: (projectRoot: string | null) => void;
+  readonly setPendingSessionType: (sessionType: string) => void;
+}) {
+  const {
+    sessionKey,
+    setPendingProjectRoot,
+    setPendingSessionType,
+  } = params;
+  const location = useLocation();
+  const appliedRouteStateKeyRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (sessionKey) {
+      return;
+    }
+    const draftState = readChatDraftRouteState(location.state);
+    if (!draftState) {
+      return;
+    }
+    const signature = [
+      location.key,
+      typeof draftState.sessionType === 'string' ? draftState.sessionType : '',
+      typeof draftState.projectRoot === 'string' ? draftState.projectRoot : '',
+    ].join(':');
+    if (appliedRouteStateKeyRef.current === signature) {
+      return;
+    }
+    appliedRouteStateKeyRef.current = signature;
+    if (typeof draftState.sessionType === 'string' && draftState.sessionType.trim()) {
+      setPendingSessionType(draftState.sessionType);
+    }
+    setPendingProjectRoot(
+      typeof draftState.projectRoot === 'string' && draftState.projectRoot.trim()
+        ? draftState.projectRoot
+        : null,
+    );
+  }, [
+    location.key,
+    location.state,
+    sessionKey,
+    setPendingProjectRoot,
+    setPendingSessionType,
+  ]);
+}
+
+function SessionConversationAlerts({
+  inputQuery,
+}: {
+  readonly inputQuery: ReturnType<typeof useSessionConversationInputQuery>;
+}) {
+  const presenter = usePresenter();
+  const shouldShowProviderHint =
+    inputQuery.isProviderStateResolved && inputQuery.modelOptions.length === 0;
+  const sessionTypeUnavailableMessage =
+    inputQuery.sessionTypeState.sessionTypeUnavailableMessage?.trim() || null;
+
+  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.chatUiManager.goToProviders}
+            className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
+          >
+            {t('chatGoConfigureProvider')}
+          </button>
+        </div>
+      ) : null}
+      {inputQuery.sessionTypeState.sessionTypeUnavailable && sessionTypeUnavailableMessage ? (
+        <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">
+            {sessionTypeUnavailableMessage}
+          </span>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function SessionConversationArea(props: SessionConversationAreaProps) {
+  const {
+    consumeDraftIntent = false,
+    materializationContext = null,
+    onSessionMaterialized,
+    sessionKey,
+    showWelcomeForDraft = true,
+  } = props;
+  const systemStatus = useSystemStatus();
+  const selectedAgentId = useChatSessionListStore(
+    (state) => state.snapshot.selectedAgentId,
+  );
+  const agent = useNcpSessionConversation(sessionKey ?? undefined);
+  const {
+    inputActions,
+    inputSnapshot,
+  } = useSessionConversationInputState();
+  const inputQuery = useSessionConversationInputQuery({
+    sessionKey,
+    inputSnapshot,
+    setPendingSessionType: inputActions.setPendingSessionType,
+  });
+  useSessionConversationDraftRouteState({
+    sessionKey,
+    setPendingProjectRoot: inputActions.setPendingProjectRoot,
+    setPendingSessionType: inputActions.setPendingSessionType,
+  });
+  const isRuntimeBlocked = isNcpChatRuntimeBlocked(systemStatus);
+  const currentSessionRunning = agent.isRunning || inputQuery.selectedSession?.status === 'running';
+  const rawLastSendError =
+    agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  const filteredLastSendError =
+    systemStatus.phase === 'ready' &&
+    isNcpAgentStartupUnavailableErrorMessage(rawLastSendError)
+      ? null
+      : rawLastSendError;
+  const lastSendError =
+    isRuntimeBlocked
+      ? null
+      : systemStatus.phase === 'ready'
+      ? filteredLastSendError
+      : resolveNcpChatSendErrorMessage({
+          message: filteredLastSendError,
+          status: systemStatus,
+        });
+  const controllerAgent = useMemo(() => ({
+    ...agent,
+    isRunning: currentSessionRunning,
+    isSending: agent.isSending || currentSessionRunning,
+  }), [agent, currentSessionRunning]);
+  const controller = useSessionConversationController({
+    agent: controllerAgent,
+    inputSnapshot,
+    inputQuery,
+    isRuntimeBlocked,
+    materializationContext,
+    selectedAgentId,
+    sessionKey,
+    onSessionMaterialized,
+    resetComposer: inputActions.resetComposer,
+    restoreComposer: inputActions.restoreComposer,
+    setSendError: inputActions.setSendError,
+  });
+  const displayInputSnapshot = useMemo(() => ({
+    ...inputSnapshot,
+    sendError: lastSendError ?? inputSnapshot.sendError,
+  }), [inputSnapshot, lastSendError]);
+  const contextWindow = useMemo(
+    () => buildChatContextWindowIndicator(readNcpContextWindowValue(agent.snapshot.contextWindow)),
+    [agent.snapshot.contextWindow],
+  );
+  useSessionConversationDraftIntent({
+    consumeDraftIntent,
+    applyPromptSuggestion: inputActions.applyPromptSuggestion,
+  });
+  const renderInput = useCallback((surface: 'default' | 'embedded') => (
+    <SessionConversationInput
+      contextWindow={contextWindow}
+      controller={controller}
+      inputActions={inputActions}
+      inputQuery={inputQuery}
+      inputSnapshot={displayInputSnapshot}
+      surface={surface}
+    />
+  ), [
+    contextWindow,
+    controller,
+    displayInputSnapshot,
+    inputActions,
+    inputQuery,
+  ]);
+  const showWelcome =
+    showWelcomeForDraft &&
+    !sessionKey &&
+    agent.visibleMessages.length === 0 &&
+    !agent.isHydrating &&
+    !controller.isSending;
+
+  return (
+    <>
+      <SessionConversationAlerts inputQuery={inputQuery} />
+      <ChatConversationContent
+        isAwaitingAssistantOutput={controller.isSending && currentSessionRunning}
+        isHistoryLoading={agent.isHydrating}
+        isSending={controller.isSending}
+        messages={agent.visibleMessages}
+        sessionKey={sessionKey}
+        showWelcome={showWelcome}
+        welcomeSlot={
+          <ChatConversationWelcome
+            inputSlot={renderInput('embedded')}
+            pendingProjectRoot={inputSnapshot.pendingProjectRoot}
+            pendingSessionType={inputSnapshot.pendingSessionType}
+            selectedSessionTypeValue={inputSnapshot.selectedSessionType}
+            onSelectProjectRoot={inputActions.setPendingProjectRoot}
+            onSelectPrompt={inputActions.applyPromptSuggestion}
+            onSelectSessionType={inputActions.setPendingSessionType}
+          />
+        }
+      />
+      {showWelcome ? null : renderInput('default')}
+    </>
+  );
+}