@nextclaw/ui 0.9.0 → 0.9.1

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -1,18 +1,15 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { ChatInputBar } from '@nextclaw/agent-chat-ui';
 import {
   buildChatSlashItems,
   buildModelStateHint,
   buildModelToolbarSelect,
-  buildSelectedSkillItems,
   buildSkillPickerModel,
   buildThinkingToolbarSelect,
-  resolveSlashQuery,
   type ChatModelRecord,
   type ChatSkillRecord,
   type ChatThinkingLevel
 } from '@/components/chat/adapters/chat-input-bar.adapter';
-import { useChatInputBarController } from '@/components/chat/chat-input/chat-input-bar.controller';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
@@ -72,6 +69,7 @@ export function ChatInputBarContainer() {
   const presenter = usePresenter();
   const { language } = useI18n();
   const snapshot = useChatInputStore((state) => state.snapshot);
+  const [slashQuery, setSlashQuery] = useState<string | null>(null);
 
   const officialSkillBadgeLabel = useMemo(() => {
     // Keep memo reactive to locale switches even though `t` is imported as a stable function.
@@ -110,31 +108,11 @@ export function ChatInputBarContainer() {
       ? t('chatInputPlaceholder')
       : t('chatModelNoOptions');
 
-  const slashQuery = resolveSlashQuery(snapshot.draft);
   const slashItems = useMemo(
     () => buildChatSlashItems(skillRecords, slashQuery ?? '', slashTexts),
     [slashQuery, skillRecords, slashTexts]
   );
 
-  const controller = useChatInputBarController({
-    isSlashMode: slashQuery !== null,
-    slashItems,
-    isSlashLoading: snapshot.isSkillsLoading,
-    onSelectSlashItem: (item) => {
-      if (!item.value) {
-        return;
-      }
-      if (!snapshot.selectedSkills.includes(item.value)) {
-        presenter.chatInputManager.selectSkills([...snapshot.selectedSkills, item.value]);
-      }
-      presenter.chatInputManager.setDraft('');
-    },
-    onSend: presenter.chatInputManager.send,
-    onStop: presenter.chatInputManager.stop,
-    isSending: snapshot.isSending,
-    canStopGeneration: snapshot.canStopGeneration
-  });
-
   const selectedModelOption = modelRecords.find((option) => option.value === snapshot.selectedModel);
   const selectedModelThinkingCapability = selectedModelOption?.thinkingCapability;
   const thinkingSupportedLevels = selectedModelThinkingCapability?.supported ?? [];
@@ -183,27 +161,23 @@ export function ChatInputBarContainer() {
 
   return (
     <ChatInputBar
-      value={snapshot.draft}
-      placeholder={textareaPlaceholder}
-      disabled={inputDisabled}
-      onValueChange={presenter.chatInputManager.setDraft}
-      onKeyDown={controller.onTextareaKeyDown}
+      composer={{
+        nodes: snapshot.composerNodes,
+        placeholder: textareaPlaceholder,
+        disabled: inputDisabled,
+        onNodesChange: presenter.chatInputManager.setComposerNodes,
+        onSlashQueryChange: setSlashQuery
+      }}
       slashMenu={{
-        isOpen: controller.isSlashPanelOpen,
         isLoading: snapshot.isSkillsLoading,
         items: slashItems,
-        activeIndex: controller.activeSlashIndex,
-        activeItem: controller.activeSlashItem,
         texts: {
           slashLoadingLabel: t('chatSlashLoading'),
           slashSectionLabel: t('chatSlashSectionSkills'),
           slashEmptyLabel: t('chatSlashNoResult'),
           slashHintLabel: t('chatSlashHint'),
           slashSkillHintLabel: t('chatSlashSkillHint')
-        },
-        onSelectItem: controller.onSelectSlashItem,
-        onOpenChange: controller.onSlashPanelOpenChange,
-        onSetActiveIndex: controller.onSetActiveSlashIndex
+        }
       }}
       hint={buildModelStateHint({
         isModelOptionsLoading,
@@ -214,17 +188,14 @@ export function ChatInputBarContainer() {
           configureProviderLabel: t('chatGoConfigureProvider')
         }
       })}
-      selectedItems={{
-        items: buildSelectedSkillItems(snapshot.selectedSkills, skillRecords),
-        onRemove: (key) => presenter.chatInputManager.selectSkills(snapshot.selectedSkills.filter((skill) => skill !== key))
-      }}
       toolbar={{
         selects: toolbarSelects,
         accessories: [
           {
             key: 'attach',
-            label: t('chatInputAttachComingSoon'),
+            label: t('chatInputAttach'),
             icon: 'paperclip',
+            iconOnly: true,
             disabled: true,
             tooltip: t('chatInputAttachComingSoon')
           }

package/src/components/chat/legacy/LegacyChatPage.tsx

@@ -75,6 +75,7 @@ export function LegacyChatPage({ view }: ChatPageProps) {
       selectedSessionKeyRef,
       setSelectedSessionKey: presenter.chatSessionListManager.setSelectedSessionKey,
       setDraft: presenter.chatInputManager.setDraft,
+      setComposerNodes: presenter.chatInputManager.setComposerNodes,
       refetchSessions: sessionsQuery.refetch,
       refetchHistory: historyQuery.refetch
     },

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

@@ -1,3 +1,11 @@
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import {
+  createInitialChatComposerNodes,
+  createChatComposerNodesFromDraft,
+  deriveChatComposerDraft,
+  deriveSelectedSkillsFromComposer,
+  syncComposerSkills
+} from '@/components/chat/chat-composer-state';
 import { updateSession } from '@/api/config';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { buildNewSessionKey } from '@/components/chat/chat-session-route';
@@ -36,6 +44,17 @@ export class ChatInputManager {
     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 ChatInputManager {
       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 ChatInputManager {
     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,14 +104,13 @@ export class ChatInputManager {
     if (!message) {
       return;
     }
-    const requestedSkills = inputSnapshot.selectedSkills;
+    const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
     const hasSelectedSession = Boolean(sessionSnapshot.selectedSessionKey);
     const sessionKey = sessionSnapshot.selectedSessionKey ?? buildNewSessionKey(sessionSnapshot.selectedAgentId);
     if (!hasSelectedSession) {
       this.uiManager.goToSession(sessionKey, { replace: true });
     }
-    this.setDraft('');
-    this.setSelectedSkills([]);
+    this.setComposerNodes(createInitialChatComposerNodes());
     await this.streamActionsManager.sendMessage({
       message,
       sessionKey,
@@ -94,7 +121,8 @@ export class ChatInputManager {
       stopSupported: inputSnapshot.stopSupported,
       stopReason: inputSnapshot.stopReason,
       requestedSkills,
-      restoreDraftOnError: true
+      restoreDraftOnError: true,
+      composerNodes
     });
   };
 
@@ -132,12 +160,13 @@ export class ChatInputManager {
   };
 
   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) => {
@@ -174,15 +203,16 @@ export class ChatInputManager {
   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 });
     }
   }
 
   private syncRemoteSessionType = async (normalizedType: string) => {
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;
-    const selectedSessionKey = sessionSnapshot.selectedSessionKey;
+    const { selectedSessionKey } = sessionSnapshot;
     if (!selectedSessionKey) {
       return;
     }

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -212,9 +212,17 @@ export function NcpChatPage({ view }: ChatPageProps) {
           await sessionsQuery.refetch();
         } catch (error) {
           if (payload.restoreDraftOnError) {
-            presenter.chatInputManager.setDraft((currentDraft) =>
-              currentDraft.trim().length === 0 ? payload.message : currentDraft
-            );
+            if (payload.composerNodes && payload.composerNodes.length > 0) {
+              presenter.chatInputManager.setComposerNodes((currentNodes) =>
+                currentNodes.length === 1 && currentNodes[0]?.type === 'text' && currentNodes[0].text.length === 0
+                  ? payload.composerNodes ?? currentNodes
+                  : currentNodes
+              );
+            } else {
+              presenter.chatInputManager.setDraft((currentDraft) =>
+                currentDraft.trim().length === 0 ? payload.message : currentDraft
+              );
+            }
           }
           throw error;
         }

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/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',