@nextclaw/ui 0.11.18 → 0.11.20

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

@@ -39,6 +39,36 @@ describe('buildChatSlashItems', () => {
     const items = buildChatSlashItems([createSkillRecord({ key: 'weather' })], 'terminal', texts);
     expect(items).toEqual([]);
   });
+
+  it('pushes recent skills ahead when the match strength is the same', () => {
+    const items = buildChatSlashItems(
+      [
+        createSkillRecord({ key: 'docs', label: 'Docs' }),
+        createSkillRecord({ key: 'web-search', label: 'Web Search' }),
+        createSkillRecord({ key: 'weather', label: 'Weather' })
+      ],
+      '',
+      texts,
+      ['weather', 'docs']
+    );
+
+    expect(items.map((item) => item.value)).toEqual(['weather', 'docs', 'web-search']);
+  });
+
+  it('lets recent skills win inside the same slash match tier', () => {
+    const items = buildChatSlashItems(
+      [
+        createSkillRecord({ key: 'web-search', label: 'Web Search' }),
+        createSkillRecord({ key: 'weather', label: 'Web Weather' }),
+        createSkillRecord({ key: 'docs', label: 'Docs for web' })
+      ],
+      'web',
+      texts,
+      ['weather']
+    );
+
+    expect(items.map((item) => item.value)).toEqual(['weather', 'web-search', 'docs']);
+  });
 });
 
 describe('buildSelectedSkillItems', () => {
@@ -60,6 +90,8 @@ describe('buildSkillPickerModel', () => {
     const onSelectedKeysChange = vi.fn();
     const model = buildSkillPickerModel({
       skillRecords: [createSkillRecord({ key: 'web-search', label: 'Web Search', description: 'Search web' })],
+      recentSkillValues: [],
+      groupedRecentSkillValues: [],
       selectedSkills: ['web-search'],
       isLoading: false,
       onSelectedKeysChange,
@@ -68,7 +100,9 @@ describe('buildSkillPickerModel', () => {
         searchPlaceholder: 'Search skills',
         emptyLabel: 'No skills',
         loadingLabel: 'Loading',
-        manageLabel: 'Manage'
+        manageLabel: 'Manage',
+        recentSkillsLabel: 'Recent',
+        allSkillsLabel: 'All skills'
       }
     });
 
@@ -82,6 +116,74 @@ describe('buildSkillPickerModel', () => {
       label: 'Web Search'
     });
   });
+
+  it('groups recent skills ahead of the remaining catalog', () => {
+    const model = buildSkillPickerModel({
+      skillRecords: [
+        createSkillRecord({ key: 'docs', label: 'Docs' }),
+        createSkillRecord({ key: 'web-search', label: 'Web Search' }),
+        createSkillRecord({ key: 'weather', label: 'Weather' })
+      ],
+      recentSkillValues: ['weather', 'docs'],
+      groupedRecentSkillValues: ['weather', 'docs'],
+      selectedSkills: ['weather'],
+      isLoading: false,
+      onSelectedKeysChange: vi.fn(),
+      texts: {
+        title: 'Skills',
+        searchPlaceholder: 'Search skills',
+        emptyLabel: 'No skills',
+        loadingLabel: 'Loading',
+        manageLabel: 'Manage',
+        recentSkillsLabel: 'Recent',
+        allSkillsLabel: 'All skills'
+      }
+    });
+
+    expect(model.options.map((option) => option.key)).toEqual(['weather', 'docs', 'web-search']);
+    expect(model.groups).toEqual([
+      {
+        key: 'recent-skills',
+        label: 'Recent',
+        options: [
+          expect.objectContaining({ key: 'weather', label: 'Weather' }),
+          expect.objectContaining({ key: 'docs', label: 'Docs' })
+        ]
+      },
+      {
+        key: 'all-skills',
+        label: 'All skills',
+        options: [expect.objectContaining({ key: 'web-search', label: 'Web Search' })]
+      }
+    ]);
+  });
+
+  it('still reorders recent skills even when grouped labels are omitted', () => {
+    const model = buildSkillPickerModel({
+      skillRecords: [
+        createSkillRecord({ key: 'docs', label: 'Docs' }),
+        createSkillRecord({ key: 'web-search', label: 'Web Search' }),
+        createSkillRecord({ key: 'weather', label: 'Weather' })
+      ],
+      recentSkillValues: ['weather'],
+      groupedRecentSkillValues: [],
+      selectedSkills: [],
+      isLoading: false,
+      onSelectedKeysChange: vi.fn(),
+      texts: {
+        title: 'Skills',
+        searchPlaceholder: 'Search skills',
+        emptyLabel: 'No skills',
+        loadingLabel: 'Loading',
+        manageLabel: 'Manage',
+        recentSkillsLabel: 'Recent',
+        allSkillsLabel: 'All skills'
+      }
+    });
+
+    expect(model.options.map((option) => option.key)).toEqual(['weather', 'docs', 'web-search']);
+    expect(model.groups).toBeUndefined();
+  });
 });
 
 describe('buildModelToolbarSelect', () => {

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

@@ -44,6 +44,8 @@ export type ChatInputBarAdapterTexts = {
   slashSkillSubtitle: string;
   slashSkillSpecLabel: string;
   noSkillDescription: string;
+  recentSkillsLabel: string;
+  allSkillsLabel: string;
   modelSelectPlaceholder: string;
   modelNoOptionsLabel: string;
   recentModelsLabel: string;
@@ -129,12 +131,51 @@ function scoreSkillRecord(record: ChatSkillRecord, query: string): number {
   return 0;
 }
 
+function resolveSlashMatchTier(score: number): number {
+  if (score >= SLASH_ITEM_MATCH_SCORE.exactLabel) {
+    return 4;
+  }
+  if (score >= SLASH_ITEM_MATCH_SCORE.prefixToken) {
+    return 3;
+  }
+  if (score >= SLASH_ITEM_MATCH_SCORE.containsLabel) {
+    return 2;
+  }
+  if (score > 0) {
+    return 1;
+  }
+  return 0;
+}
+
+function buildRecentOrderIndex(values: string[]): Map<string, number> {
+  return new Map(values.map((value, index) => [value, index] as const));
+}
+
+function prioritizeSkillRecords(skillRecords: ChatSkillRecord[], recentSkillValues: string[]): ChatSkillRecord[] {
+  const recentOrderIndex = buildRecentOrderIndex(recentSkillValues);
+  const recentRecords: ChatSkillRecord[] = [];
+  const remainingRecords: ChatSkillRecord[] = [];
+  for (const record of skillRecords) {
+    if (recentOrderIndex.has(record.key)) {
+      recentRecords.push(record);
+      continue;
+    }
+    remainingRecords.push(record);
+  }
+  recentRecords.sort(
+    (left, right) => (recentOrderIndex.get(left.key) ?? Number.POSITIVE_INFINITY) - (recentOrderIndex.get(right.key) ?? Number.POSITIVE_INFINITY)
+  );
+  return [...recentRecords, ...remainingRecords];
+}
+
 export function buildChatSlashItems(
   skillRecords: ChatSkillRecord[],
   normalizedSlashQuery: string,
-  texts: Pick<ChatInputBarAdapterTexts, 'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'noSkillDescription'>
+  texts: Pick<ChatInputBarAdapterTexts, 'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'noSkillDescription'>,
+  recentSkillValues: string[] = []
 ): ChatSlashItem[] {
   const skillSortCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+  const recentOrderIndex = buildRecentOrderIndex(recentSkillValues);
 
   return skillRecords
     .map((record, order) => ({
@@ -144,6 +185,16 @@ export function buildChatSlashItems(
     }))
     .filter((entry) => entry.score > 0)
     .sort((left, right) => {
+      const leftTier = resolveSlashMatchTier(left.score);
+      const rightTier = resolveSlashMatchTier(right.score);
+      if (rightTier !== leftTier) {
+        return rightTier - leftTier;
+      }
+      const leftRecentIndex = recentOrderIndex.get(left.record.key) ?? Number.POSITIVE_INFINITY;
+      const rightRecentIndex = recentOrderIndex.get(right.record.key) ?? Number.POSITIVE_INFINITY;
+      if (leftRecentIndex !== rightRecentIndex) {
+        return leftRecentIndex - rightRecentIndex;
+      }
       if (right.score !== left.score) {
         return right.score - left.score;
       }
@@ -189,6 +240,8 @@ export function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSk
 
 export function buildSkillPickerModel(params: {
   skillRecords: ChatSkillRecord[];
+  recentSkillValues?: string[];
+  groupedRecentSkillValues?: string[];
   selectedSkills: string[];
   isLoading: boolean;
   onSelectedKeysChange: (next: string[]) => void;
@@ -198,8 +251,18 @@ export function buildSkillPickerModel(params: {
     emptyLabel: string;
     loadingLabel: string;
     manageLabel: string;
+    recentSkillsLabel: string;
+    allSkillsLabel: string;
   };
 }): ChatSkillPickerProps {
+  const prioritizedSkillRecords = prioritizeSkillRecords(params.skillRecords, params.recentSkillValues ?? []);
+  const recentKeySet = new Set(params.groupedRecentSkillValues ?? []);
+  const recentSkillOptions = buildSkillPickerOptions(
+    prioritizedSkillRecords.filter((record) => recentKeySet.has(record.key))
+  );
+  const remainingSkillOptions = buildSkillPickerOptions(
+    prioritizedSkillRecords.filter((record) => !recentKeySet.has(record.key))
+  );
   return {
     title: params.texts.title,
     searchPlaceholder: params.texts.searchPlaceholder,
@@ -208,7 +271,22 @@ export function buildSkillPickerModel(params: {
     isLoading: params.isLoading,
     manageLabel: params.texts.manageLabel,
     manageHref: '/marketplace/skills',
-    options: buildSkillPickerOptions(params.skillRecords),
+    options: buildSkillPickerOptions(prioritizedSkillRecords),
+    groups:
+      recentSkillOptions.length > 0
+        ? [
+            {
+              key: 'recent-skills',
+              label: params.texts.recentSkillsLabel,
+              options: recentSkillOptions
+            },
+            {
+              key: 'all-skills',
+              label: params.texts.allSkillsLabel,
+              options: remainingSkillOptions
+            }
+          ].filter((group) => group.options.length > 0)
+        : undefined,
     selectedKeys: params.selectedSkills,
     onSelectedKeysChange: params.onSelectedKeysChange
   };

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

@@ -0,0 +1,95 @@
+import {
+  splitTextByInlineTokens,
+  type ChatInlineTokenSource,
+} from "@/components/chat/chat-inline-token.utils";
+import type {
+  ChatInlineContentSegmentViewModel,
+  ChatMessagePartViewModel,
+} from "@nextclaw/agent-chat-ui";
+import type { ChatMessagePartSource } from "@/components/chat/adapters/chat-message-part.adapter";
+
+const INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
+
+function toRenderableText(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const visible = trimmed.replace(INVISIBLE_ONLY_TEXT_PATTERN, "").trim();
+  return visible ? trimmed : null;
+}
+
+function hasVisibleText(value: string): boolean {
+  return value.replace(INVISIBLE_ONLY_TEXT_PATTERN, "").trim().length > 0;
+}
+
+function buildInlineContentSegments(
+  text: string,
+  inlineTokens: readonly ChatInlineTokenSource[],
+): ChatInlineContentSegmentViewModel[] | null {
+  const fragments = splitTextByInlineTokens(text, inlineTokens);
+  if (fragments.length === 0) {
+    return null;
+  }
+
+  const segments: ChatInlineContentSegmentViewModel[] = [];
+  let hasVisibleContent = false;
+
+  for (const fragment of fragments) {
+    if (fragment.type === "token") {
+      hasVisibleContent = true;
+      segments.push({
+        type: "token",
+        token: {
+          kind: fragment.token.kind,
+          key: fragment.token.key,
+          label: fragment.token.label,
+          rawText: fragment.token.rawText,
+        },
+      });
+      continue;
+    }
+
+    if (fragment.text.length === 0) {
+      continue;
+    }
+    if (hasVisibleText(fragment.text)) {
+      hasVisibleContent = true;
+    }
+    segments.push({
+      type: "markdown",
+      text: fragment.text,
+    });
+  }
+
+  return hasVisibleContent ? segments : null;
+}
+
+export function buildTextPart(
+  part: Extract<ChatMessagePartSource, { type: "text" }>,
+  inlineTokens: readonly ChatInlineTokenSource[],
+): Extract<
+  ChatMessagePartViewModel,
+  { type: "markdown" | "inline-content" }
+> | null {
+  const inlineContent = buildInlineContentSegments(part.text, inlineTokens);
+  if (inlineContent && inlineContent.some((segment) => segment.type === "token")) {
+    return {
+      type: "inline-content",
+      segments: inlineContent,
+    };
+  }
+
+  const text = toRenderableText(part.text);
+  if (!text) {
+    return null;
+  }
+  return {
+    type: "markdown",
+    text,
+  };
+}
+
+export function buildRenderableText(value: string): string | null {
+  return toRenderableText(value);
+}