@nextclaw/ui 0.6.15 → 0.7.0

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

@@ -0,0 +1,329 @@
+import type {
+  ChatInlineHint,
+  ChatSelectedItem,
+  ChatSkillPickerOption,
+  ChatSkillPickerProps,
+  ChatSlashItem,
+  ChatToolbarSelect
+} from '@nextclaw/agent-chat-ui';
+
+export type ChatThinkingLevel = 'off' | 'minimal' | 'low' | 'medium' | 'high' | 'adaptive' | 'xhigh';
+
+export type ChatSkillRecord = {
+  key: string;
+  label: string;
+  description?: string;
+  descriptionZh?: string;
+  badgeLabel?: string;
+};
+
+export type ChatModelRecord = {
+  value: string;
+  modelLabel: string;
+  providerLabel: string;
+  thinkingCapability?: {
+    supported: ChatThinkingLevel[];
+    default?: ChatThinkingLevel | null;
+  } | null;
+};
+
+const SLASH_ITEM_MATCH_SCORE = {
+  exactSpec: 1200,
+  exactLabel: 1150,
+  prefixSpec: 1000,
+  prefixLabel: 950,
+  prefixToken: 900,
+  containsSpec: 800,
+  containsLabel: 760,
+  containsDescription: 500,
+  subsequence: 300,
+  fallback: 1
+} as const;
+
+export type ChatInputBarAdapterTexts = {
+  slashSkillSubtitle: string;
+  slashSkillSpecLabel: string;
+  noSkillDescription: string;
+  modelSelectPlaceholder: string;
+  modelNoOptionsLabel: string;
+  sessionTypePlaceholder: string;
+  thinkingLabels: Record<ChatThinkingLevel, string>;
+  noModelOptionsLabel: string;
+  configureProviderLabel: string;
+};
+
+export function resolveSlashQuery(draft: string): string | null {
+  const match = /^\/([^\s]*)$/.exec(draft);
+  if (!match) {
+    return null;
+  }
+  return (match[1] ?? '').trim().toLowerCase();
+}
+
+function normalizeSearchText(value: string | null | undefined): string {
+  return (value ?? '').trim().toLowerCase();
+}
+
+function isSubsequenceMatch(query: string, target: string): boolean {
+  if (!query || !target) {
+    return false;
+  }
+  let pointer = 0;
+  for (const char of target) {
+    if (char === query[pointer]) {
+      pointer += 1;
+      if (pointer >= query.length) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+function scoreSkillRecord(record: ChatSkillRecord, query: string): number {
+  const normalizedQuery = normalizeSearchText(query);
+  if (!normalizedQuery) {
+    return SLASH_ITEM_MATCH_SCORE.fallback;
+  }
+
+  const spec = normalizeSearchText(record.key);
+  const label = normalizeSearchText(record.label || record.key);
+  const description = normalizeSearchText(`${record.descriptionZh ?? ''} ${record.description ?? ''}`);
+  const labelTokens = label.split(/[\s/_-]+/).filter(Boolean);
+
+  if (spec === normalizedQuery) {
+    return SLASH_ITEM_MATCH_SCORE.exactSpec;
+  }
+  if (label === normalizedQuery) {
+    return SLASH_ITEM_MATCH_SCORE.exactLabel;
+  }
+  if (spec.startsWith(normalizedQuery)) {
+    return SLASH_ITEM_MATCH_SCORE.prefixSpec;
+  }
+  if (label.startsWith(normalizedQuery)) {
+    return SLASH_ITEM_MATCH_SCORE.prefixLabel;
+  }
+  if (labelTokens.some((token) => token.startsWith(normalizedQuery))) {
+    return SLASH_ITEM_MATCH_SCORE.prefixToken;
+  }
+  if (spec.includes(normalizedQuery)) {
+    return SLASH_ITEM_MATCH_SCORE.containsSpec;
+  }
+  if (label.includes(normalizedQuery)) {
+    return SLASH_ITEM_MATCH_SCORE.containsLabel;
+  }
+  if (description.includes(normalizedQuery)) {
+    return SLASH_ITEM_MATCH_SCORE.containsDescription;
+  }
+  if (isSubsequenceMatch(normalizedQuery, label) || isSubsequenceMatch(normalizedQuery, spec)) {
+    return SLASH_ITEM_MATCH_SCORE.subsequence;
+  }
+  return 0;
+}
+
+export function buildChatSlashItems(
+  skillRecords: ChatSkillRecord[],
+  normalizedSlashQuery: string,
+  texts: Pick<ChatInputBarAdapterTexts, 'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'noSkillDescription'>
+): ChatSlashItem[] {
+  const skillSortCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+
+  return skillRecords
+    .map((record, order) => ({
+      record,
+      order,
+      score: scoreSkillRecord(record, normalizedSlashQuery)
+    }))
+    .filter((entry) => entry.score > 0)
+    .sort((left, right) => {
+      if (right.score !== left.score) {
+        return right.score - left.score;
+      }
+      const leftLabel = (left.record.label || left.record.key).trim();
+      const rightLabel = (right.record.label || right.record.key).trim();
+      const labelCompare = skillSortCollator.compare(leftLabel, rightLabel);
+      if (labelCompare !== 0) {
+        return labelCompare;
+      }
+      return left.order - right.order;
+    })
+    .map(({ record }) => ({
+      key: `skill:${record.key}`,
+      title: record.label || record.key,
+      subtitle: texts.slashSkillSubtitle,
+      description: (record.descriptionZh ?? record.description ?? '').trim() || texts.noSkillDescription,
+      detailLines: [`${texts.slashSkillSpecLabel}: ${record.key}`],
+      value: record.key
+    }));
+}
+
+export function buildSelectedSkillItems(
+  selectedSkills: string[],
+  skillRecords: ChatSkillRecord[]
+): ChatSelectedItem[] {
+  return selectedSkills.map((spec) => {
+    const matched = skillRecords.find((record) => record.key === spec);
+    return {
+      key: spec,
+      label: matched?.label || spec
+    };
+  });
+}
+
+export function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSkillPickerOption[] {
+  return skillRecords.map((record) => ({
+    key: record.key,
+    label: record.label,
+    description: record.descriptionZh || record.description || '',
+    badgeLabel: record.badgeLabel
+  }));
+}
+
+export function buildSkillPickerModel(params: {
+  skillRecords: ChatSkillRecord[];
+  selectedSkills: string[];
+  isLoading: boolean;
+  onSelectedKeysChange: (next: string[]) => void;
+  texts: {
+    title: string;
+    searchPlaceholder: string;
+    emptyLabel: string;
+    loadingLabel: string;
+    manageLabel: string;
+  };
+}): ChatSkillPickerProps {
+  return {
+    title: params.texts.title,
+    searchPlaceholder: params.texts.searchPlaceholder,
+    emptyLabel: params.texts.emptyLabel,
+    loadingLabel: params.texts.loadingLabel,
+    isLoading: params.isLoading,
+    manageLabel: params.texts.manageLabel,
+    manageHref: '/marketplace/skills',
+    options: buildSkillPickerOptions(params.skillRecords),
+    selectedKeys: params.selectedSkills,
+    onSelectedKeysChange: params.onSelectedKeysChange
+  };
+}
+
+export function buildModelStateHint(params: {
+  isModelOptionsLoading: boolean;
+  isModelOptionsEmpty: boolean;
+  onGoToProviders: () => void;
+  texts: Pick<ChatInputBarAdapterTexts, 'noModelOptionsLabel' | 'configureProviderLabel'>;
+}): ChatInlineHint | null {
+  if (!params.isModelOptionsLoading && !params.isModelOptionsEmpty) {
+    return null;
+  }
+  if (params.isModelOptionsLoading) {
+    return {
+      tone: 'neutral',
+      loading: true
+    };
+  }
+  return {
+    tone: 'warning',
+    text: params.texts.noModelOptionsLabel,
+    actionLabel: params.texts.configureProviderLabel,
+    onAction: params.onGoToProviders
+  };
+}
+
+export function buildModelToolbarSelect(params: {
+  modelOptions: ChatModelRecord[];
+  selectedModel: string;
+  isModelOptionsLoading: boolean;
+  hasModelOptions: boolean;
+  onValueChange: (value: string) => void;
+  texts: Pick<ChatInputBarAdapterTexts, 'modelSelectPlaceholder' | 'modelNoOptionsLabel'>;
+}): ChatToolbarSelect {
+  const selectedModelOption = params.modelOptions.find((option) => option.value === params.selectedModel);
+
+  return {
+    key: 'model',
+    value: params.hasModelOptions ? params.selectedModel : undefined,
+    placeholder: params.texts.modelSelectPlaceholder,
+    selectedLabel: selectedModelOption
+      ? `${selectedModelOption.providerLabel}/${selectedModelOption.modelLabel}`
+      : undefined,
+    icon: 'sparkles',
+    options: params.modelOptions.map((option) => ({
+      value: option.value,
+      label: option.modelLabel,
+      description: option.providerLabel
+    })),
+    disabled: !params.hasModelOptions,
+    loading: params.isModelOptionsLoading,
+    emptyLabel: params.texts.modelNoOptionsLabel,
+    onValueChange: params.onValueChange
+  };
+}
+
+export function buildSessionTypeToolbarSelect(params: {
+  selectedSessionType?: string;
+  selectedSessionTypeOption: { value: string; label: string } | null;
+  sessionTypeOptions: Array<{ value: string; label: string }>;
+  onValueChange: (value: string) => void;
+  canEditSessionType: boolean;
+  shouldShow: boolean;
+  texts: Pick<ChatInputBarAdapterTexts, 'sessionTypePlaceholder'>;
+}): ChatToolbarSelect | null {
+  if (!params.shouldShow) {
+    return null;
+  }
+
+  return {
+    key: 'session-type',
+    value: params.selectedSessionType,
+    placeholder: params.texts.sessionTypePlaceholder,
+    selectedLabel: params.selectedSessionTypeOption?.label,
+    options: params.sessionTypeOptions.map((option) => ({
+      value: option.value,
+      label: option.label
+    })),
+    disabled: !params.canEditSessionType,
+    onValueChange: params.onValueChange
+  };
+}
+
+function normalizeThinkingLevels(levels: ChatThinkingLevel[]): ChatThinkingLevel[] {
+  const deduped: ChatThinkingLevel[] = [];
+  for (const level of ['off', ...levels] as ChatThinkingLevel[]) {
+    if (!deduped.includes(level)) {
+      deduped.push(level);
+    }
+  }
+  return deduped;
+}
+
+export function buildThinkingToolbarSelect(params: {
+  supportedLevels: ChatThinkingLevel[];
+  selectedThinkingLevel: ChatThinkingLevel | null;
+  defaultThinkingLevel?: ChatThinkingLevel | null;
+  onValueChange: (value: ChatThinkingLevel) => void;
+  texts: Pick<ChatInputBarAdapterTexts, 'thinkingLabels'>;
+}): ChatToolbarSelect | null {
+  if (params.supportedLevels.length === 0) {
+    return null;
+  }
+
+  const options = normalizeThinkingLevels(params.supportedLevels);
+  const fallback = options.includes('off') ? 'off' : options[0];
+  const resolvedValue =
+    (params.selectedThinkingLevel && options.includes(params.selectedThinkingLevel) && params.selectedThinkingLevel) ||
+    (params.defaultThinkingLevel && options.includes(params.defaultThinkingLevel) && params.defaultThinkingLevel) ||
+    fallback;
+
+  return {
+    key: 'thinking',
+    value: resolvedValue,
+    placeholder: params.texts.thinkingLabels[resolvedValue],
+    selectedLabel: params.texts.thinkingLabels[resolvedValue],
+    icon: 'brain',
+    options: options.map((level) => ({
+      value: level,
+      label: params.texts.thinkingLabels[level]
+    })),
+    onValueChange: (value) => params.onValueChange(value as ChatThinkingLevel)
+  };
+}

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

@@ -0,0 +1,137 @@
+import { ToolInvocationStatus, type UiMessage } from '@nextclaw/agent-chat';
+import { adaptChatMessages } from '@/components/chat/adapters/chat-message.adapter';
+import type { ChatMessageSource } from '@/components/chat/adapters/chat-message.adapter';
+
+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 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[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 = adaptChatMessages({
+      uiMessages: [
+        {
+          id: 'data-1',
+          role: 'data',
+          parts: [{ type: 'text', text: 'payload' }]
+        }
+      ] 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'
+      }
+    });
+
+    expect(adapted[0]?.role).toBe('message');
+    expect(adapted[0]?.roleLabel).toBe('Message');
+  });
+
+  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'
+      }
+    });
+
+    expect(adapted[0]?.parts[0]).toMatchObject({
+      type: 'unknown',
+      rawType: 'step-start',
+      label: 'Unknown Part'
+    });
+  });
+});

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

