nastechai-desktop 18.1.0

package/src/components/ui/control.ts

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+// Single source of truth for non-composer form-control chrome — Input,
+// Textarea, and SelectTrigger all consume this. Mirrors `buttonVariants`:
+// 2.5px radius, 12px text, padding-driven sizing (no fixed heights). The visual
+// chrome (background, border tint, hover, focus glow, invalid state) comes from
+// the `desktop-input-chrome` CSS so every control shares one exact look.
+export const controlVariants = cva(
+  'desktop-input-chrome w-full min-w-0 rounded-[2.5px] border text-xs leading-4 text-foreground outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        xs: 'px-2 py-0.5 text-[0.6875rem] leading-4',
+        sm: 'px-2 py-1',
+        default: 'px-2.5 py-1.5',
+        lg: 'px-3 py-2 text-sm leading-5'
+      }
+    },
+    defaultVariants: {
+      size: 'default'
+    }
+  }
+)
+
+export type ControlVariantProps = VariantProps<typeof controlVariants>

package/src/components/ui/copy-button.test.tsx

@@ -0,0 +1,36 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { I18nProvider } from '@/i18n'
+
+import { CopyButton } from './copy-button'
+
+describe('CopyButton i18n', () => {
+  afterEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+  })
+
+  it('uses localized default labels and copied feedback', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText }
+    })
+
+    render(
+      <I18nProvider configClient={null} initialLocale="zh">
+        <CopyButton text="hello" />
+      </I18nProvider>
+    )
+
+    const button = screen.getByRole('button', { name: '复制' })
+
+    expect(button.textContent).toContain('复制')
+    fireEvent.click(button)
+
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith('hello'))
+    await waitFor(() => expect(screen.getByRole('button', { name: '已复制' })).toBeTruthy())
+    expect(screen.getByRole('button', { name: '已复制' }).textContent).toContain('已复制')
+  })
+})

