@nextclaw/ui 0.6.14 → 0.7.0

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

@@ -1,83 +0,0 @@
-import { SkillsPicker } from '@/components/chat/SkillsPicker';
-import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
-import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import { ChatInputAttachButton } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputAttachButton';
-import { ChatInputModelSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputModelSelector';
-import { ChatInputSendControls } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputSendControls';
-import { ChatInputSessionTypeSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputSessionTypeSelector';
-import { ChatInputThinkingSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputThinkingSelector';
-import { t } from '@/lib/i18n';
-
-export function ChatInputBottomToolbar() {
-  const presenter = usePresenter();
-  const snapshot = useChatInputStore((state) => state.snapshot);
-
-  const hasModelOptions = snapshot.modelOptions.length > 0;
-  const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
-  const selectedModelOption = snapshot.modelOptions.find((option) => option.value === snapshot.selectedModel);
-  const shouldShowSessionTypeSelector =
-    snapshot.canEditSessionType &&
-    (snapshot.sessionTypeOptions.length > 1 ||
-      Boolean(snapshot.selectedSessionType && snapshot.selectedSessionType !== 'native'));
-  const selectedSessionTypeOption =
-    snapshot.sessionTypeOptions.find((option) => option.value === snapshot.selectedSessionType) ??
-    (snapshot.selectedSessionType
-      ? { value: snapshot.selectedSessionType, label: snapshot.selectedSessionType }
-      : null);
-  const resolvedStopHint =
-    snapshot.stopDisabledReason === '__preparing__'
-      ? t('chatStopPreparing')
-      : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
-  const selectedModelThinkingCapability = selectedModelOption?.thinkingCapability;
-  const thinkingSupportedLevels = selectedModelThinkingCapability?.supported ?? [];
-  const shouldShowThinkingSelector = thinkingSupportedLevels.length > 0;
-
-  return (
-    <div className="flex items-center justify-between px-3 pb-3">
-      <div className="flex items-center gap-1">
-        <SkillsPicker
-          records={snapshot.skillRecords}
-          isLoading={snapshot.isSkillsLoading}
-          selectedSkills={snapshot.selectedSkills}
-          onSelectedSkillsChange={presenter.chatInputManager.selectSkills}
-        />
-        <ChatInputSessionTypeSelector
-          shouldShowSessionTypeSelector={shouldShowSessionTypeSelector}
-          selectedSessionType={snapshot.selectedSessionType}
-          selectedSessionTypeOption={selectedSessionTypeOption}
-          sessionTypeOptions={snapshot.sessionTypeOptions}
-          onSelectedSessionTypeChange={presenter.chatInputManager.selectSessionType}
-          canEditSessionType={snapshot.canEditSessionType}
-        />
-        <ChatInputModelSelector
-          modelOptions={snapshot.modelOptions}
-          selectedModel={snapshot.selectedModel}
-          selectedModelOption={selectedModelOption}
-          onSelectedModelChange={presenter.chatInputManager.selectModel}
-          isModelOptionsLoading={isModelOptionsLoading}
-          hasModelOptions={hasModelOptions}
-        />
-        {shouldShowThinkingSelector ? (
-          <ChatInputThinkingSelector
-            supportedLevels={thinkingSupportedLevels}
-            selectedThinkingLevel={snapshot.selectedThinkingLevel}
-            defaultThinkingLevel={selectedModelThinkingCapability?.default ?? null}
-            onSelectedThinkingLevelChange={presenter.chatInputManager.selectThinkingLevel}
-          />
-        ) : null}
-        <ChatInputAttachButton />
-      </div>
-      <ChatInputSendControls
-        sendError={snapshot.sendError}
-        draft={snapshot.draft}
-        hasModelOptions={hasModelOptions}
-        sessionTypeUnavailable={snapshot.sessionTypeUnavailable}
-        isSending={snapshot.isSending}
-        canStopGeneration={snapshot.canStopGeneration}
-        resolvedStopHint={resolvedStopHint}
-        onSend={presenter.chatInputManager.send}
-        onStop={presenter.chatInputManager.stop}
-      />
-    </div>
-  );
-}

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

@@ -1,39 +0,0 @@
-import { t } from '@/lib/i18n';
-
-type ChatInputModelStateHintProps = {
-  isModelOptionsLoading: boolean;
-  isModelOptionsEmpty: boolean;
-  onGoToProviders: () => void;
-};
-
-export function ChatInputModelStateHint(props: ChatInputModelStateHintProps) {
-  if (!props.isModelOptionsLoading && !props.isModelOptionsEmpty) {
-    return null;
-  }
-
-  if (props.isModelOptionsLoading) {
-    return (
-      <div className="px-4 pb-2">
-        <div className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-          <span className="h-3 w-28 animate-pulse rounded bg-gray-200" />
-          <span className="h-3 w-16 animate-pulse rounded bg-gray-200" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="px-4 pb-2">
-      <div className="inline-flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs text-amber-800">
-        <span>{t('chatModelNoOptions')}</span>
-        <button
-          type="button"
-          onClick={props.onGoToProviders}
-          className="font-semibold text-amber-900 underline-offset-2 hover:underline"
-        >
-          {t('chatGoConfigureProvider')}
-        </button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,31 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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(220px,300px)_minmax(0,1fr)]">
-          <div
-            ref={slashListRef}
-            className="max-h-[320px] overflow-y-auto border-r border-gray-200 p-2.5 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="max-w-[320px] p-3.5">
-            {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

@@ -1,24 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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/components/bottom-toolbar/ChatInputThinkingSelector.tsx

@@ -1,74 +0,0 @@
-import type { ThinkingLevel } from '@/api/types';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { t } from '@/lib/i18n';
-import { Brain } from 'lucide-react';
-
-type ChatInputThinkingSelectorProps = {
-  supportedLevels: ThinkingLevel[];
-  selectedThinkingLevel: ThinkingLevel | null;
-  defaultThinkingLevel?: ThinkingLevel | null;
-  onSelectedThinkingLevelChange: (value: ThinkingLevel) => void;
-};
-
-function thinkingLabel(level: ThinkingLevel): string {
-  if (level === 'off') {
-    return t('chatThinkingLevelOff');
-  }
-  if (level === 'minimal') {
-    return t('chatThinkingLevelMinimal');
-  }
-  if (level === 'low') {
-    return t('chatThinkingLevelLow');
-  }
-  if (level === 'medium') {
-    return t('chatThinkingLevelMedium');
-  }
-  if (level === 'high') {
-    return t('chatThinkingLevelHigh');
-  }
-  if (level === 'adaptive') {
-    return t('chatThinkingLevelAdaptive');
-  }
-  return t('chatThinkingLevelXhigh');
-}
-
-function normalizeLevels(levels: ThinkingLevel[]): ThinkingLevel[] {
-  const deduped: ThinkingLevel[] = [];
-  for (const level of ['off', ...levels] as ThinkingLevel[]) {
-    if (!deduped.includes(level)) {
-      deduped.push(level);
-    }
-  }
-  return deduped;
-}
-
-export function ChatInputThinkingSelector(props: ChatInputThinkingSelectorProps) {
-  if (props.supportedLevels.length === 0) {
-    return null;
-  }
-
-  const options = normalizeLevels(props.supportedLevels);
-  const fallback = options.includes('off') ? 'off' : options[0];
-  const resolvedValue =
-    (props.selectedThinkingLevel && options.includes(props.selectedThinkingLevel) && props.selectedThinkingLevel) ||
-    (props.defaultThinkingLevel && options.includes(props.defaultThinkingLevel) && props.defaultThinkingLevel) ||
-    fallback;
-
-  return (
-    <Select value={resolvedValue} onValueChange={(value) => props.onSelectedThinkingLevelChange(value as ThinkingLevel)}>
-      <SelectTrigger className="h-8 w-auto min-w-[150px] rounded-lg border-0 bg-transparent px-3 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0">
-        <div className="flex min-w-0 items-center gap-2 text-left">
-          <Brain className="h-3.5 w-3.5 shrink-0 text-gray-500" />
-          <span className="truncate text-xs font-semibold text-gray-700">{thinkingLabel(resolvedValue)}</span>
-        </div>
-      </SelectTrigger>
-      <SelectContent className="w-[180px]">
-        {options.map((level) => (
-          <SelectItem key={level} value={level}>
-            {thinkingLabel(level)}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}