nastechai-desktop 18.1.0

package/src/app/chat/composer/text-utils.ts

@@ -0,0 +1,107 @@
+import { DATA_IMAGE_URL_RE, dataUrlToBlob } from '@/lib/embedded-images'
+
+export interface TriggerState {
+  kind: '@' | '/'
+  query: string
+  tokenLength: number
+}
+
+const TRIGGER_RE = /(?:^|[\s])([@/])([^\s@/]*)$/
+
+/** Stable key for paste dedupe — `items` and `files` often mirror the same image as different objects. */
+export function blobDedupeKey(blob: Blob): string {
+  if (blob instanceof File) {
+    return `file:${blob.name}:${blob.size}:${blob.type}:${blob.lastModified}`
+  }
+
+  return `blob:${blob.size}:${blob.type}`
+}
+
+export function extractClipboardImageBlobs(clipboard: DataTransfer): Blob[] {
+  const blobs: Blob[] = []
+  const seen = new Set<string>()
+
+  const push = (blob: Blob | null) => {
+    if (!blob || blob.size === 0) {
+      return
+    }
+
+    const key = blobDedupeKey(blob)
+
+    if (seen.has(key)) {
+      return
+    }
+
+    seen.add(key)
+    blobs.push(blob)
+  }
+
+  if (clipboard.items?.length) {
+    for (const item of clipboard.items) {
+      if (item.kind === 'file' && item.type.startsWith('image/')) {
+        push(item.getAsFile())
+      }
+    }
+  }
+
+  // Chromium/Electron expose the same pasted image on both `items` and `files`.
+  if (blobs.length === 0 && clipboard.files?.length) {
+    for (let i = 0; i < clipboard.files.length; i += 1) {
+      const file = clipboard.files.item(i)
+
+      if (file && file.type.startsWith('image/')) {
+        push(file)
+      }
+    }
+  }
+
+  if (blobs.length > 0) {
+    return blobs
+  }
+
+  const text = clipboard.getData('text/plain').trim()
+
+  if (DATA_IMAGE_URL_RE.test(text)) {
+    push(dataUrlToBlob(text))
+  }
+
+  if (blobs.length === 0) {
+    const html = clipboard.getData('text/html')
+
+    if (html) {
+      const matches = html.matchAll(/<img\b[^>]*?\bsrc\s*=\s*["'](data:image\/[^"']+)["']/gi)
+
+      for (const match of matches) {
+        push(dataUrlToBlob(match[1]))
+      }
+    }
+  }
+
+  return blobs
+}
+
+/** Caret-anchored text before the cursor, or null if the selection isn't a collapsed caret inside `editor`. */
+export function textBeforeCaret(editor: HTMLDivElement): string | null {
+  const sel = window.getSelection()
+  const range = sel?.rangeCount ? sel.getRangeAt(0) : null
+
+  if (!range?.collapsed || !editor.contains(range.commonAncestorContainer)) {
+    return null
+  }
+
+  const before = range.cloneRange()
+  before.selectNodeContents(editor)
+  before.setEnd(range.startContainer, range.startOffset)
+
+  return before.toString()
+}
+
+export function detectTrigger(textBefore: string): TriggerState | null {
+  const match = TRIGGER_RE.exec(textBefore)
+
+  if (!match) {
+    return null
+  }
+
+  return { kind: match[1] as '@' | '/', query: match[2], tokenLength: 1 + match[2].length }
+}

package/src/app/chat/composer/trigger-popover.test.tsx

@@ -0,0 +1,42 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { I18nProvider } from '@/i18n'
+
+import { ComposerTriggerPopover } from './trigger-popover'
+
+function renderPopover(kind: '@' | '/', loading = false) {
+  const onHover = vi.fn()
+  const onPick = vi.fn()
+
+  const rendered = render(
+    <I18nProvider configClient={null} initialLocale="zh">
+      <ComposerTriggerPopover activeIndex={0} items={[]} kind={kind} loading={loading} onHover={onHover} onPick={onPick} />
+    </I18nProvider>
+  )
+
+  return { ...rendered, onHover, onPick }
+}
+
+describe('ComposerTriggerPopover i18n', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders localized empty lookup copy for @ references', () => {
+    const { container } = renderPopover('@')
+
+    expect(screen.getByText('没有匹配项。')).toBeTruthy()
+    expect(container.textContent).toContain('试试')
+    expect(container.textContent).toContain('@file:')
+    expect(container.textContent).toContain('或')
+    expect(container.textContent).toContain('@folder:')
+  })
+
+  it('renders localized loading copy for slash commands', () => {
+    const { container } = renderPopover('/', true)
+
+    expect(screen.getByText('查找中…')).toBeTruthy()
+    expect(container.textContent).toContain('/help')
+  })
+})

