@nextclaw/ui 0.10.0 → 0.10.1

package/src/components/chat/ChatSidebar.tsx

@@ -5,7 +5,7 @@ import { BrandHeader } from '@/components/common/BrandHeader';
 import { StatusBadge } from '@/components/common/StatusBadge';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
 import { useChatSessionLabelService } from '@/components/chat/chat-session-label.service';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
@@ -19,8 +19,9 @@ import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { useDocBrowser } from '@/components/doc-browser';
+import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
 import { useUiStore } from '@/stores/ui.store';
-import { NavLink, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import {
   AlarmClock,
   BookOpen,
@@ -284,28 +285,14 @@ export function ChatSidebar() {
       <div className="px-3 pb-2">
         <ul className="space-y-0.5">
           {navItems.map((item) => {
-            const Icon = item.icon;
             return (
               <li key={item.target}>
-                <NavLink
+                <SidebarNavLinkItem
                   to={item.target}
-                  className={({ isActive }) => cn(
-                    'group w-full flex items-center gap-3 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150',
-                    isActive
-                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                      : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-                  )}
-                >
-                  {({ isActive }) => (
-                    <>
-                      <Icon className={cn(
-                        'h-4 w-4 transition-colors',
-                        isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
-                      )} />
-                      <span>{item.label()}</span>
-                    </>
-                  )}
-                </NavLink>
+                  label={item.label()}
+                  icon={item.icon}
+                  density="compact"
+                />
               </li>
             );
           })}
@@ -363,57 +350,42 @@ export function ChatSidebar() {
       </div>
 
       <div className="px-3 py-3 border-t border-gray-200/60 space-y-0.5">
-        <NavLink
+        <SidebarNavLinkItem
           to="/settings"
-          className={({ isActive }) => cn(
-            'group w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150',
-            isActive
-              ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-              : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-          )}
-        >
-          {({ isActive }) => (
-            <>
-              <Settings className={cn('h-4 w-4 transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
-              <span>{t('settings')}</span>
-            </>
-          )}
-        </NavLink>
-        <button
+          label={t('settings')}
+          icon={Settings}
+          density="compact"
+        />
+        <SidebarActionItem
           onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-          className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150 text-gray-600 hover:bg-gray-200/60 hover:text-gray-800"
+          icon={BookOpen}
+          label={t('docBrowserHelp')}
+          density="compact"
+        />
+        <SidebarSelectItem
+          value={theme}
+          onValueChange={(value) => setTheme(value as UiTheme)}
+          icon={Palette}
+          label={t('theme')}
+          valueLabel={currentThemeLabel}
+          density="compact"
         >
-          <BookOpen className="h-4 w-4 text-gray-400" />
-          <span>{t('docBrowserHelp')}</span>
-        </button>
-        <Select value={theme} onValueChange={(value) => setTheme(value as UiTheme)}>
-          <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
-            <div className="flex items-center gap-2.5 min-w-0">
-              <Palette className="h-4 w-4 text-gray-400" />
-              <span>{t('theme')}</span>
-            </div>
-            <span className="ml-auto text-[11px] text-gray-500">{currentThemeLabel}</span>
-          </SelectTrigger>
-          <SelectContent>
-            {THEME_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{t(option.labelKey)}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
-          <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
-            <div className="flex items-center gap-2.5 min-w-0">
-              <Languages className="h-4 w-4 text-gray-400" />
-              <span>{t('language')}</span>
-            </div>
-            <span className="ml-auto text-[11px] text-gray-500">{currentLanguageLabel}</span>
-          </SelectTrigger>
-          <SelectContent>
-            {LANGUAGE_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{option.label}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          {THEME_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value} className="text-xs">{t(option.labelKey)}</SelectItem>
+          ))}
+        </SidebarSelectItem>
+        <SidebarSelectItem
+          value={language}
+          onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
+          icon={Languages}
+          label={t('language')}
+          valueLabel={currentLanguageLabel}
+          density="compact"
+        >
+          {LANGUAGE_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value} className="text-xs">{option.label}</SelectItem>
+          ))}
+        </SidebarSelectItem>
       </div>
     </aside>
   );

package/src/components/chat/adapters/chat-input-bar.adapter.test.ts

@@ -1,4 +1,9 @@
-import { buildChatSlashItems, buildSelectedSkillItems, buildSkillPickerModel } from '@/components/chat/adapters/chat-input-bar.adapter';
+import {
+  buildChatSlashItems,
+  buildModelToolbarSelect,
+  buildSelectedSkillItems,
+  buildSkillPickerModel
+} from '@/components/chat/adapters/chat-input-bar.adapter';
 import type { ChatSkillRecord } from '@/components/chat/adapters/chat-input-bar.adapter';
 
 function createSkillRecord(partial: Partial<ChatSkillRecord>): ChatSkillRecord {
@@ -78,3 +83,29 @@ describe('buildSkillPickerModel', () => {
     });
   });
 });