package/src/components/ui/copy-button.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { Check, Copy, X } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+type CopyPayload = string | (() => Promise<string> | string)
+type CopyButtonAppearance = 'button' | 'icon' | 'inline' | 'menu-item' | 'tool-row'
+type CopyStatus = 'copied' | 'error' | 'idle'
+const COPIED_RESET_MS = 1_500
+
+export async function writeClipboardText(text: string) {
+  if (!text) {
+    return
+  }
+
+  if (window.NASTECHDesktop?.writeClipboard) {
+    await window.NASTECHDesktop.writeClipboard(text)
+
+    return
+  }
+
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text)
+
+    return
+  }
+
+  throw new Error('Clipboard API is unavailable')
+}
+
+export interface CopyButtonProps {
+  appearance?: CopyButtonAppearance
+  buttonSize?: React.ComponentProps<typeof Button>['size']
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+  children?: React.ReactNode
+  className?: string
+  disabled?: boolean
+  errorMessage?: string
+  haptic?: boolean
+  iconClassName?: string
+  label?: string
+  onCopied?: () => void
+  onCopyError?: (error: unknown) => void
+  preventDefault?: boolean
+  showLabel?: boolean
+  stopPropagation?: boolean
+  text: CopyPayload
+  title?: string
+}
+
+export function CopyButton({
+  appearance = 'button',
+  buttonSize,
+  buttonVariant = 'ghost',
+  children,
+  className,
+  disabled = false,
+  errorMessage,
+  haptic = true,
+  iconClassName,
+  label,
+  onCopied,
+  onCopyError,
+  preventDefault = false,
+  showLabel,
+  stopPropagation = false,
+  text,
+  title
+}: CopyButtonProps) {
+  const { t } = useI18n()
+  const resolvedErrorMessage = errorMessage ?? t.common.copyFailed
+  const resolvedLabel = label ?? t.common.copy
+  const [status, setStatus] = React.useState<CopyStatus>('idle')
+  const resetRef = React.useRef<number | null>(null)
+
+  React.useEffect(() => {
+    return () => {
+      if (resetRef.current !== null) {
+        window.clearTimeout(resetRef.current)
+      }
+    }
+  }, [])
+
+  const copy = React.useCallback(
+    async (event?: Event | React.MouseEvent<HTMLElement>) => {
+      if (preventDefault) {
+        event?.preventDefault()
+      }
+
+      if (stopPropagation) {
+        event?.stopPropagation()
+      }
+
+      try {
+        const value = typeof text === 'function' ? await text() : text
+
+        if (!value) {
+          return
+        }
+
+        await writeClipboardText(value)
+
+        if (haptic) {
+          triggerHaptic('selection')
+        }
+
+        if (resetRef.current !== null) {
+          window.clearTimeout(resetRef.current)
+        }
+
+        setStatus('copied')
+        resetRef.current = window.setTimeout(() => {
+          setStatus('idle')
+          resetRef.current = null
+        }, COPIED_RESET_MS)
+        onCopied?.()
+      } catch (error) {
+        onCopyError?.(error)
+
+        if (resetRef.current !== null) {
+          window.clearTimeout(resetRef.current)
+        }
+
+        setStatus('error')
+        resetRef.current = window.setTimeout(() => {
+          setStatus('idle')
+          resetRef.current = null
+        }, COPIED_RESET_MS)
+      }
+    },
+    [haptic, onCopied, onCopyError, preventDefault, stopPropagation, text]
+  )
+
+  const Icon = status === 'copied' ? Check : status === 'error' ? X : Copy
+  const icon = <Icon className={cn('size-3.5', iconClassName)} />
+
+  const visibleChildren =
+    (showLabel ?? (appearance !== 'icon' && appearance !== 'tool-row'))
+      ? status === 'copied'
+        ? t.common.copied
+        : status === 'error'
+          ? t.common.failed
+          : (children ?? resolvedLabel)
+      : null
+
+  const content = (
+    <>
+      {icon}
+      {visibleChildren}
+    </>
+  )
+
+  const feedbackLabel =
+    status === 'copied' ? t.common.copied : status === 'error' ? resolvedErrorMessage : (title ?? resolvedLabel)
+  const ariaLabel = status === 'idle' ? resolvedLabel : feedbackLabel
+
+  if (appearance === 'menu-item') {
+    return (
+      <DropdownMenuItem
+        className={className}
+        disabled={disabled}
+        onSelect={event => {
+          event.preventDefault()
+          void copy(event)
+        }}
+      >
+        {content}
+      </DropdownMenuItem>
+    )
+  }
+
+  if (appearance === 'inline') {
+    return (
+      <button
+        aria-label={ariaLabel}
+        className={cn(
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[0.75rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40',
+          className
+        )}
+        disabled={disabled}
+        onClick={event => void copy(event)}
+        type="button"
+      >
+        {content}
+      </button>
+    )
+  }
+
+  if (appearance === 'tool-row') {
+    return (
+      <Tip label={feedbackLabel}>
+        <button
+          aria-label={ariaLabel}
+          className={cn(
+            'grid size-6 place-items-center rounded-md text-muted-foreground/70 opacity-0 transition-opacity hover:bg-accent/55 hover:text-foreground focus-visible:opacity-100 group-hover/tool-row:opacity-100 disabled:opacity-40',
+            className
+          )}
+          disabled={disabled}
+          onClick={event => void copy(event)}
+          type="button"
+        >
+          {icon}
+        </button>
+      </Tip>
+    )
+  }
+
+  const button = (
+    <Button
+      aria-label={ariaLabel}
+      className={className}
+      disabled={disabled}
+      onClick={event => void copy(event)}
+      size={buttonSize ?? (appearance === 'icon' ? 'icon' : 'default')}
+      type="button"
+      variant={buttonVariant}
+    >
+      {content}
+    </Button>
+  )
+
+  // Only icon-only buttons need a tooltip; the text variant already shows its label.
+  return appearance === 'icon' ? <Tip label={feedbackLabel}>{button}</Tip> : button
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,152 @@
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { useI18n } from '@/i18n'
+import { X } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        'fixed inset-0 z-[120] pointer-events-auto bg-black/22 backdrop-blur-[0.125rem] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className
+      )}
+      data-slot="dialog-overlay"
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  const { t } = useI18n()
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          // Cap height at 85vh and let long content scroll inside the dialog
+          // instead of overflowing off-screen (long cron titles, tool detail
+          // dumps, etc.). Individual dialogs can still override via className.
+          'fixed left-1/2 top-1/2 z-[130] pointer-events-auto grid max-h-[85vh] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-3 overflow-y-auto rounded-xl border border-(--stroke-nastech) bg-(--ui-chat-bubble-background) p-4 text-[length:var(--conversation-text-font-size)] text-foreground shadow-nastech duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          className
+        )}
+        data-slot="dialog-content"
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close asChild data-slot="dialog-close-button">
+            <Button
+              aria-label={t.common.close}
+              className="absolute right-2.5 top-2.5 text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground"
+              size="icon-xs"
+              variant="ghost"
+            >
+              <X className="size-4" />
+              <span className="sr-only">{t.common.close}</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-1 text-center sm:text-left', className)}
+      data-slot="dialog-header"
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  icon: Icon,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title> & {
+  // Pass a lucide icon to get the canonical dialog-header glyph: a plain
+  // primary-tinted icon inline with the title (no bg chip / ring). This is the
+  // single source of truth for dialog header icons — don't hand-roll wrappers.
+  icon?: React.ComponentType<{ className?: string }>
+}) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        'text-[0.9375rem] font-semibold tracking-tight text-foreground',
+        Icon && 'flex items-center gap-2',
+        className
+      )}
+      data-slot="dialog-title"
+      {...props}
+    >
+      {Icon ? <Icon className="size-4 shrink-0 text-primary" /> : null}
+      {children}
+    </DialogPrimitive.Title>
+  )
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn(
+        'text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)',
+        className
+      )}
+      data-slot="dialog-description"
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+}

package/src/components/ui/disclosure-caret.tsx

@@ -0,0 +1,20 @@
+import { Codicon, type CodiconProps } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+interface DisclosureCaretProps extends Omit<CodiconProps, 'name'> {
+  open: boolean
+}
+
+// Chrome caret for collapsible sections: points right when closed (▶),
+// rotates to point down (▼) when open. Override `className` to layer
+// hover/opacity styling; twMerge resolves transition conflicts.
+export function DisclosureCaret({ className, open, size = '0.75rem', ...props }: DisclosureCaretProps) {
+  return (
+    <Codicon
+      className={cn('transition-transform duration-150', open && 'rotate-90', className)}
+      name="chevron-right"
+      size={size}
+      {...props}
+    />
+  )
+}