package/src/app/chat/composer/trigger-popover.tsx

@@ -0,0 +1,116 @@
+import type { Unstable_TriggerItem } from '@assistant-ui/core'
+
+import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+
+import {
+  COMPLETION_DRAWER_BELOW_CLASS,
+  COMPLETION_DRAWER_CLASS,
+  COMPLETION_DRAWER_ROW_CLASS,
+  CompletionDrawerEmpty
+} from './completion-drawer'
+
+const AT_ICON_BY_TYPE: Record<string, string> = {
+  diff: 'diff',
+  file: 'book',
+  folder: 'folder',
+  git: 'git-branch',
+  image: 'file-media',
+  simple: 'symbol-misc',
+  staged: 'diff-added',
+  tool: 'tools',
+  url: 'globe'
+}
+
+function completionIcon(kind: '@' | '/', item: Unstable_TriggerItem) {
+  if (kind === '/') {
+    return 'terminal'
+  }
+
+  const meta = item.metadata as { rawText?: string } | undefined
+  const raw = meta?.rawText || item.label
+
+  if (raw.startsWith('@diff')) {
+    return AT_ICON_BY_TYPE.diff
+  }
+
+  if (raw.startsWith('@staged')) {
+    return AT_ICON_BY_TYPE.staged
+  }
+
+  return AT_ICON_BY_TYPE[item.type] || AT_ICON_BY_TYPE.simple
+}
+
+interface ComposerTriggerPopoverProps {
+  activeIndex: number
+  items: readonly Unstable_TriggerItem[]
+  kind: '@' | '/'
+  loading: boolean
+  onHover: (index: number) => void
+  onPick: (item: Unstable_TriggerItem) => void
+  placement?: 'bottom' | 'top'
+}
+
+export function ComposerTriggerPopover({
+  activeIndex,
+  items,
+  kind,
+  loading,
+  onHover,
+  onPick,
+  placement = 'top'
+}: ComposerTriggerPopoverProps) {
+  const { t } = useI18n()
+  const copy = t.composer
+
+  return (
+    <div
+      className={placement === 'bottom' ? COMPLETION_DRAWER_BELOW_CLASS : COMPLETION_DRAWER_CLASS}
+      data-slot="composer-completion-drawer"
+      data-state="open"
+      onMouseDown={event => event.preventDefault()}
+      role="listbox"
+    >
+      {items.length === 0 ? (
+        <CompletionDrawerEmpty title={loading ? copy.lookupLoading : copy.lookupNoMatches}>
+          {kind === '@' ? (
+            <>
+              {copy.lookupTry} <span className="font-mono text-foreground/80">@file:</span> {copy.lookupOr}{' '}
+              <span className="font-mono text-foreground/80">@folder:</span>.
+            </>
+          ) : (
+            <>
+              {copy.lookupTry} <span className="font-mono text-foreground/80">/help</span>.
+            </>
+          )}
+        </CompletionDrawerEmpty>
+      ) : (
+        items.map((item, index) => {
+          const meta = item.metadata as { display?: string; meta?: string } | undefined
+          const display = meta?.display ?? (kind === '/' ? `/${item.label}` : item.label)
+          const description = meta?.meta || item.description
+
+          return (
+            <button
+              className={cn(COMPLETION_DRAWER_ROW_CLASS, index === activeIndex && 'bg-(--ui-bg-tertiary)')}
+              data-highlighted={index === activeIndex ? '' : undefined}
+              key={item.id}
+              onClick={() => onPick(item)}
+              onMouseEnter={() => onHover(index)}
+              type="button"
+            >
+              <span className="grid size-3.5 shrink-0 place-items-center text-(--ui-text-tertiary)">
+                <Codicon name={completionIcon(kind, item)} size="0.875rem" />
+              </span>
+              <span className="min-w-0 shrink truncate font-mono font-medium leading-5 text-foreground">{display}</span>
+              {description && (
+                <span className="min-w-0 flex-1 truncate leading-5 text-(--ui-text-tertiary)">{description}</span>
+              )}
+            </button>
+          )
+        })
+      )}
+    </div>
+  )
+}

