@nextclaw/ui 0.6.10 → 0.6.11

package/src/components/chat/chat-input/components/ChatInputSelectedSkillsSection.tsx

@@ -0,0 +1,31 @@
+import { X } from 'lucide-react';
+
+type ChatInputSelectedSkillsSectionProps = {
+  records: Array<{ spec: string; label: string }>;
+  selectedSkills: string[];
+  onSelectedSkillsChange: (next: string[]) => void;
+};
+
+export function ChatInputSelectedSkillsSection(props: ChatInputSelectedSkillsSectionProps) {
+  if (props.records.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="px-4 pb-2">
+      <div className="flex flex-wrap items-center gap-2">
+        {props.records.map((record) => (
+          <button
+            key={record.spec}
+            type="button"
+            onClick={() => props.onSelectedSkillsChange(props.selectedSkills.filter((skill) => skill !== record.spec))}
+            className="inline-flex max-w-[200px] items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary"
+          >
+            <span className="truncate">{record.label}</span>
+            <X className="h-3 w-3 shrink-0" />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/chat-input/components/ChatInputSlashPanelSection.tsx

@@ -0,0 +1,112 @@
+import type { MutableRefObject } from 'react';
+import type { ChatInputBarSlashItem } from '@/components/chat/chat-input.types';
+import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover';
+import { t } from '@/lib/i18n';
+
+type ChatInputSlashPanelSectionProps = {
+  slashAnchorRef: MutableRefObject<HTMLDivElement | null>;
+  slashListRef: MutableRefObject<HTMLDivElement | null>;
+  isSlashPanelOpen: boolean;
+  isSlashPanelLoading: boolean;
+  resolvedSlashPanelWidth?: number;
+  skillSlashItems: ChatInputBarSlashItem[];
+  activeSlashIndex: number;
+  activeSlashItem: ChatInputBarSlashItem | null;
+  onSelectSlashItem: (item: ChatInputBarSlashItem) => void;
+  onSlashPanelOpenChange: (open: boolean) => void;
+  onSetActiveSlashIndex: (index: number) => void;
+};
+
+export function ChatInputSlashPanelSection({
+  slashAnchorRef,
+  slashListRef,
+  isSlashPanelOpen,
+  isSlashPanelLoading,
+  resolvedSlashPanelWidth,
+  skillSlashItems,
+  activeSlashIndex,
+  activeSlashItem,
+  onSelectSlashItem,
+  onSlashPanelOpenChange,
+  onSetActiveSlashIndex
+}: ChatInputSlashPanelSectionProps) {
+  return (
+    <Popover open={isSlashPanelOpen} onOpenChange={onSlashPanelOpenChange}>
+      <PopoverAnchor asChild>
+        <div ref={slashAnchorRef} className="pointer-events-none absolute left-3 right-3 bottom-full h-0" />
+      </PopoverAnchor>
+      <PopoverContent
+        side="top"
+        align="start"
+        sideOffset={10}
+        className="z-[70] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-2xl border border-gray-200 bg-white/95 p-0 shadow-2xl backdrop-blur-md"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        style={resolvedSlashPanelWidth ? { width: `${resolvedSlashPanelWidth}px` } : undefined}
+      >
+        <div className="grid min-h-[240px] grid-cols-[minmax(260px,340px)_minmax(0,1fr)]">
+          <div
+            ref={slashListRef}
+            className="max-h-[320px] overflow-y-auto border-r border-gray-200 p-3 custom-scrollbar"
+          >
+            {isSlashPanelLoading ? (
+              <div className="p-2 text-xs text-gray-500">{t('chatSlashLoading')}</div>
+            ) : (
+              <>
+                <div className="mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500">
+                  {t('chatSlashSectionSkills')}
+                </div>
+                {skillSlashItems.length === 0 ? (
+                  <div className="px-2 text-xs text-gray-400">{t('chatSlashNoResult')}</div>
+                ) : (
+                  <div className="space-y-1">
+                    {skillSlashItems.map((item, index) => {
+                      const isActive = index === activeSlashIndex;
+                      return (
+                        <button
+                          key={item.key}
+                          type="button"
+                          data-slash-index={index}
+                          onMouseEnter={() => onSetActiveSlashIndex(index)}
+                          onClick={() => onSelectSlashItem(item)}
+                          className={`flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition ${
+                            isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-700 hover:bg-gray-50'
+                          }`}
+                        >
+                          <span className="truncate text-xs font-semibold">{item.title}</span>
+                          <span className="truncate text-xs text-gray-500">{item.subtitle}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+          <div className="p-4">
+            {activeSlashItem ? (
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <span className="inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
+                    {activeSlashItem.subtitle}
+                  </span>
+                  <span className="text-sm font-semibold text-gray-900">{activeSlashItem.title}</span>
+                </div>
+                <p className="text-xs leading-5 text-gray-600">{activeSlashItem.description}</p>
+                <div className="space-y-1">
+                  {activeSlashItem.detailLines.map((line) => (
+                    <div key={line} className="rounded-md bg-gray-50 px-2 py-1 text-[11px] text-gray-600">
+                      {line}
+                    </div>
+                  ))}
+                </div>
+                <div className="pt-1 text-[11px] text-gray-500">{t('chatSlashSkillHint')}</div>
+              </div>
+            ) : (
+              <div className="text-xs text-gray-500">{t('chatSlashHint')}</div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputAttachButton.tsx

@@ -0,0 +1,24 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { t } from '@/lib/i18n';
+import { Paperclip } from 'lucide-react';
+
+export function ChatInputAttachButton() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            disabled
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-gray-400 cursor-not-allowed"
+          >
+            <Paperclip className="h-4 w-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          <p className="text-xs">{t('chatInputAttachComingSoon')}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputModelSelector.tsx

@@ -0,0 +1,58 @@
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { t } from '@/lib/i18n';
+import { Sparkles } from 'lucide-react';
+
+type ChatInputModelSelectorProps = {
+  modelOptions: ChatModelOption[];
+  selectedModel: string;
+  selectedModelOption?: ChatModelOption;
+  onSelectedModelChange: (value: string) => void;
+  isModelOptionsLoading: boolean;
+  hasModelOptions: boolean;
+};
+
+export function ChatInputModelSelector(props: ChatInputModelSelectorProps) {
+  return (
+    <Select
+      value={props.hasModelOptions ? props.selectedModel : undefined}
+      onValueChange={props.onSelectedModelChange}
+      disabled={!props.hasModelOptions}
+    >
+      <SelectTrigger className="h-8 w-auto min-w-[220px] rounded-lg border-0 bg-transparent shadow-none text-xs font-medium text-gray-600 hover:bg-gray-100 focus:ring-0 px-3">
+        {props.selectedModelOption ? (
+          <div className="flex min-w-0 items-center gap-2 text-left">
+            <Sparkles className="h-3.5 w-3.5 shrink-0 text-primary" />
+            <span className="truncate text-xs font-semibold text-gray-700">
+              {props.selectedModelOption.providerLabel}/{props.selectedModelOption.modelLabel}
+            </span>
+          </div>
+        ) : props.isModelOptionsLoading ? (
+          <div className="h-3 w-24 animate-pulse rounded bg-gray-200" />
+        ) : (
+          <SelectValue placeholder={t('chatSelectModel')} />
+        )}
+      </SelectTrigger>
+      <SelectContent className="w-[320px]">
+        {props.modelOptions.length === 0 &&
+          (props.isModelOptionsLoading ? (
+            <div className="space-y-2 px-3 py-2">
+              <div className="h-3 w-36 animate-pulse rounded bg-gray-200" />
+              <div className="h-3 w-28 animate-pulse rounded bg-gray-200" />
+              <div className="h-3 w-32 animate-pulse rounded bg-gray-200" />
+            </div>
+          ) : (
+            <div className="px-3 py-2 text-xs text-gray-500">{t('chatModelNoOptions')}</div>
+          ))}
+        {props.modelOptions.map((option) => (
+          <SelectItem key={option.value} value={option.value} className="py-2">
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <span className="truncate text-xs font-semibold text-gray-800">{option.modelLabel}</span>
+              <span className="truncate text-[11px] text-gray-500">{option.providerLabel}</span>
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputSendControls.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { ArrowUp, Square } from 'lucide-react';
+
+type ChatInputSendControlsProps = {
+  sendError?: string | null;
+  draft: string;
+  hasModelOptions: boolean;
+  sessionTypeUnavailable: boolean;
+  isSending: boolean;
+  canStopGeneration: boolean;
+  resolvedStopHint: string;
+  onSend: () => Promise<void> | void;
+  onStop: () => Promise<void> | void;
+};
+
+export function ChatInputSendControls(props: ChatInputSendControlsProps) {
+  return (
+    <div className="flex flex-col items-end gap-1">
+      {props.sendError?.trim() && <div className="max-w-[420px] text-right text-[11px] text-red-600">{props.sendError}</div>}
+      <div className="flex items-center gap-2">
+        {props.isSending ? (
+          props.canStopGeneration ? (
+            <Button size="icon" variant="outline" className="h-8 w-8 rounded-full" onClick={() => void props.onStop()}>
+              <Square className="h-3 w-3 fill-current" />
+            </Button>
+          ) : (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span>
+                    <Button size="icon" variant="outline" className="h-8 w-8 rounded-full" disabled>
+                      <Square className="h-3 w-3 fill-current" />
+                    </Button>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  <p className="text-xs">{props.resolvedStopHint}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )
+        ) : (
+          <Button
+            size="icon"
+            className="h-8 w-8 rounded-full"
+            onClick={() => void props.onSend()}
+            disabled={props.draft.trim().length === 0 || !props.hasModelOptions || props.sessionTypeUnavailable}
+          >
+            <ArrowUp className="h-5 w-5" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputSessionTypeSelector.tsx

@@ -0,0 +1,40 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { t } from '@/lib/i18n';
+
+type ChatInputSessionTypeSelectorProps = {
+  shouldShowSessionTypeSelector: boolean;
+  selectedSessionType?: string;
+  selectedSessionTypeOption: { value: string; label: string } | null;
+  sessionTypeOptions: Array<{ value: string; label: string }>;
+  onSelectedSessionTypeChange: (value: string) => void;
+  canEditSessionType: boolean;
+};
+
+export function ChatInputSessionTypeSelector(props: ChatInputSessionTypeSelectorProps) {
+  if (!props.shouldShowSessionTypeSelector) {
+    return null;
+  }
+
+  return (
+    <Select
+      value={props.selectedSessionType}
+      onValueChange={props.onSelectedSessionTypeChange}
+      disabled={!props.canEditSessionType}
+    >
+      <SelectTrigger className="h-8 w-auto min-w-[140px] rounded-lg border-0 bg-transparent shadow-none text-xs font-medium text-gray-600 hover:bg-gray-100 focus:ring-0 px-3">
+        {props.selectedSessionTypeOption ? (
+          <span className="truncate text-xs font-semibold text-gray-700">{props.selectedSessionTypeOption.label}</span>
+        ) : (
+          <SelectValue placeholder={t('chatSessionTypeLabel')} />
+        )}
+      </SelectTrigger>
+      <SelectContent className="w-[220px]">
+        {props.sessionTypeOptions.map((option) => (
+          <SelectItem key={option.value} value={option.value} className="py-2">
+            <span className="truncate text-xs font-semibold text-gray-800">{option.label}</span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/chat/chat-input/useChatInputBarController.ts

@@ -0,0 +1,313 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import type { MarketplaceInstalledRecord } from '@/api/types';
+import { t } from '@/lib/i18n';
+import type { ChatInputBarSlashItem } from '@/components/chat/chat-input.types';
+
+const SLASH_PANEL_MAX_WIDTH = 920;
+
+type RankedSkill = {
+  record: MarketplaceInstalledRecord;
+  score: number;
+  order: number;
+};
+
+type UseChatInputBarControllerParams = {
+  draft: string;
+  onDraftChange: (value: string) => void;
+  onSend: () => Promise<void> | void;
+  onStop: () => Promise<void> | void;
+  canStopGeneration: boolean;
+  isSending: boolean;
+  skillRecords: MarketplaceInstalledRecord[];
+  isSkillsLoading: boolean;
+  selectedSkills: string[];
+  onSelectedSkillsChange: (next: string[]) => void;
+};
+
+type SlashPanelControllerParams = {
+  draft: string;
+  onDraftChange: (value: string) => void;
+  onSend: () => Promise<void> | void;
+  onStop: () => Promise<void> | void;
+  isSending: boolean;
+  canStopGeneration: boolean;
+  isSkillsLoading: boolean;
+  selectedSkills: string[];
+  onSelectedSkillsChange: (next: string[]) => void;
+  skillRecords: MarketplaceInstalledRecord[];
+};
+
+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: MarketplaceInstalledRecord, query: string): number {
+  const normalizedQuery = normalizeSearchText(query);
+  if (!normalizedQuery) {
+    return 1;
+  }
+
+  const spec = normalizeSearchText(record.spec);
+  const label = normalizeSearchText(record.label || record.spec);
+  const description = normalizeSearchText(`${record.descriptionZh ?? ''} ${record.description ?? ''}`);
+  const labelTokens = label.split(/[\s/_-]+/).filter(Boolean);
+
+  if (spec === normalizedQuery) {
+    return 1200;
+  }
+  if (label === normalizedQuery) {
+    return 1150;
+  }
+  if (spec.startsWith(normalizedQuery)) {
+    return 1000;
+  }
+  if (label.startsWith(normalizedQuery)) {
+    return 950;
+  }
+  if (labelTokens.some((token) => token.startsWith(normalizedQuery))) {
+    return 900;
+  }
+  if (spec.includes(normalizedQuery)) {
+    return 800;
+  }
+  if (label.includes(normalizedQuery)) {
+    return 760;
+  }
+  if (description.includes(normalizedQuery)) {
+    return 500;
+  }
+  if (isSubsequenceMatch(normalizedQuery, label) || isSubsequenceMatch(normalizedQuery, spec)) {
+    return 300;
+  }
+  return 0;
+}
+
+function buildSkillSlashItems(skillRecords: MarketplaceInstalledRecord[], normalizedSlashQuery: string): ChatInputBarSlashItem[] {
+  const skillSortCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+  const rankedRecords: RankedSkill[] = skillRecords
+    .map((record, order) => ({
+      record,
+      score: scoreSkillRecord(record, normalizedSlashQuery),
+      order
+    }))
+    .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.spec).trim();
+      const rightLabel = (right.record.label || right.record.spec).trim();
+      const labelCompare = skillSortCollator.compare(leftLabel, rightLabel);
+      if (labelCompare !== 0) {
+        return labelCompare;
+      }
+      return left.order - right.order;
+    });
+
+  return rankedRecords
+    .map((entry) => entry.record)
+    .map((record) => ({
+      kind: 'skill',
+      key: `skill:${record.spec}`,
+      title: record.label || record.spec,
+      subtitle: t('chatSlashTypeSkill'),
+      description: (record.descriptionZh ?? record.description ?? '').trim() || t('chatSkillsPickerNoDescription'),
+      detailLines: [`${t('chatSlashSkillSpec')}: ${record.spec}`],
+      skillSpec: record.spec
+    }));
+}
+
+function useSlashPanelController(params: SlashPanelControllerParams) {
+  const [activeSlashIndex, setActiveSlashIndex] = useState(0);
+  const [dismissedSlashPanel, setDismissedSlashPanel] = useState(false);
+  const [slashPanelWidth, setSlashPanelWidth] = useState<number | null>(null);
+
+  const slashAnchorRef = useRef<HTMLDivElement | null>(null);
+  const slashListRef = useRef<HTMLDivElement | null>(null);
+
+  const slashQuery = useMemo(() => resolveSlashQuery(params.draft), [params.draft]);
+  const startsWithSlash = params.draft.startsWith('/');
+  const normalizedSlashQuery = slashQuery ?? '';
+
+  const skillSlashItems = useMemo(
+    () => buildSkillSlashItems(params.skillRecords, normalizedSlashQuery),
+    [normalizedSlashQuery, params.skillRecords]
+  );
+  const slashItems = useMemo(() => [...skillSlashItems], [skillSlashItems]);
+  const isSlashPanelOpen = slashQuery !== null && !dismissedSlashPanel;
+  const activeSlashItem = slashItems[activeSlashIndex] ?? null;
+  const isSlashPanelLoading = params.isSkillsLoading;
+  const resolvedSlashPanelWidth = slashPanelWidth ? Math.min(slashPanelWidth, SLASH_PANEL_MAX_WIDTH) : undefined;
+
+  useEffect(() => {
+    const anchor = slashAnchorRef.current;
+    if (!anchor || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const update = () => {
+      setSlashPanelWidth(anchor.getBoundingClientRect().width);
+    };
+    update();
+    const observer = new ResizeObserver(() => update());
+    observer.observe(anchor);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!isSlashPanelOpen || slashItems.length === 0) {
+      setActiveSlashIndex(0);
+      return;
+    }
+    setActiveSlashIndex((current) => {
+      if (current < 0) {
+        return 0;
+      }
+      if (current >= slashItems.length) {
+        return slashItems.length - 1;
+      }
+      return current;
+    });
+  }, [isSlashPanelOpen, slashItems.length]);
+
+  useEffect(() => {
+    if (!startsWithSlash && dismissedSlashPanel) {
+      setDismissedSlashPanel(false);
+    }
+  }, [dismissedSlashPanel, startsWithSlash]);
+
+  useEffect(() => {
+    if (!isSlashPanelOpen || isSlashPanelLoading || slashItems.length === 0) {
+      return;
+    }
+    const container = slashListRef.current;
+    if (!container) {
+      return;
+    }
+    const active = container.querySelector<HTMLElement>(`[data-slash-index="${activeSlashIndex}"]`);
+    active?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }, [activeSlashIndex, isSlashPanelLoading, isSlashPanelOpen, slashItems.length]);
+
+  const handleSelectSlashItem = useCallback((item: ChatInputBarSlashItem) => {
+    if (item.kind === 'skill' && item.skillSpec) {
+      if (!params.selectedSkills.includes(item.skillSpec)) {
+        params.onSelectedSkillsChange([...params.selectedSkills, item.skillSpec]);
+      }
+      params.onDraftChange('');
+      setDismissedSlashPanel(false);
+    }
+  }, [params]);
+
+  const onTextareaKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (isSlashPanelOpen && !event.nativeEvent.isComposing && (event.key === ' ' || event.code === 'Space')) {
+      setDismissedSlashPanel(true);
+    }
+    if (isSlashPanelOpen && slashItems.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setActiveSlashIndex((current) => (current + 1) % slashItems.length);
+        return;
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setActiveSlashIndex((current) => (current - 1 + slashItems.length) % slashItems.length);
+        return;
+      }
+      if ((event.key === 'Enter' && !event.shiftKey) || event.key === 'Tab') {
+        event.preventDefault();
+        const selected = slashItems[activeSlashIndex];
+        if (selected) {
+          handleSelectSlashItem(selected);
+        }
+        return;
+      }
+    }
+    if (event.key === 'Escape') {
+      if (isSlashPanelOpen) {
+        event.preventDefault();
+        setDismissedSlashPanel(true);
+        return;
+      }
+      if (params.isSending && params.canStopGeneration) {
+        event.preventDefault();
+        void params.onStop();
+        return;
+      }
+    }
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      void params.onSend();
+    }
+  }, [activeSlashIndex, handleSelectSlashItem, isSlashPanelOpen, params, slashItems]);
+
+  return {
+    slashAnchorRef,
+    slashListRef,
+    isSlashPanelOpen,
+    isSlashPanelLoading,
+    resolvedSlashPanelWidth,
+    skillSlashItems,
+    activeSlashIndex,
+    activeSlashItem,
+    onSelectSlashItem: handleSelectSlashItem,
+    onSlashPanelOpenChange: (open: boolean) => {
+      if (!open) {
+        setDismissedSlashPanel(true);
+      }
+    },
+    onSetActiveSlashIndex: setActiveSlashIndex,
+    onTextareaKeyDown
+  };
+}
+
+export function useChatInputBarController(params: UseChatInputBarControllerParams) {
+  const selectedSkillRecords = params.selectedSkills.map((spec) => {
+    const matched = params.skillRecords.find((record) => record.spec === spec);
+    return {
+      spec,
+      label: matched?.label || spec
+    };
+  });
+
+  const slashController = useSlashPanelController({
+    draft: params.draft,
+    onDraftChange: params.onDraftChange,
+    onSend: params.onSend,
+    onStop: params.onStop,
+    isSending: params.isSending,
+    canStopGeneration: params.canStopGeneration,
+    isSkillsLoading: params.isSkillsLoading,
+    selectedSkills: params.selectedSkills,
+    onSelectedSkillsChange: params.onSelectedSkillsChange,
+    skillRecords: params.skillRecords
+  });
+
+  return {
+    selectedSkillRecords,
+    ...slashController
+  };
+}

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

@@ -0,0 +1,15 @@
+export type ChatModelOption = {
+  value: string;
+  modelLabel: string;
+  providerLabel: string;
+};
+
+export type ChatInputBarSlashItem = {
+  kind: 'skill';
+  key: string;
+  title: string;
+  subtitle: string;
+  description: string;
+  detailLines: string[];
+  skillSpec?: string;
+};