@nextclaw/ui 0.14.1-beta.0 → 0.14.1

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

@@ -1,58 +1,24 @@
-import { useRef } from "react";
+import { useRef, type ReactNode } from "react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
-import { ChatWelcome } from "@/features/chat/components/chat-welcome";
-import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
-import { resolveAgentRuntimeSessionType } 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 { useAgents } from "@/shared/hooks/use-agents";
 
-export function ChatConversationContent() {
-  const presenter = usePresenter();
-  const defaultSessionType = useChatInputStore(
-    (state) => state.snapshot.defaultSessionType,
-  );
-  const selectedAgentId = useChatSessionListStore(
-    (state) => state.snapshot.selectedAgentId,
-  );
+type ChatConversationContentProps = {
+  showWelcome: boolean;
+  welcomeSlot?: ReactNode;
+};
+
+export function ChatConversationContent({
+  showWelcome,
+  welcomeSlot,
+}: ChatConversationContentProps) {
   const snapshot = useChatThreadStore((state) => state.snapshot);
   const threadRef = useRef<HTMLDivElement | null>(null);
-  const agentsQuery = useAgents();
-  const draftAgentId = snapshot.agentId ?? selectedAgentId;
-  const availableAgents =
-    (agentsQuery.data?.agents?.length ?? 0) > 0
-      ? (agentsQuery.data?.agents ?? [])
-      : [{ id: draftAgentId }];
-  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(draftAgentId),
-      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,
@@ -72,12 +38,7 @@ export function ChatConversationContent() {
       className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
     >
       {showWelcome ? (
-        <ChatWelcome
-          onCreateSession={createDraftSessionForAgent}
-          agents={availableAgents}
-          selectedAgentId={draftAgentId}
-          onSelectAgent={selectDraftAgent}
-        />
+        welcomeSlot ?? null
       ) : hideEmptyHint || !hasMessages ? null : (
         <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
           <ChatMessageListContainer

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

@@ -6,6 +6,9 @@ import { ChatConversationParentBanner } from "@/features/chat/components/convers
 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";
+import { ChatConversationWelcome } from "@/features/chat/features/welcome/components/chat-conversation-welcome";
+import { shouldShowChatWelcome } from "@/features/chat/features/welcome/utils/chat-welcome-visibility.utils";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 
 type ChatConversationLayoutMode = "desktop" | "mobile";
 
@@ -17,6 +20,9 @@ export function ChatConversationPanel({
   onBackToList?: () => void;
 }) {
   const isProviderStateResolved = useNcpChatProviderStateResolved();
+  const showWelcome = useChatThreadStore((state) =>
+    shouldShowChatWelcome(state.snapshot),
+  );
 
   if (!isProviderStateResolved) {
     return <ChatConversationSkeleton />;
@@ -31,8 +37,15 @@ export function ChatConversationPanel({
           onBackToList={onBackToList}
         />
         <ChatConversationAlerts />
-        <ChatConversationContent />
-        <ChatInputBarContainer />
+        <ChatConversationContent
+          showWelcome={showWelcome}
+          welcomeSlot={
+            <ChatConversationWelcome
+              inputSlot={<ChatInputBarContainer surface="embedded" />}
+            />
+          }
+        />
+        {showWelcome ? null : <ChatInputBarContainer />}
       </div>
 
       <ChatConversationWorkspaceSection layoutMode={layoutMode} />

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

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -5,7 +6,7 @@ import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
-import type { ChatSessionTypeOptionView } from "@/shared/lib/api";
+import { PREFERENCE_KEYS, type ChatSessionTypeOptionView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
   createSession: vi.fn(() => "draft-session-key"),
@@ -18,6 +19,8 @@ const mocks = vi.hoisted(() => ({
   docOpen: vi.fn(),
   setLanguage: vi.fn(),
   setTheme: vi.fn(),
+  fetchPreference: vi.fn(),
+  updatePreference: vi.fn(),
   updateNcpSession: vi.fn(),
   agents: [] as Array<{
     id: string;
@@ -28,6 +31,15 @@ const mocks = vi.hoisted(() => ({
   isLoading: false,
 }));
 
+vi.mock("@/shared/lib/api", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as Record<string, unknown>),
+    fetchPreference: mocks.fetchPreference,
+    updatePreference: mocks.updatePreference,
+  };
+});
+
 function createSessionItem(
   session: NcpSessionListItemView["session"],
   runStatus?: NcpSessionListItemView["runStatus"],
@@ -53,10 +65,18 @@ function setSessionTypes(
 }
 
 function sidebarElement(variant?: "desktop" | "mobile") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
   return (
-    <MemoryRouter>
-      <ChatSidebar variant={variant} />
-    </MemoryRouter>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ChatSidebar variant={variant} />
+      </MemoryRouter>
+    </QueryClientProvider>
   );
 }
 
@@ -64,6 +84,11 @@ function renderSidebar(variant?: "desktop" | "mobile") {
   return render(sidebarElement(variant));
 }
 
+function expectCodexSelectedInSessionTypeMenu() {
+  fireEvent.click(screen.getByLabelText("Session Type"));
+  expect(screen.getByRole("button", { name: /Codex/i }).getAttribute("aria-pressed")).toBe("true");
+}
+
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
     chatUiManager: {
@@ -177,6 +202,16 @@ function resetSidebarTestState() {
   mocks.docOpen.mockReset();
   mocks.setLanguage.mockReset();
   mocks.setTheme.mockReset();
+  mocks.fetchPreference.mockReset();
+  mocks.fetchPreference.mockResolvedValue({
+    key: PREFERENCE_KEYS.chat.newSessionType,
+    value: null,
+  });
+  mocks.updatePreference.mockReset();
+  mocks.updatePreference.mockImplementation(async (key: string, value: string) => ({
+    key, value,
+    updatedAt: "2026-06-17T00:00:00.000Z",
+  }));
   mocks.updateNcpSession.mockReset();
   mocks.updateNcpSession.mockResolvedValue({});
   mocks.agents = [];
@@ -201,16 +236,44 @@ function resetSidebarTestState() {
 describe("ChatSidebar create and list basics", () => {
   beforeEach(resetSidebarTestState);
 
-  it("closes the create-session menu after choosing a non-default session type", async () => {
+  it("switches the desktop new-session type without creating until the left button is clicked", async () => {
     renderSidebar();
 
     fireEvent.click(screen.getByLabelText("Session Type"));
-    fireEvent.click(screen.getByText("Codex"));
+    fireEvent.click(screen.getByRole("button", { name: /Codex/i }));
+
+    expect(mocks.createSession).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(mocks.updatePreference).toHaveBeenCalledWith(
+        PREFERENCE_KEYS.chat.newSessionType,
+        "codex",
+      );
+      expect(screen.getByLabelText("Session Type").textContent).toBe("");
+    });
+    expectCodexSelectedInSessionTypeMenu();
+
+    fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
     expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+  });
+
+  it("hydrates the desktop new-session type from stored preferences", async () => {
+    mocks.fetchPreference.mockResolvedValue({
+      key: PREFERENCE_KEYS.chat.newSessionType,
+      value: "codex",
+    });
+
+    renderSidebar();
+
     await waitFor(() => {
-      expect(screen.queryByText("Codex")).toBeNull();
+      expect(screen.getByLabelText("Session Type").textContent).toBe("");
     });
+    expectCodexSelectedInSessionTypeMenu();
+    fireEvent.click(screen.getByLabelText("Session Type"));
+
+    fireEvent.click(screen.getByRole("button", { name: "New Task" }));
+
+    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
   });
 
   it("does not animate the desktop create task button width during runtime option hydration", () => {

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

@@ -1,4 +1,4 @@
-import { Button } from "@/shared/components/ui/button";
+import { Button, type ButtonProps } from "@/shared/components/ui/button";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { Input } from "@/shared/components/ui/input";
 import {
@@ -6,22 +6,71 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/shared/components/ui/popover";
-import { ChatSidebarCreateMenu } from "@/features/chat/features/session-type/components/chat-sidebar-create-menu";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
 import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
 import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
-import { ChevronDown, Plus, Search } from "lucide-react";
+import { Bot, ChevronDown, Plus, Search } from "lucide-react";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+type NewSessionActionStyleVariant =
+  | "neutralSurface"
+  | "brandSoft"
+  | "brandTextSurface"
+  | "brandSolid";
+
+const NEW_SESSION_ACTION_STYLE_VARIANT: NewSessionActionStyleVariant =
+  "brandSoft";
+
+const NEW_SESSION_ACTION_STYLE_CLASSES: Record<
+  NewSessionActionStyleVariant,
+  {
+    leftVariant: ButtonProps["variant"];
+    leftClassName: string;
+    rightClassName: string;
+  }
+> = {
+  neutralSurface: {
+    leftVariant: "ghost",
+    leftClassName:
+      "bg-white/90 text-gray-700 shadow-none transition-[background-color,color,box-shadow] hover:bg-white hover:text-gray-950 hover:shadow-sm active:bg-white/95",
+    rightClassName:
+      "bg-white/90 text-gray-600 shadow-none transition-[background-color,color,box-shadow] hover:bg-white hover:text-gray-900 hover:shadow-sm active:bg-white/95",
+  },
+  brandSoft: {
+    leftVariant: "ghost",
+    leftClassName:
+      "bg-primary/10 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
+    rightClassName:
+      "bg-primary/10 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
+  },
+  brandTextSurface: {
+    leftVariant: "ghost",
+    leftClassName:
+      "bg-white/90 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/10 hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
+    rightClassName:
+      "bg-white/90 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/10 hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
+  },
+  brandSolid: {
+    leftVariant: "primary",
+    leftClassName: "",
+    rightClassName:
+      "bg-primary text-primary-foreground shadow-sm hover:bg-primary-600 hover:text-primary-foreground active:bg-primary-700",
+  },
+};
 
 type ChatSidebarToolbarProps = {
   query: string;
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
   nonDefaultSessionTypeOptions: SessionTypeOption[];
+  selectedNewSessionType: string;
+  selectedNewSessionTypeOption: SessionTypeOption | null;
   isCreateMenuOpen: boolean;
   onCreateMenuOpenChange: (open: boolean) => void;
   onCreateSession: (sessionType: string) => void;
+  onSelectNewSessionType: (sessionType: string) => void;
   onQueryChange: (query: string) => void;
 };
 
@@ -39,58 +88,96 @@ function getMobileCreateOptions(params: {
   ];
 }
 
+function SessionTypeTriggerIcon({
+  option,
+}: {
+  option: SessionTypeOption | null;
+}) {
+  if (option?.icon?.src) {
+    return (
+      <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
+        <SessionContextIconNode
+          icon={{
+            kind: "runtime-image",
+            src: option.icon.src,
+            alt: option.icon.alt ?? null,
+            name: option.label,
+          }}
+          className="h-4 w-4"
+        />
+      </span>
+    );
+  }
+  return <Bot className="h-4 w-4 shrink-0" />;
+}
+
 export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
   const {
     query,
-    defaultSessionType,
-    nonDefaultSessionTypeOptions,
+    selectedNewSessionType,
+    selectedNewSessionTypeOption,
+    sessionTypeOptions,
     isCreateMenuOpen,
     onCreateMenuOpenChange,
     onCreateSession,
+    onSelectNewSessionType,
     onQueryChange,
   } = props;
+  const supportsSessionTypeSwitch = sessionTypeOptions.length > 1;
+  const actionStyle =
+    NEW_SESSION_ACTION_STYLE_CLASSES[NEW_SESSION_ACTION_STYLE_VARIANT];
 
   return (
     <>
       <div className="px-4 pb-3">
         <div className="flex items-center gap-2">
           <Button
-            variant="primary"
+            variant={actionStyle.leftVariant}
             className={cn(
               "min-w-0 rounded-xl",
-              nonDefaultSessionTypeOptions.length > 0
+              actionStyle.leftClassName,
+              supportsSessionTypeSwitch
                 ? "flex-1 rounded-r-md"
                 : "w-full",
             )}
             onClick={() => {
               onCreateMenuOpenChange(false);
-              onCreateSession(defaultSessionType);
+              onCreateSession(selectedNewSessionType);
             }}
           >
             <Plus className="mr-2 h-4 w-4" />
             {t("chatSidebarNewTask")}
           </Button>
-          {nonDefaultSessionTypeOptions.length > 0 ? (
+          {supportsSessionTypeSwitch ? (
             <Popover
               open={isCreateMenuOpen}
               onOpenChange={onCreateMenuOpenChange}
             >
               <PopoverTrigger asChild>
                 <IconActionButton
-                  icon={<ChevronDown className="h-4 w-4" />}
+                  icon={
+                    <span className="inline-flex items-center gap-0.5">
+                      <SessionTypeTriggerIcon option={selectedNewSessionTypeOption} />
+                      <ChevronDown className="h-3 w-3 opacity-60" />
+                    </span>
+                  }
                   label={t("chatSessionTypeLabel")}
-                  tooltip={false}
-                  className="h-9 w-10 shrink-0 rounded-xl rounded-l-md bg-primary text-primary-foreground shadow-sm hover:bg-primary-600 hover:text-primary-foreground active:bg-primary-700"
+                  tooltip={t("chatSessionTypeLabel")}
+                  className={cn(
+                    "h-9 w-12 shrink-0 rounded-xl rounded-l-md",
+                    actionStyle.rightClassName,
+                  )}
                 />
               </PopoverTrigger>
               <PopoverContent
                 align="end"
                 className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
               >
-                <ChatSidebarCreateMenu
-                  options={nonDefaultSessionTypeOptions}
+                <ChatSessionTypeMenu
+                  options={sessionTypeOptions}
+                  selectedSessionType={selectedNewSessionType}
                   onSelect={(sessionType) => {
-                    onCreateSession(sessionType);
+                    onSelectNewSessionType(sessionType);
                     onCreateMenuOpenChange(false);
                   }}
                 />
@@ -160,8 +247,9 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
               align="end"
               className="w-60 rounded-3xl border border-gray-200/80 bg-white p-2 shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
             >
-              <ChatSidebarCreateMenu
+              <ChatSessionTypeMenu
                 options={createOptions}
+                selectedSessionType={defaultSessionType}
                 title={t("chatSidebarNewTask")}
                 titleClassName="pb-1.5 text-[11px] font-medium normal-case tracking-normal"
                 onSelect={(sessionType) => {

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

@@ -41,6 +41,7 @@ import {
   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 = [
   {
@@ -173,6 +174,10 @@ export function ChatSidebar({
       ),
     [defaultSessionType, sessionTypeOptions],
   );
+  const newSessionTypePreference = useChatNewSessionTypePreference({
+    defaultSessionType,
+    sessionTypeOptions,
+  });
   const isProjectFirstView = listSnapshot.listMode === "project-first";
   const optimisticReadAtBySessionKey = useChatSessionUnreadState(
     items,
@@ -250,12 +255,19 @@ export function ChatSidebar({
       {isMobileVariant ? (
         <ChatSidebarMobileToolbar
           query={listSnapshot.query}
-          defaultSessionType={defaultSessionType}
+          defaultSessionType={newSessionTypePreference.selectedSessionType}
           sessionTypeOptions={sessionTypeOptions}
           nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
+          selectedNewSessionType={newSessionTypePreference.selectedSessionType}
+          selectedNewSessionTypeOption={
+            newSessionTypePreference.selectedSessionTypeOption
+          }
           isCreateMenuOpen={isCreateMenuOpen}
           onCreateMenuOpenChange={setIsCreateMenuOpen}
           onCreateSession={createSessionAndOpenIfNeeded}
+          onSelectNewSessionType={
+            newSessionTypePreference.setSelectedSessionType
+          }
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       ) : (
@@ -264,9 +276,16 @@ export function ChatSidebar({
           defaultSessionType={defaultSessionType}
           sessionTypeOptions={sessionTypeOptions}
           nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
+          selectedNewSessionType={newSessionTypePreference.selectedSessionType}
+          selectedNewSessionTypeOption={
+            newSessionTypePreference.selectedSessionTypeOption
+          }
           isCreateMenuOpen={isCreateMenuOpen}
           onCreateMenuOpenChange={setIsCreateMenuOpen}
           onCreateSession={createSessionAndOpenIfNeeded}
+          onSelectNewSessionType={
+            newSessionTypePreference.setSelectedSessionType
+          }
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       )}
@@ -308,7 +327,7 @@ export function ChatSidebar({
           isProjectFirstView={isProjectFirstView}
           groups={groups}
           projectGroups={projectGroups}
-          defaultSessionType={defaultSessionType}
+          defaultSessionType={newSessionTypePreference.selectedSessionType}
           sessionTypeOptions={sessionTypeOptions}
           renderSessionItem={renderSessionItem}
           onCreateSession={createSessionAndOpenIfNeeded}