@@ -0,0 +1,200 @@
+import {
+  stringifyUnknown,
+  summarizeToolArgs,
+  type ToolCard
+} from '@/lib/chat-message';
+import type {
+  ChatMessageRole,
+  ChatMessageViewModel,
+  ChatToolPartViewModel
+} from '@nextclaw/agent-chat-ui';
+
+export type ChatMessagePartSource =
+  | {
+      type: 'text';
+      text: string;
+    }
+  | {
+      type: 'reasoning';
+      reasoning: string;
+    }
+  | {
+      type: 'tool-invocation';
+      toolInvocation: {
+        status?: string;
+        toolName: string;
+        args?: unknown;
+        parsedArgs?: unknown;
+        result?: unknown;
+        error?: string;
+        toolCallId?: string;
+      };
+    }
+  | {
+      type: string;
+      [key: string]: unknown;
+    };
+
+export type ChatMessageSource = {
+  id: string;
+  role: string;
+  meta?: {
+    timestamp?: string;
+    status?: string;
+  };
+  parts: ChatMessagePartSource[];
+};
+
+export type ChatMessageAdapterTexts = {
+  roleLabels: {
+    user: string;
+    assistant: string;
+    tool: string;
+    system: string;
+    fallback: string;
+  };
+  reasoningLabel: string;
+  toolCallLabel: string;
+  toolResultLabel: string;
+  toolNoOutputLabel: string;
+  toolOutputLabel: string;
+  unknownPartLabel: string;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function isTextPart(part: ChatMessagePartSource): part is Extract<ChatMessagePartSource, { type: 'text' }> {
+  return part.type === 'text' && typeof part.text === 'string';
+}
+
+function isReasoningPart(
+  part: ChatMessagePartSource
+): part is Extract<ChatMessagePartSource, { type: 'reasoning' }> {
+  return part.type === 'reasoning' && typeof part.reasoning === 'string';
+}
+
+function isToolInvocationPart(
+  part: ChatMessagePartSource
+): part is Extract<ChatMessagePartSource, { type: 'tool-invocation' }> {
+  if (part.type !== 'tool-invocation') {
+    return false;
+  }
+  if (!isRecord(part.toolInvocation)) {
+    return false;
+  }
+  return typeof part.toolInvocation.toolName === 'string';
+}
+
+function resolveMessageTimestamp(message: ChatMessageSource): string {
+  const candidate = message.meta?.timestamp;
+  if (candidate && Number.isFinite(Date.parse(candidate))) {
+    return candidate;
+  }
+  return new Date().toISOString();
+}
+
+function resolveRoleLabel(role: string, texts: ChatMessageAdapterTexts['roleLabels']): string {
+  if (role === 'user') {
+    return texts.user;
+  }
+  if (role === 'assistant') {
+    return texts.assistant;
+  }
+  if (role === 'tool') {
+    return texts.tool;
+  }
+  if (role === 'system') {
+    return texts.system;
+  }
+  return texts.fallback;
+}
+
+function resolveUiRole(role: string): ChatMessageRole {
+  if (role === 'user' || role === 'assistant' || role === 'tool' || role === 'system') {
+    return role;
+  }
+  return 'message';
+}
+
+function buildToolCard(toolCard: ToolCard, texts: ChatMessageAdapterTexts): ChatToolPartViewModel {
+  return {
+    kind: toolCard.kind,
+    toolName: toolCard.name,
+    summary: toolCard.detail,
+    output: toolCard.text,
+    hasResult: Boolean(toolCard.hasResult),
+    titleLabel: toolCard.kind === 'call' ? texts.toolCallLabel : texts.toolResultLabel,
+    outputLabel: texts.toolOutputLabel,
+    emptyLabel: texts.toolNoOutputLabel
+  };
+}
+
+export function adaptChatMessages(params: {
+  uiMessages: ChatMessageSource[];
+  texts: ChatMessageAdapterTexts;
+  formatTimestamp: (value: string) => string;
+}): ChatMessageViewModel[] {
+  return params.uiMessages.map((message) => ({
+    id: message.id,
+    role: resolveUiRole(message.role),
+    roleLabel: resolveRoleLabel(message.role, params.texts.roleLabels),
+    timestampLabel: params.formatTimestamp(resolveMessageTimestamp(message)),
+    status: message.meta?.status,
+    parts: message.parts
+      .map((part) => {
+        if (isTextPart(part)) {
+          const text = part.text.trim();
+          if (!text) {
+            return null;
+          }
+          return {
+            type: 'markdown' as const,
+            text
+          };
+        }
+        if (isReasoningPart(part)) {
+          const text = part.reasoning.trim();
+          if (!text) {
+            return null;
+          }
+          return {
+            type: 'reasoning' as const,
+            text,
+            label: params.texts.reasoningLabel
+          };
+        }
+        if (isToolInvocationPart(part)) {
+          const invocation = part.toolInvocation;
+          const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
+          const rawResult = typeof invocation.error === 'string' && invocation.error.trim()
+            ? invocation.error.trim()
+            : invocation.result != null
+              ? stringifyUnknown(invocation.result).trim()
+              : '';
+          const hasResult =
+            invocation.status === 'result' || invocation.status === 'error' || invocation.status === 'cancelled';
+          const card: ToolCard = {
+            kind: hasResult ? 'result' : 'call',
+            name: invocation.toolName,
+            detail,
+            text: rawResult || undefined,
+            callId: invocation.toolCallId || undefined,
+            hasResult
+          };
+          return {
+            type: 'tool-card' as const,
+            card: buildToolCard(card, params.texts)
+          };
+        }
+        return {
+          type: 'unknown' as const,
+          label: params.texts.unknownPartLabel,
+          rawType: typeof part.type === 'string' ? part.type : 'unknown',
+          text: stringifyUnknown(part)
+        };
+      })
+      .filter((part) => part !== null)
+  }));
+}