@nextclaw/ui 0.9.0 → 0.9.2

package/src/components/chat/ncp/ncp-chat-input.manager.ts

@@ -1,6 +1,14 @@
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { SetStateAction } from 'react';
 import type { ThinkingLevel } from '@/api/types';
 import { updateNcpSession } from '@/api/ncp-session';
+import {
+  createChatComposerNodesFromDraft,
+  createInitialChatComposerNodes,
+  deriveChatComposerDraft,
+  deriveSelectedSkillsFromComposer,
+  syncComposerSkills
+} from '@/components/chat/chat-composer-state';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
@@ -36,6 +44,17 @@ export class NcpChatInputManager {
     return next;
   };
 
+  private isSameStringArray = (left: string[], right: string[]): boolean =>
+    left.length === right.length && left.every((value, index) => value === right[index]);
+
+  private syncComposerSnapshot = (nodes: ChatComposerNode[]) => {
+    useChatInputStore.getState().setSnapshot({
+      composerNodes: nodes,
+      draft: deriveChatComposerDraft(nodes),
+      selectedSkills: deriveSelectedSkillsFromComposer(nodes)
+    });
+  };
+
   syncSnapshot = (patch: Partial<ChatInputSnapshot>) => {
     if (!this.hasSnapshotChanges(patch)) {
       return;
@@ -46,8 +65,8 @@ export class NcpChatInputManager {
       Object.prototype.hasOwnProperty.call(patch, 'selectedModel') ||
       Object.prototype.hasOwnProperty.call(patch, 'selectedThinkingLevel')
     ) {
-      const snapshot = useChatInputStore.getState().snapshot;
-      this.reconcileThinkingForModel(snapshot.selectedModel);
+      const { selectedModel } = useChatInputStore.getState().snapshot;
+      this.reconcileThinkingForModel(selectedModel);
     }
   };
 
@@ -57,7 +76,16 @@ export class NcpChatInputManager {
     if (value === prev) {
       return;
     }
-    useChatInputStore.getState().setSnapshot({ draft: value });
+    this.syncComposerSnapshot(createChatComposerNodesFromDraft(value));
+  };
+
+  setComposerNodes = (next: SetStateAction<ChatComposerNode[]>) => {
+    const prev = useChatInputStore.getState().snapshot.composerNodes;
+    const value = this.resolveUpdateValue(prev, next);
+    if (Object.is(value, prev)) {
+      return;
+    }
+    this.syncComposerSnapshot(value);
   };
 
   setPendingSessionType = (next: SetStateAction<string>) => {
@@ -76,13 +104,12 @@ export class NcpChatInputManager {
     if (!message) {
       return;
     }
-    const requestedSkills = inputSnapshot.selectedSkills;
+    const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
     const sessionKey = sessionSnapshot.selectedSessionKey ?? this.getDraftSessionId();
     if (!sessionSnapshot.selectedSessionKey) {
       this.uiManager.goToSession(sessionKey, { replace: true });
     }
-    this.setDraft('');
-    this.setSelectedSkills([]);
+    this.setComposerNodes(createInitialChatComposerNodes());
     await this.streamActionsManager.sendMessage({
       message,
       sessionKey,
@@ -92,7 +119,8 @@ export class NcpChatInputManager {
       thinkingLevel: inputSnapshot.selectedThinkingLevel ?? undefined,
       stopSupported: true,
       requestedSkills,
-      restoreDraftOnError: true
+      restoreDraftOnError: true,
+      composerNodes
     });
   };
 
@@ -129,12 +157,13 @@ export class NcpChatInputManager {
   };
 
   setSelectedSkills = (next: SetStateAction<string[]>) => {
-    const prev = useChatInputStore.getState().snapshot.selectedSkills;
+    const snapshot = useChatInputStore.getState().snapshot;
+    const { selectedSkills: prev } = snapshot;
     const value = this.resolveUpdateValue(prev, next);
-    if (Object.is(value, prev)) {
+    if (this.isSameStringArray(value, prev)) {
       return;
     }
-    useChatInputStore.getState().setSnapshot({ selectedSkills: value });
+    this.syncComposerSnapshot(syncComposerSkills(snapshot.composerNodes, value, snapshot.skillRecords));
   };
 
   selectModel = (value: string) => {
@@ -171,8 +200,9 @@ export class NcpChatInputManager {
   private reconcileThinkingForModel(model: string): void {
     const snapshot = useChatInputStore.getState().snapshot;
     const modelOption = snapshot.modelOptions.find((option) => option.value === model);
-    const nextThinking = this.resolveThinkingForModel(modelOption, snapshot.selectedThinkingLevel);
-    if (nextThinking !== snapshot.selectedThinkingLevel) {
+    const { selectedThinkingLevel } = snapshot;
+    const nextThinking = this.resolveThinkingForModel(modelOption, selectedThinkingLevel);
+    if (nextThinking !== selectedThinkingLevel) {
       useChatInputStore.getState().setSnapshot({ selectedThinkingLevel: nextThinking });
     }
   }

package/src/components/chat/ncp/ncp-chat-page-data.ts

@@ -8,7 +8,6 @@ import {
 } from '@/components/chat/ncp/ncp-session-adapter';
 import { useChatSessionTypeState } from '@/components/chat/useChatSessionTypeState';
 import {
-  resolveSelectedModelValue,
   resolveRecentSessionPreferredModel,
   useSyncSelectedModel
 } from '@/components/chat/chat-page-runtime';
@@ -128,25 +127,13 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
   useSyncSelectedModel({
     modelOptions,
     selectedSessionKey: params.selectedSessionKey,
+    selectedSessionExists: Boolean(selectedSession),
     selectedSessionPreferredModel: selectedSession?.preferredModel,
     fallbackPreferredModel: recentSessionPreferredModel,
     defaultModel: configQuery.data?.agents.defaults.model,
     setSelectedModel: params.setSelectedModel
   });
 
-  const hydratedSessionModel = useMemo(
-    () =>
-      resolveSelectedModelValue({
-        currentSelectedModel: '',
-        modelOptions,
-        selectedSessionPreferredModel: selectedSession?.preferredModel,
-        fallbackPreferredModel: recentSessionPreferredModel,
-        defaultModel: configQuery.data?.agents.defaults.model,
-        preferSessionPreferredModel: true
-      }),
-    [configQuery.data?.agents.defaults.model, modelOptions, recentSessionPreferredModel, selectedSession?.preferredModel]
-  );
-
   return {
     configQuery,
     configMetaQuery,
@@ -159,7 +146,6 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
     sessions,
     skillRecords,
     selectedSession,
-    hydratedSessionModel,
     selectedSessionThinkingLevel,
     ...sessionTypeState
   };

package/src/components/chat/presenter/chat-presenter-context.tsx

@@ -1,3 +1,4 @@
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 import type { SetStateAction } from 'react';
@@ -11,6 +12,7 @@ import type { ThinkingLevel } from '@/api/types';
 export type ChatInputManagerLike = {
   syncSnapshot: (patch: Record<string, unknown>) => void;
   setDraft: (next: SetStateAction<string>) => void;
+  setComposerNodes: (next: SetStateAction<ChatComposerNode[]>) => void;
   setPendingSessionType: (next: SetStateAction<string>) => void;
   send: () => Promise<void>;
   stop: () => Promise<void>;

package/src/components/chat/stores/chat-input.store.ts

@@ -1,10 +1,13 @@
 import { create } from 'zustand';
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { MarketplaceInstalledRecord } from '@/api/types';
 import type { ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
+import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-state';
 
 export type ChatInputSnapshot = {
   isProviderStateResolved: boolean;
+  composerNodes: ChatComposerNode[];
   draft: string;
   pendingSessionType: string;
   defaultSessionType: string;
@@ -33,6 +36,7 @@ type ChatInputStore = {
 
 const initialSnapshot: ChatInputSnapshot = {
   isProviderStateResolved: false,
+  composerNodes: createInitialChatComposerNodes(),
   draft: '',
   pendingSessionType: 'native',
   defaultSessionType: 'native',