+
+describe('buildModelToolbarSelect', () => {
+  it('falls back to the first available option when the selected model is missing', () => {
+    const onValueChange = vi.fn();
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'minimax/MiniMax-M2.7',
+          modelLabel: 'MiniMax-M2.7',
+          providerLabel: 'MiniMax'
+        }
+      ],
+      selectedModel: 'dashscope/qwen3-coder-next',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onValueChange,
+      texts: {
+        modelSelectPlaceholder: 'Select model',
+        modelNoOptionsLabel: 'No models'
+      }
+    });
+
+    expect(select.value).toBe('minimax/MiniMax-M2.7');
+    expect(select.selectedLabel).toBe('MiniMax/MiniMax-M2.7');
+  });
+});

package/src/components/chat/adapters/chat-input-bar.adapter.ts

@@ -238,13 +238,16 @@ export function buildModelToolbarSelect(params: {
   texts: Pick<ChatInputBarAdapterTexts, 'modelSelectPlaceholder' | 'modelNoOptionsLabel'>;
 }): ChatToolbarSelect {
   const selectedModelOption = params.modelOptions.find((option) => option.value === params.selectedModel);
+  const fallbackModelOption = params.modelOptions[0];
+  const resolvedModelOption = selectedModelOption ?? fallbackModelOption;
+  const resolvedValue = params.hasModelOptions ? resolvedModelOption?.value : undefined;
 
   return {
     key: 'model',
-    value: params.hasModelOptions ? params.selectedModel : undefined,
+    value: resolvedValue,
     placeholder: params.texts.modelSelectPlaceholder,
-    selectedLabel: selectedModelOption
-      ? `${selectedModelOption.providerLabel}/${selectedModelOption.modelLabel}`
+    selectedLabel: resolvedModelOption
+      ? `${resolvedModelOption.providerLabel}/${resolvedModelOption.modelLabel}`
       : undefined,
     icon: 'sparkles',
     options: params.modelOptions.map((option) => ({

package/src/components/chat/adapters/chat-message.adapter.test.ts

@@ -6,183 +6,161 @@ function toSource(uiMessages: UiMessage[]): ChatMessageSource[] {
   return uiMessages as unknown as ChatMessageSource[];
 }
 
-describe("adaptChatMessages", () => {
-  it("maps markdown, reasoning, and tool parts into UI view models", () => {
-    const messages: UiMessage[] = [
-      {
-        id: "assistant-1",
-        role: "assistant",
-        meta: {
-          status: "final",
-          timestamp: "2026-03-17T10:00:00.000Z",
-        },
-        parts: [
-          { type: "text", text: "hello world" },
-          {
-            type: "reasoning",
-            reasoning: "internal reasoning",
-            details: [],
-          },
-          {
-            type: "tool-invocation",
-            toolInvocation: {
-              status: ToolInvocationStatus.RESULT,
-              toolCallId: "call-1",
-              toolName: "web_search",
-              args: '{"q":"hello"}',
-              result: { ok: true },
-            },
-          },
-        ],
-      },
-    ];
+const defaultTexts = {
+  roleLabels: {
+    user: "You",
+    assistant: "Assistant",
+    tool: "Tool",
+    system: "System",
+    fallback: "Message",
+  },
+  reasoningLabel: "Reasoning",
+  toolCallLabel: "Tool Call",
+  toolResultLabel: "Tool Result",
+  toolNoOutputLabel: "No output",
+  toolOutputLabel: "View Output",
+  imageAttachmentLabel: "Image attachment",
+  fileAttachmentLabel: "File attachment",
+  unknownPartLabel: "Unknown Part",
+};
 
-    const adapted = adaptChatMessages({
-      uiMessages: toSource(messages),
-      formatTimestamp: (value) => `formatted:${value}`,
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
-        },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
-
-    expect(adapted).toHaveLength(1);
-    expect(adapted[0]?.roleLabel).toBe("Assistant");
-    expect(adapted[0]?.timestampLabel).toBe(
-      "formatted:2026-03-17T10:00:00.000Z",
-    );
-    expect(adapted[0]?.parts.map((part) => part.type)).toEqual([
-      "markdown",
-      "reasoning",
-      "tool-card",
-    ]);
-    expect(adapted[0]?.parts[1]).toMatchObject({
-      type: "reasoning",
-      label: "Reasoning",
-      text: "internal reasoning",
-    });
-    expect(adapted[0]?.parts[2]).toMatchObject({
-      type: "tool-card",
-      card: {
-        titleLabel: "Tool Result",
-        outputLabel: "View Output",
-      },
-    });
+function adapt(uiMessages: ChatMessageSource[]) {
+  return adaptChatMessages({
+    uiMessages,
+    formatTimestamp: (value) => `formatted:${value}`,
+    texts: defaultTexts,
   });
+}
 
-  it("maps non-standard roles back to the generic message role", () => {
-    const adapted = adaptChatMessages({
-      uiMessages: [
+it("maps markdown, reasoning, and tool parts into UI view models", () => {
+  const messages: UiMessage[] = [
+    {
+      id: "assistant-1",
+      role: "assistant",
+      meta: {
+        status: "final",
+        timestamp: "2026-03-17T10:00:00.000Z",
+      },
+      parts: [
+        { type: "text", text: "hello world" },
         {
-          id: "data-1",
-          role: "data",
-          parts: [{ type: "text", text: "payload" }],
+          type: "reasoning",
+          reasoning: "internal reasoning",
+          details: [],
         },
-      ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => "formatted",
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "call-1",
+            toolName: "web_search",
+            args: '{"q":"hello"}',
+            result: { ok: true },
+          },
         },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
+      ],
+    },
+  ];
+
+  const adapted = adapt(toSource(messages));
+
+  expect(adapted).toHaveLength(1);
+  expect(adapted[0]?.roleLabel).toBe("Assistant");
+  expect(adapted[0]?.timestampLabel).toBe(
+    "formatted:2026-03-17T10:00:00.000Z",
+  );
+  expect(adapted[0]?.parts.map((part) => part.type)).toEqual([
+    "markdown",
+    "reasoning",
+    "tool-card",
+  ]);
+  expect(adapted[0]?.parts[1]).toMatchObject({
+    type: "reasoning",
+    label: "Reasoning",
+    text: "internal reasoning",
+  });
+  expect(adapted[0]?.parts[2]).toMatchObject({
+    type: "tool-card",
+    card: {
+      titleLabel: "Tool Result",
+      outputLabel: "View Output",
+    },
+  });
+});
+
+it("maps non-standard roles back to the generic message role", () => {
+  const adapted = adapt([
+    {
+      id: "data-1",
+      role: "data",
+      parts: [{ type: "text", text: "payload" }],
+    },
+  ] as unknown as ChatMessageSource[]);
 
-    expect(adapted[0]?.role).toBe("message");
-    expect(adapted[0]?.roleLabel).toBe("Message");
+  expect(adapted[0]?.role).toBe("message");
+  expect(adapted[0]?.roleLabel).toBe("Message");
+});
+
+it("maps unknown parts into a visible fallback part", () => {
+  const adapted = adapt([
+    {
+      id: "x-1",
+      role: "assistant",
+      parts: [{ type: "step-start", value: "x" }],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "unknown",
+    rawType: "step-start",
+    label: "Unknown Part",
   });
+});
 
-  it("maps unknown parts into a visible fallback part", () => {
-    const adapted = adaptChatMessages({
-      uiMessages: [
-        {
-          id: "x-1",
-          role: "assistant",
-          parts: [{ type: "step-start", value: "x" }],
-        },
-      ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => "formatted",
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
-        },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
+it("drops empty and zero-width text parts during adaptation", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-mixed",
+      role: "assistant",
+      parts: [
+        { type: "text", text: "   " },
+        { type: "text", text: "\u200B\u200B" },
+        { type: "text", text: "\u200Bhello\u200B" },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
 
-    expect(adapted[0]?.parts[0]).toMatchObject({
-      type: "unknown",
-      rawType: "step-start",
-      label: "Unknown Part",
-    });
+  expect(adapted).toHaveLength(1);
+  expect(adapted[0]?.id).toBe("assistant-mixed");
+  expect(adapted[0]?.parts).toHaveLength(1);
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "markdown",
+    text: "\u200Bhello\u200B",
   });
+});
 
-  it("drops empty and zero-width text parts during adaptation", () => {
-    const adapted = adaptChatMessages({
-      uiMessages: [
+it("maps file parts into previewable attachment view models", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-file",
+      role: "assistant",
+      parts: [
         {
-          id: "assistant-mixed",
-          role: "assistant",
-          parts: [
-            { type: "text", text: "   " },
-            { type: "text", text: "\u200B\u200B" },
-            { type: "text", text: "\u200Bhello\u200B" },
-          ],
-        },
-      ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => "formatted",
-      texts: {
-        roleLabels: {
-          user: "You",
-          assistant: "Assistant",
-          tool: "Tool",
-          system: "System",
-          fallback: "Message",
+          type: "file",
+          mimeType: "image/png",
+          data: "ZmFrZS1pbWFnZQ==",
         },
-        reasoningLabel: "Reasoning",
-        toolCallLabel: "Tool Call",
-        toolResultLabel: "Tool Result",
-        toolNoOutputLabel: "No output",
-        toolOutputLabel: "View Output",
-        unknownPartLabel: "Unknown Part",
-      },
-    });
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
 
-    expect(adapted).toHaveLength(1);
-    expect(adapted[0]?.id).toBe("assistant-mixed");
-    expect(adapted[0]?.parts).toHaveLength(1);
-    expect(adapted[0]?.parts[0]).toMatchObject({
-      type: "markdown",
-      text: "\u200Bhello\u200B",
-    });
+  expect(adapted[0]?.parts[0]).toEqual({
+    type: "file",
+    file: {
+      label: "Image attachment",
+      mimeType: "image/png",
+      dataUrl: "data:image/png;base64,ZmFrZS1pbWFnZQ==",
+      isImage: true,
+    },
   });
 });

package/src/components/chat/adapters/chat-message.adapter.ts

@@ -14,6 +14,12 @@ export type ChatMessagePartSource =
       type: 'text';
       text: string;
     }
+  | {
+      type: 'file';
+      mimeType: string;
+      data: string;
+      name?: string;
+    }
   | {
       type: 'reasoning';
       reasoning: string;
@@ -58,6 +64,8 @@ export type ChatMessageAdapterTexts = {
   toolResultLabel: string;
   toolNoOutputLabel: string;
   toolOutputLabel: string;
+  imageAttachmentLabel: string;
+  fileAttachmentLabel: string;
   unknownPartLabel: string;
 };
 
@@ -77,6 +85,16 @@ function isReasoningPart(
   return part.type === 'reasoning' && typeof part.reasoning === 'string';
 }
 
+function isFilePart(
+  part: ChatMessagePartSource
+): part is Extract<ChatMessagePartSource, { type: 'file' }> {
+  return (
+    part.type === 'file' &&
+    typeof part.mimeType === 'string' &&
+    typeof part.data === 'string'
+  );
+}
+
 function isToolInvocationPart(
   part: ChatMessagePartSource
 ): part is Extract<ChatMessagePartSource, { type: 'tool-invocation' }> {
@@ -182,6 +200,23 @@ export function adaptChatMessages(params: {
             label: params.texts.reasoningLabel
           };
         }
+        if (isFilePart(part)) {
+          const isImage = part.mimeType.startsWith('image/');
+          return {
+            type: 'file' as const,
+            file: {
+              label:
+                typeof part.name === 'string' && part.name.trim()
+                  ? part.name.trim()
+                  : isImage
+                    ? params.texts.imageAttachmentLabel
+                    : params.texts.fileAttachmentLabel,
+              mimeType: part.mimeType,
+              dataUrl: `data:${part.mimeType};base64,${part.data}`,
+              isImage
+            }
+          };
+        }
         if (isToolInvocationPart(part)) {
           const invocation = part.toolInvocation;
           const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);

package/src/components/chat/chat-composer-state.ts

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import {
   createChatComposerTokenNode,
   createChatComposerNodesFromText,
@@ -25,6 +26,10 @@ export function deriveSelectedSkillsFromComposer(nodes: ChatComposerNode[]): str
   return extractChatComposerTokenKeys(nodes, 'skill');
 }
 
+export function deriveSelectedAttachmentIdsFromComposer(nodes: ChatComposerNode[]): string[] {
+  return extractChatComposerTokenKeys(nodes, 'file');
+}
+
 export function syncComposerSkills(
   nodes: ChatComposerNode[],
   nextSkills: string[],
@@ -51,3 +56,36 @@ export function syncComposerSkills(
     ? prunedNodes
     : normalizeChatComposerNodes([...prunedNodes, ...appendedNodes]);
 }
+
+export function syncComposerAttachments(
+  nodes: ChatComposerNode[],
+  attachments: readonly NcpDraftAttachment[]
+): ChatComposerNode[] {
+  const nextAttachmentIds = new Set(attachments.map((attachment) => attachment.id));
+  const prunedNodes = removeChatComposerTokenNodes(
+    nodes,
+    (node) => node.tokenKind === 'file' && !nextAttachmentIds.has(node.tokenKey)
+  );
+  const existingAttachmentIds = extractChatComposerTokenKeys(prunedNodes, 'file');
+  const appendedNodes = attachments
+    .filter((attachment) => !existingAttachmentIds.includes(attachment.id))
+    .map((attachment) =>
+      createChatComposerTokenNode({
+        tokenKind: 'file',
+        tokenKey: attachment.id,
+        label: attachment.name
+      })
+    );
+
+  return appendedNodes.length === 0
+    ? prunedNodes
+    : normalizeChatComposerNodes([...prunedNodes, ...appendedNodes]);
+}
+
+export function pruneComposerAttachments(
+  nodes: ChatComposerNode[],
+  attachments: readonly NcpDraftAttachment[]
+): NcpDraftAttachment[] {
+  const selectedIds = new Set(deriveSelectedAttachmentIdsFromComposer(nodes));
+  return attachments.filter((attachment) => selectedIds.has(attachment.id));
+}

package/src/components/chat/chat-stream/types.ts

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import type {
   ChatRunView,
@@ -18,6 +19,7 @@ export type SendMessageParams = {
   model?: string;
   thinkingLevel?: ThinkingLevel;
   requestedSkills?: string[];
+  attachments?: NcpDraftAttachment[];
   stopSupported?: boolean;
   stopReason?: string;
   restoreDraftOnError?: boolean;