package/src/app/chat/composer/types.ts

@@ -0,0 +1,64 @@
+import type { NasTechGateway } from '@/nastech'
+import type { ComposerAttachment } from '@/store/composer'
+
+import type { DroppedFile } from '../hooks/use-composer-actions'
+
+export interface ContextSuggestion {
+  text: string
+  display: string
+  meta?: string
+}
+
+export interface QuickModelOption {
+  provider: string
+  providerName: string
+  model: string
+}
+
+export interface ChatBarState {
+  model: {
+    model: string
+    provider: string
+    canSwitch: boolean
+    loading?: boolean
+    quickModels?: QuickModelOption[]
+  }
+  tools: { enabled: boolean; label: string; suggestions?: ContextSuggestion[] }
+  voice: { enabled: boolean; active: boolean }
+}
+
+export interface ChatBarProps {
+  busy: boolean
+  disabled: boolean
+  focusKey?: string | null
+  maxRecordingSeconds?: number
+  state: ChatBarState
+  gateway?: NasTechGateway | null
+  queueSessionKey?: string | null
+  sessionId?: string | null
+  cwd?: string | null
+  onCancel: () => Promise<void> | void
+  onAddContextRef?: (refText: string, label?: string, detail?: string) => void
+  onAddUrl?: (url: string) => void
+  onAttachImageBlob?: (blob: Blob) => Promise<boolean | void> | boolean | void
+  onAttachDroppedItems?: (candidates: DroppedFile[]) => Promise<boolean | void> | boolean | void
+  onPasteClipboardImage?: () => void
+  onPickFiles?: () => void
+  onPickFolders?: () => void
+  onPickImages?: () => void
+  onRemoveAttachment?: (id: string) => void
+  onSteer?: (text: string) => Promise<boolean> | boolean
+  onSubmit: (
+    value: string,
+    options?: { attachments?: ComposerAttachment[]; fromQueue?: boolean }
+  ) => Promise<boolean> | boolean
+  onTranscribeAudio?: (audio: Blob) => Promise<string>
+}
+
+export type VoiceStatus = 'idle' | 'recording' | 'transcribing'
+
+export interface VoiceActivityState {
+  elapsedSeconds: number
+  level: number
+  status: VoiceStatus
+}

package/src/app/chat/composer/url-dialog.tsx

