@nextclaw/ui 0.15.5 → 0.15.7

package/src/features/chat/features/input/input-surface-plugins/slash-command-plugin.utils.ts

@@ -11,7 +11,7 @@ import type { ChatInputBarAdapterTexts } from '@/features/chat/types/chat-input-
 import {
   buildPanelAppInputSurfaceItems,
   type PanelAppInputSurfaceItemTexts,
-} from './panel-app-reference-plugin.utils';
+} from './context-reference-plugin.utils';
 import {
   resolveInputSurfaceMatchTier,
   scoreInputSurfaceSearchCandidate,
@@ -69,6 +69,7 @@ function buildSlashCommandItems(params: {
     })
     .map(({ command }) => ({
       key: `command:${command.key}`,
+      icon: 'command',
       title: command.title,
       subtitle: params.texts.commandSubtitle,
       description: command.description,
@@ -103,6 +104,7 @@ function buildSlashSkillItems(params: {
     [...data.recentSkillValues],
   ).map((item) => ({
     ...item,
+    icon: 'skill',
     hintLabel: skillHintLabel,
     sectionKey: item.sectionKey
       ? `${SLASH_SKILL_SECTION_KEY}:${item.sectionKey}`
@@ -125,6 +127,7 @@ function buildSlashPanelAppItems(params: {
     texts: params.itemTexts,
   }).map((item) => ({
     ...item,
+    icon: 'panel-app',
     hintLabel: params.panelAppHintLabel,
     sectionKey: SLASH_PANEL_APP_SECTION_KEY,
     sectionLabel: params.panelAppSectionLabel,

package/src/features/chat/features/input/utils/__tests__/chat-composer-state.utils.test.ts

@@ -89,6 +89,32 @@ describe('deriveNcpMessagePartsFromComposer', () => {
     ]);
   });
 
+  it('serializes workspace references without turning them into uploaded file parts', () => {
+    expect(
+      deriveNcpMessagePartsFromComposer(
+        [
+          createChatComposerTokenNode({
+            tokenKind: 'workspace_file',
+            tokenKey: 'src/file name.ts',
+            label: 'file name.ts',
+          }),
+          createChatComposerTextNode(' and '),
+          createChatComposerTokenNode({
+            tokenKind: 'workspace_directory',
+            tokenKey: 'docs/设计',
+            label: '设计',
+          }),
+        ],
+        [],
+      ),
+    ).toEqual([
+      {
+        type: 'text',
+        text: '@file:src%2Ffile%20name.ts and @folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+  });
+
   it('preserves uploaded attachment references when the attachment has a server uri', () => {
     const parts = deriveNcpMessagePartsFromComposer(
       [

package/src/features/chat/features/input/utils/__tests__/chat-inline-token.utils.test.ts

@@ -1,16 +1,17 @@
 import { createChatComposerTextNode, createChatComposerTokenNode } from '@nextclaw/agent-chat-ui';
 import {
   buildInlineTokensFromTextProtocol,
-  buildInlineSkillTokensFromComposer,
-  CHAT_UI_INLINE_TOKENS_METADATA_KEY,
+  buildInlineTokensFromComposer,
+  CHAT_INLINE_TOKENS_METADATA_KEY,
   readInlineTokensFromMetadata,
-  resolveInlineTokensForText
+  resolveInlineTokensForText,
+  resolveWorkspaceReferencePath,
 } from '@/features/chat/features/input/utils/chat-inline-token.utils';
 
 describe('chat-inline-token utils', () => {
   it('builds ordered inline skill tokens from composer nodes', () => {
     expect(
-      buildInlineSkillTokensFromComposer([
+      buildInlineTokensFromComposer([
         createChatComposerTextNode('before '),
         createChatComposerTokenNode({
           tokenKind: 'skill',
@@ -42,7 +43,7 @@ describe('chat-inline-token utils', () => {
   it('reads generic inline token metadata safely', () => {
     expect(
       readInlineTokensFromMetadata({
-        [CHAT_UI_INLINE_TOKENS_METADATA_KEY]: [
+        [CHAT_INLINE_TOKENS_METADATA_KEY]: [
           {
             kind: 'skill',
             key: 'weather',
@@ -97,4 +98,65 @@ describe('chat-inline-token utils', () => {
       }
     ]);
   });
+
+  it('serializes and parses workspace file and directory references', () => {
+    expect(
+      buildInlineTokensFromComposer([
+        createChatComposerTokenNode({
+          tokenKind: 'workspace_file',
+          tokenKey: 'src/file name.ts',
+          label: 'file name.ts',
+        }),
+        createChatComposerTokenNode({
+          tokenKind: 'workspace_directory',
+          tokenKey: 'docs/设计',
+          label: '设计',
+        }),
+      ]),
+    ).toEqual([
+      {
+        kind: 'workspace_file',
+        key: 'src/file name.ts',
+        label: 'file name.ts',
+        rawText: '@file:src%2Ffile%20name.ts',
+      },
+      {
+        kind: 'workspace_directory',
+        key: 'docs/设计',
+        label: '设计',
+        rawText: '@folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+    expect(
+      buildInlineTokensFromTextProtocol('review @file:src%2Ffile%20name.ts and @folder:docs%2F%E8%AE%BE%E8%AE%A1'),
+    ).toEqual([
+      {
+        kind: 'workspace_file',
+        key: 'src/file name.ts',
+        label: 'file name.ts',
+        rawText: '@file:src%2Ffile%20name.ts',
+      },
+      {
+        kind: 'workspace_directory',
+        key: 'docs/设计',
+        label: '设计',
+        rawText: '@folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+  });
+
+  it('resolves workspace token paths inside POSIX and Windows project roots', () => {
+    expect(resolveWorkspaceReferencePath({
+      projectRoot: '/tmp/project/',
+      relativePath: 'docs/guide.md',
+    })).toBe('/tmp/project/docs/guide.md');
+    expect(resolveWorkspaceReferencePath({
+      projectRoot: 'C:\\workspace\\nextclaw\\',
+      relativePath: 'docs/guide.md',
+    })).toBe('C:\\workspace\\nextclaw\\docs\\guide.md');
+    expect(resolveWorkspaceReferencePath({
+      projectRoot: '/tmp/project',
+      relativePath: '../secret.txt',
+    })).toBeNull();
+  });
 });

package/src/features/chat/features/input/utils/chat-composer-state.utils.ts

@@ -10,9 +10,7 @@ import {
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpMessagePart } from '@nextclaw/ncp';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-
-const CHAT_SKILL_TOKEN_PREFIX = '$';
-const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
+import { serializeChatComposerTokenText } from './chat-composer-token-protocol.utils';
 
 function appendTextPart(parts: NcpMessagePart[], text: string): NcpMessagePart[] {
   if (text.length === 0) {
@@ -110,13 +108,9 @@ export function deriveNcpMessagePartsFromComposer(
       continue;
     }
 
-    if (node.tokenKind === 'skill') {
-      parts = appendTextPart(parts, `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`);
-      continue;
-    }
-
-    if (node.tokenKind === 'panel_app') {
-      parts = appendTextPart(parts, `${CHAT_PANEL_APP_TOKEN_PREFIX}${node.tokenKey}`);
+    const tokenText = serializeChatComposerTokenText(node);
+    if (tokenText) {
+      parts = appendTextPart(parts, tokenText);
       continue;
     }
 

package/src/features/chat/features/input/utils/chat-composer-token-protocol.utils.ts

@@ -0,0 +1,29 @@
+import {
+  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_FILE_TOKEN_KIND,
+} from '@nextclaw/shared';
+
+const CHAT_SKILL_TOKEN_PREFIX = '$';
+const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
+const CHAT_WORKSPACE_FILE_TOKEN_PREFIX = '@file:';
+const CHAT_WORKSPACE_DIRECTORY_TOKEN_PREFIX = '@folder:';
+
+export function serializeChatComposerTokenText(params: {
+  tokenKey: string;
+  tokenKind: string;
+}): string | null {
+  const { tokenKey, tokenKind } = params;
+  if (tokenKind === 'skill') {
+    return `${CHAT_SKILL_TOKEN_PREFIX}${tokenKey}`;
+  }
+  if (tokenKind === 'panel_app') {
+    return `${CHAT_PANEL_APP_TOKEN_PREFIX}${tokenKey}`;
+  }
+  if (tokenKind === CHAT_WORKSPACE_FILE_TOKEN_KIND) {
+    return `${CHAT_WORKSPACE_FILE_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
+  }
+  if (tokenKind === CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND) {
+    return `${CHAT_WORKSPACE_DIRECTORY_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
+  }
+  return null;
+}

package/src/features/chat/features/input/utils/chat-inline-token.utils.ts

@@ -1,11 +1,36 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import {
+  CHAT_INLINE_TOKENS_METADATA_KEY,
+  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_FILE_TOKEN_KIND,
+  type ChatInlineTokenMetadata,
+} from '@nextclaw/shared';
+import { serializeChatComposerTokenText } from './chat-composer-token-protocol.utils';
 
-export const CHAT_UI_INLINE_TOKENS_METADATA_KEY = 'ui_inline_tokens';
-const CHAT_SKILL_TOKEN_PREFIX = '$';
+export { CHAT_INLINE_TOKENS_METADATA_KEY };
 const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
 const CHAT_PANEL_APP_TOKEN_PATTERN = /@panel-app:([A-Za-z0-9_-]+)/g;
+const CHAT_WORKSPACE_FILE_TOKEN_PATTERN = /@file:([^\s]+)/g;
+const CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN = /@folder:([^\s]+)/g;
 
-export type ChatInlineTokenSource = { kind: string; key: string; label: string; rawText: string };
+export type ChatInlineTokenSource = ChatInlineTokenMetadata;
+
+export function resolveWorkspaceReferencePath(params: {
+  projectRoot: string | null | undefined;
+  relativePath: string;
+}): string | null {
+  const projectRoot = params.projectRoot?.trim().replace(/[\\/]+$/, '') ?? '';
+  const relativeSegments = params.relativePath.trim().replace(/\\/g, '/').split('/');
+  if (
+    !projectRoot ||
+    relativeSegments.length === 0 ||
+    relativeSegments.some((segment) => !segment || segment === '.' || segment === '..')
+  ) {
+    return null;
+  }
+  const separator = projectRoot.includes('\\') ? '\\' : '/';
+  return `${projectRoot}${separator}${relativeSegments.join(separator)}`;
+}
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -33,22 +58,60 @@ function dedupeInlineTokens(tokens: readonly ChatInlineTokenSource[]): ChatInlin
   return output;
 }
 
-export function buildInlineSkillTokensFromComposer(nodes: readonly ChatComposerNode[]): ChatInlineTokenSource[] {
+export function buildInlineTokensFromComposer(nodes: readonly ChatComposerNode[]): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const node of nodes) {
-    if (node.type !== 'token' || node.tokenKind !== 'skill') {
+    if (node.type !== 'token') {
+      continue;
+    }
+    if (
+      node.tokenKind !== 'skill' &&
+      node.tokenKind !== CHAT_WORKSPACE_FILE_TOKEN_KIND &&
+      node.tokenKind !== CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
+    ) {
+      continue;
+    }
+    const rawText = serializeChatComposerTokenText(node);
+    if (!rawText) {
       continue;
     }
     tokens.push({
-      kind: 'skill',
+      kind: node.tokenKind,
       key: node.tokenKey,
       label: node.label,
-      rawText: `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`
+      rawText,
     });
   }
   return dedupeInlineTokens(tokens);
 }
 
+function appendWorkspaceTokens(params: {
+  kind: typeof CHAT_WORKSPACE_FILE_TOKEN_KIND | typeof CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND;
+  pattern: RegExp;
+  text: string;
+  tokens: ChatInlineTokenSource[];
+}): void {
+  const { kind, pattern, text, tokens } = params;
+  for (const match of text.matchAll(pattern)) {
+    const encodedKey = match[1];
+    if (!encodedKey) {
+      continue;
+    }
+    let key: string;
+    try {
+      key = decodeURIComponent(encodedKey);
+    } catch {
+      continue;
+    }
+    tokens.push({
+      kind,
+      key,
+      label: key.split('/').filter(Boolean).at(-1) ?? key,
+      rawText: match[0],
+    });
+  }
+}
+
 export function buildInlineTokensFromTextProtocol(text: string): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const match of text.matchAll(CHAT_PANEL_APP_TOKEN_PATTERN)) {
@@ -63,6 +126,18 @@ export function buildInlineTokensFromTextProtocol(text: string): ChatInlineToken
       rawText: `${CHAT_PANEL_APP_TOKEN_PREFIX}${key}`
     });
   }
+  appendWorkspaceTokens({
+    kind: CHAT_WORKSPACE_FILE_TOKEN_KIND,
+    pattern: CHAT_WORKSPACE_FILE_TOKEN_PATTERN,
+    text,
+    tokens,
+  });
+  appendWorkspaceTokens({
+    kind: CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+    pattern: CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN,
+    text,
+    tokens,
+  });
   return dedupeInlineTokens(tokens);
 }
 
@@ -76,7 +151,7 @@ export function resolveInlineTokensForText(
 export function readInlineTokensFromMetadata(
   metadata: Record<string, unknown> | undefined
 ): ChatInlineTokenSource[] {
-  const raw = metadata?.[CHAT_UI_INLINE_TOKENS_METADATA_KEY];
+  const raw = metadata?.[CHAT_INLINE_TOKENS_METADATA_KEY];
   if (!Array.isArray(raw)) {
     return [];
   }

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -278,6 +278,7 @@ export function buildSkillPickerModel(params: {
   const recentKeySet = new Set(groupedRecentSkillValues ?? []);
   return {
     title: texts.title,
+    allGroupsLabel: texts.allSkillsLabel,
     searchPlaceholder: texts.searchPlaceholder,
     emptyLabel: texts.emptyLabel,
     loadingLabel: texts.loadingLabel,

package/src/features/chat/features/message/components/__tests__/chat-inline-file-preview.test.tsx

@@ -0,0 +1,159 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatInlineFilePreview } from "@/features/chat/features/message/components/chat-inline-file-preview";
+
+const captures = vi.hoisted(() => ({
+  filePreviewProps: [] as Array<{
+    showBreadcrumbs?: boolean;
+    onHtmlContentHeightChange?: (height: number) => void;
+  }>,
+}));
+
+vi.mock(
+  "@/features/chat/features/workspace/components/chat-session-workspace-file-preview",
+  () => ({
+    ChatSessionWorkspaceFilePreview: (props: {
+      showBreadcrumbs?: boolean;
+      onHtmlContentHeightChange?: (height: number) => void;
+    }) => {
+      captures.filePreviewProps.push(props);
+      return <div data-testid="inline-workspace-file-preview" />;
+    },
+  }),
+);
+
+vi.mock("@/shared/lib/i18n", () => ({
+  t: (key: string) => key,
+}));
+
+beforeEach(() => {
+  captures.filePreviewProps = [];
+});
+
+it("renders adaptive inline HTML without persistent file chrome", () => {
+  const onFileOpen = vi.fn();
+  const { container } = render(
+    <ChatInlineFilePreview
+      display={{
+        target: {
+          type: "file",
+          payload: { path: "preview.html", viewer: "rendered" },
+        },
+        title: "Preview",
+        description: "Rendered HTML",
+      }}
+      parentSessionKey={null}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+      onFileOpen={onFileOpen}
+    />,
+  );
+
+  expect(screen.queryByText("Preview")).toBeNull();
+  expect(screen.queryByText("preview.html")).toBeNull();
+  expect(screen.queryByText("Rendered HTML")).toBeNull();
+  const preview = container.querySelector(
+    '[data-chat-inline-file-preview="true"]',
+  );
+  const actions = container.querySelector(
+    '[data-chat-inline-file-actions="true"]',
+  );
+  const viewport = container.querySelector<HTMLElement>(
+    '[data-chat-inline-file-viewport="true"]',
+  );
+  const iframeSurface = screen.getByTestId("inline-workspace-file-preview");
+  expect(preview?.classList.contains("border")).toBe(false);
+  expect(preview?.classList.contains("pt-9")).toBe(false);
+  expect(actions?.classList.contains("left-1/2")).toBe(true);
+  expect(actions?.classList.contains("-translate-x-1/2")).toBe(true);
+  expect(actions?.classList.contains("bottom-full")).toBe(true);
+  expect(actions?.classList.contains("pb-2")).toBe(true);
+  expect(actions?.classList.contains("right-2")).toBe(false);
+  expect(actions?.classList.contains("opacity-0")).toBe(true);
+  expect(actions?.classList.contains("pointer-events-none")).toBe(true);
+  expect(
+    actions?.classList.contains("group-hover/inline-html:opacity-100"),
+  ).toBe(true);
+  expect(
+    actions?.classList.contains("group-hover/inline-html:pointer-events-auto"),
+  ).toBe(true);
+  expect(
+    actions?.classList.contains("group-focus-within/inline-html:opacity-100"),
+  ).toBe(true);
+  expect(
+    actions?.classList.contains(
+      "group-focus-within/inline-html:pointer-events-auto",
+    ),
+  ).toBe(true);
+  expect(
+    container.querySelector('[data-chat-inline-file-actions-surface="true"]'),
+  ).toBeTruthy();
+  expect(viewport?.classList.contains("rounded-lg")).toBe(true);
+  expect(viewport?.classList.contains("h-[240px]")).toBe(true);
+  expect(viewport?.classList.contains("max-h-[min(80vh,720px)]")).toBe(true);
+  expect(captures.filePreviewProps.at(-1)?.showBreadcrumbs).toBe(false);
+  expect(captures.filePreviewProps.at(-1)?.onHtmlContentHeightChange).toEqual(
+    expect.any(Function),
+  );
+
+  act(() => {
+    captures.filePreviewProps.at(-1)?.onHtmlContentHeightChange?.(560);
+  });
+
+  expect(viewport?.style.height).toBe("560px");
+  expect(screen.getByTestId("inline-workspace-file-preview")).toBe(
+    iframeSurface,
+  );
+
+  fireEvent.click(screen.getByLabelText("chatPanelCardExpand"));
+  fireEvent.click(screen.getByLabelText("chatWorkspaceOpenSource"));
+
+  expect(onFileOpen).toHaveBeenNthCalledWith(1, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "rendered",
+    line: undefined,
+    column: undefined,
+  });
+  expect(onFileOpen).toHaveBeenNthCalledWith(2, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "source",
+    line: undefined,
+    column: undefined,
+  });
+});
+
+it("keeps file chrome for non-HTML inline previews", () => {
+  const { container } = render(
+    <ChatInlineFilePreview
+      display={{
+        target: {
+          type: "file",
+          payload: { path: "notes.md", viewer: "rendered" },
+        },
+        title: "Notes",
+      }}
+      parentSessionKey={null}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+      onFileOpen={vi.fn()}
+    />,
+  );
+
+  expect(screen.getByText("Notes")).toBeTruthy();
+  expect(screen.getByText("notes.md")).toBeTruthy();
+  expect(
+    container
+      .querySelector('[data-chat-inline-file-preview="true"]')
+      ?.classList.contains("border"),
+  ).toBe(true);
+  expect(
+    container.querySelector('[data-chat-inline-file-actions="true"]'),
+  ).toBeNull();
+  expect(
+    captures.filePreviewProps.at(-1)?.onHtmlContentHeightChange,
+  ).toBeUndefined();
+});