@@ -0,0 +1,82 @@
+import type * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { useI18n } from '@/i18n'
+import { Globe } from '@/lib/icons'
+
+const URL_HINT = /^https?:\/\//i
+
+export function UrlDialog({
+  inputRef,
+  onChange,
+  onOpenChange,
+  onSubmit,
+  open,
+  value
+}: {
+  inputRef: React.RefObject<HTMLInputElement | null>
+  onChange: (value: string) => void
+  onOpenChange: (open: boolean) => void
+  onSubmit: () => void
+  open: boolean
+  value: string
+}) {
+  const { t } = useI18n()
+  const c = t.composer
+  const trimmed = value.trim()
+  const looksLikeUrl = trimmed.length > 0 && URL_HINT.test(trimmed)
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-w-md gap-5">
+        <DialogHeader>
+          <DialogTitle icon={Globe}>{c.attachUrlTitle}</DialogTitle>
+          <DialogDescription>{c.attachUrlDesc}</DialogDescription>
+        </DialogHeader>
+        <form
+          className="grid gap-4"
+          onSubmit={e => {
+            e.preventDefault()
+            onSubmit()
+          }}
+        >
+          <div className="grid gap-1.5">
+            <Input
+              autoComplete="off"
+              autoCorrect="off"
+              inputMode="url"
+              onChange={e => onChange(e.target.value)}
+              placeholder={c.urlPlaceholder}
+              ref={inputRef}
+              spellCheck={false}
+              value={value}
+            />
+            {trimmed.length > 0 && !looksLikeUrl && (
+              <p className="text-xs text-muted-foreground/85">
+                {c.urlHintPre}
+                <span className="font-mono">https://…</span>
+              </p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button onClick={() => onOpenChange(false)} type="button" variant="ghost">
+              {t.common.cancel}
+            </Button>
+            <Button disabled={!looksLikeUrl} type="submit">
+              {c.attach}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/app/chat/composer/voice-activity.tsx

@@ -0,0 +1,252 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useRef } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { useI18n } from '@/i18n'
+import { Loader2, Mic, Volume2, VolumeX } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { stopVoicePlayback } from '@/lib/voice-playback'
+import { $voicePlayback } from '@/store/voice-playback'
+
+import type { VoiceActivityState } from './types'
+
+type BrowserAudioContext = typeof AudioContext
+
+interface ElementAnalyser {
+  analyser: AnalyserNode
+}
+
+const elementAnalysers = new WeakMap<HTMLAudioElement, ElementAnalyser>()
+let playbackAudioContext: AudioContext | null = null
+
+function getPlaybackAudioContext(): AudioContext | null {
+  if (playbackAudioContext && playbackAudioContext.state !== 'closed') {
+    return playbackAudioContext
+  }
+
+  const audioWindow = window as Window & { webkitAudioContext?: BrowserAudioContext }
+  const AudioContextCtor = window.AudioContext || audioWindow.webkitAudioContext
+
+  if (!AudioContextCtor) {
+    return null
+  }
+
+  playbackAudioContext = new AudioContextCtor()
+
+  return playbackAudioContext
+}
+
+function formatElapsed(seconds: number) {
+  const safeSeconds = Math.max(0, Math.floor(seconds))
+  const minutes = Math.floor(safeSeconds / 60)
+  const remainingSeconds = safeSeconds % 60
+
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
+}
+
+function VoiceLevelBars({ level, active }: { active: boolean; level: number }) {
+  const normalized = Math.max(0, Math.min(level, 1))
+  const bars = [0.5, 0.78, 1, 0.78, 0.5]
+
+  return (
+    <div aria-hidden="true" className="flex h-4 items-center gap-0.5">
+      {bars.map((weight, index) => {
+        const height = active ? 0.25 + Math.min(0.68, normalized * weight) : 0.25
+
+        return (
+          <span
+            className={cn(
+              'w-0.5 rounded-full bg-current transition-[height,opacity] duration-100 ease-out',
+              active ? 'opacity-80' : 'animate-pulse opacity-45'
+            )}
+            key={index}
+            style={{ height: `${height * 100}%` }}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+function getElementAnalyser(audioElement: HTMLAudioElement): ElementAnalyser | null {
+  let entry = elementAnalysers.get(audioElement)
+
+  if (!entry) {
+    const context = getPlaybackAudioContext()
+
+    if (!context) {
+      return null
+    }
+
+    const source = context.createMediaElementSource(audioElement)
+    const analyser = context.createAnalyser()
+
+    analyser.fftSize = 512
+    analyser.smoothingTimeConstant = 0.65
+    source.connect(analyser)
+    analyser.connect(context.destination)
+    entry = { analyser }
+    elementAnalysers.set(audioElement, entry)
+  }
+
+  void playbackAudioContext?.resume()
+
+  return entry
+}
+
+const WAVE_W = 88
+const WAVE_H = 16
+const BAR_W = 2
+const BAR_GAP = 5
+const STEP = BAR_W + BAR_GAP
+const BARS = Math.floor((WAVE_W + BAR_GAP) / STEP)
+const X0 = Math.round((WAVE_W - (BARS * STEP - BAR_GAP)) / 2)
+
+function PlaybackWaveform({ audioElement }: { audioElement: HTMLAudioElement | null }) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+
+    if (!canvas || !audioElement) {
+      return
+    }
+
+    const entry = getElementAnalyser(audioElement)
+    const ctx = canvas.getContext('2d')
+
+    if (!entry || !ctx) {
+      return
+    }
+
+    const dpr = Math.max(1, window.devicePixelRatio || 1)
+    const { analyser } = entry
+    const buf = new Uint8Array(analyser.frequencyBinCount)
+    const hi = Math.floor(buf.length * 0.9)
+
+    canvas.width = Math.round(WAVE_W * dpr)
+    canvas.height = Math.round(WAVE_H * dpr)
+    canvas.style.width = `${WAVE_W}px`
+    canvas.style.height = `${WAVE_H}px`
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.imageSmoothingEnabled = false
+    ctx.fillStyle = getComputedStyle(canvas).color
+
+    let raf = 0
+
+    const tick = () => {
+      analyser.getByteFrequencyData(buf)
+      ctx.clearRect(0, 0, WAVE_W, WAVE_H)
+
+      for (let i = 0; i < BARS; i++) {
+        const a = Math.floor((i / BARS) * hi)
+        const b = Math.floor(((i + 1) / BARS) * hi)
+        let peak = 0
+
+        for (let j = a; j < b; j++) {
+          peak = Math.max(peak, buf[j] ?? 0)
+        }
+
+        const amp = Math.sqrt(peak / 255)
+        const bh = Math.max(3, Math.round((0.18 + amp * 0.82) * WAVE_H))
+        ctx.fillRect(X0 + i * STEP, Math.round((WAVE_H - bh) / 2), BAR_W, bh)
+      }
+
+      raf = requestAnimationFrame(tick)
+    }
+
+    tick()
+
+    return () => cancelAnimationFrame(raf)
+  }, [audioElement])
+
+  return <canvas aria-hidden="true" className="block h-4 w-[88px]" ref={canvasRef} />
+}
+
+export function VoiceActivity({ state }: { state: VoiceActivityState }) {
+  const { t } = useI18n()
+
+  if (state.status === 'idle') {
+    return null
+  }
+
+  const recording = state.status === 'recording'
+  const title = recording ? t.composer.dictating : t.composer.transcribing
+
+  return (
+    <div
+      aria-live="polite"
+      className={cn(
+        'flex h-8 items-center gap-2 rounded-xl border border-border/55 bg-muted/55 px-2.5 text-xs text-muted-foreground',
+        'shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] backdrop-blur-sm'
+      )}
+      role="status"
+    >
+      <div
+        className={cn(
+          'flex size-5 shrink-0 items-center justify-center rounded-full',
+          recording ? 'bg-primary/15 text-primary' : 'bg-primary/10 text-primary'
+        )}
+      >
+        {recording ? <Mic size={12} /> : <Loader2 className="animate-spin" size={12} />}
+      </div>
+
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <span className="truncate font-medium text-foreground/85">{title}</span>
+        <span className="font-mono text-[0.6875rem] text-muted-foreground/85">
+          {formatElapsed(state.elapsedSeconds)}
+        </span>
+      </div>
+
+      <VoiceLevelBars active={recording} level={state.level} />
+    </div>
+  )
+}
+
+export function VoicePlaybackActivity() {
+  const { t } = useI18n()
+  const playback = useStore($voicePlayback)
+
+  if (playback.status === 'idle') {
+    return null
+  }
+
+  const preparing = playback.status === 'preparing'
+
+  const title = preparing
+    ? t.composer.preparingAudio
+    : playback.source === 'voice-conversation'
+      ? t.composer.speakingResponse
+      : t.composer.readingAloud
+
+  return (
+    <div
+      aria-live="polite"
+      className={cn(
+        'flex h-8 items-center gap-2 rounded-xl border border-primary/20 bg-primary/10 px-2.5 text-xs text-primary',
+        'shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] backdrop-blur-sm'
+      )}
+      role="status"
+    >
+      <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary">
+        {preparing ? <Loader2 className="animate-spin" size={12} /> : <Volume2 size={12} />}
+      </div>
+
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <span className="truncate font-medium text-foreground/85">{title}</span>
+        {!preparing && <PlaybackWaveform audioElement={playback.audioElement} />}
+      </div>
+
+      <Button
+        className="h-6 shrink-0 gap-1 rounded-full px-2 text-[0.6875rem]"
+        onClick={stopVoicePlayback}
+        size="sm"
+        type="button"
+        variant="ghost"
+      >
+        <VolumeX size={12} />
+        Stop
+      </Button>
+    </div>
+  )
+}