nastechai-desktop 18.1.0

package/src/app/chat/chat-drop-overlay.tsx

@@ -0,0 +1,48 @@
+import { useRef } from 'react'
+
+import type { DragKind } from '@/app/chat/hooks/use-file-drop-zone'
+import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+
+const ICONS: Record<'files' | 'session', string> = {
+  files: 'cloud-upload',
+  session: 'comment-discussion'
+}
+
+/**
+ * Full-bleed affordance shown while files or a session are dragged over the chat
+ * area. Always `pointer-events-none` so the drop lands on the real element
+ * underneath and the drop-zone handler claims it — the overlay is purely visual.
+ * Copy adapts to whatever is being dragged; the last kind is held through the
+ * fade-out so the label doesn't blank.
+ */
+export function ChatDropOverlay({ kind }: { kind: DragKind }) {
+  const { t } = useI18n()
+  const lastKind = useRef<'files' | 'session'>('files')
+
+  if (kind) {
+    lastKind.current = kind
+  }
+
+  const resolvedKind = kind ?? lastKind.current
+  const icon = ICONS[resolvedKind]
+  const label = resolvedKind === 'files' ? t.composer.dropFiles : t.composer.dropSession
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-0 z-40 flex items-center justify-center p-4 transition-opacity duration-150 ease-out',
+        kind ? 'opacity-100' : 'opacity-0'
+      )}
+      data-slot="chat-drop-overlay"
+    >
+      <div className="absolute inset-2 rounded-2xl border-2 border-dashed border-[color-mix(in_srgb,var(--dt-composer-ring)_55%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_55%,transparent)] backdrop-blur-[2px] [-webkit-backdrop-filter:blur(2px)]" />
+      <div className="relative flex items-center gap-2 rounded-full border border-[color-mix(in_srgb,var(--dt-composer-ring)_45%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_92%,transparent)] px-4 py-2 text-[0.8125rem] font-medium text-foreground shadow-composer">
+        <Codicon className="text-(--ui-accent)" name={icon} size="1rem" />
+        {label}
+      </div>
+    </div>
+  )
+}

package/src/app/chat/chat-swap-overlay.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+
+import { useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+
+// Braille spinner frames — reads as a tiny ASCII loader in monospace.
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+
+// Shown over the conversation while the live gateway swaps to another profile's
+// backend (lazily spawned). Keeps the last profile name through the fade-out so
+// the label doesn't blank. Purely visual — pointer-events-none.
+export function ChatSwapOverlay({ profile }: { profile: string | null }) {
+  const { t } = useI18n()
+  const [frame, setFrame] = useState(0)
+  const [label, setLabel] = useState<null | string>(profile)
+
+  useEffect(() => {
+    if (profile) {
+      setLabel(profile)
+    }
+  }, [profile])
+
+  useEffect(() => {
+    if (!profile) {
+      return
+    }
+
+    const id = window.setInterval(() => setFrame(value => (value + 1) % FRAMES.length), 80)
+
+    return () => window.clearInterval(id)
+  }, [profile])
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-0 z-50 flex items-center justify-center transition-opacity duration-150 ease-out',
+        profile ? 'opacity-100' : 'opacity-0'
+      )}
+    >
+      <div className="flex items-center gap-2 bg-[color-mix(in_srgb,var(--dt-card)_92%,transparent)] px-4 py-2 font-mono text-[0.8125rem] text-foreground shadow-composer">
+        <span className="w-3 text-(--ui-accent)">{FRAMES[frame]}</span>
+        {t.composer.wakingProfile(label ?? '')}
+      </div>
+    </div>
+  )
+}

package/src/app/chat/composer/attachments.tsx

@@ -0,0 +1,114 @@
+import { useStore } from '@nanostores/react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
+import { FileText, FolderOpen, ImageIcon, Link, Terminal } from '@/lib/icons'
+import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
+import type { ComposerAttachment } from '@/store/composer'
+import { notifyError } from '@/store/notifications'
+import { setCurrentSessionPreviewTarget } from '@/store/preview'
+import { $currentCwd } from '@/store/session'
+
+export function AttachmentList({
+  attachments,
+  onRemove
+}: {
+  attachments: ComposerAttachment[]
+  onRemove?: (id: string) => void
+}) {
+  return (
+    <div className="flex max-w-full flex-wrap gap-1.5 px-1 pt-1" data-slot="composer-attachments">
+      {attachments.map(attachment => (
+        <AttachmentPill attachment={attachment} key={attachment.id} onRemove={onRemove} />
+      ))}
+    </div>
+  )
+}
+
+function AttachmentPill({ attachment, onRemove }: { attachment: ComposerAttachment; onRemove?: (id: string) => void }) {
+  const { t } = useI18n()
+  const c = t.composer
+  const Icon = { folder: FolderOpen, url: Link, image: ImageIcon, file: FileText, terminal: Terminal }[attachment.kind]
+  const cwd = useStore($currentCwd)
+  const canPreview = attachment.kind !== 'folder' && attachment.kind !== 'terminal'
+  const detail = attachment.detail && attachment.detail !== attachment.label ? attachment.detail : undefined
+
+  async function openPreview() {
+    if (!canPreview) {
+      return
+    }
+
+    const rawTarget =
+      attachment.path ||
+      attachment.detail ||
+      attachment.refText?.replace(/^@(file|image|url):/, '') ||
+      attachment.label ||
+      ''
+
+    const target = rawTarget.replace(/^`|`$/g, '')
+
+    if (!target) {
+      return
+    }
+
+    try {
+      const preview = await normalizeOrLocalPreviewTarget(target, cwd || undefined)
+
+      if (!preview) {
+        throw new Error(c.couldNotPreview(attachment.label))
+      }
+
+      setCurrentSessionPreviewTarget(preview, 'manual', target)
+    } catch (error) {
+      notifyError(error, c.previewUnavailable)
+    }
+  }
+
+  return (
+    <Tip label={attachment.path || attachment.detail || attachment.label}>
+      <div className="group/attachment relative min-w-0 shrink-0">
+        <button
+          aria-label={canPreview ? c.previewLabel(attachment.label) : attachment.label}
+          className="flex max-w-56 items-center gap-2 border border-border/60 bg-background/50 px-2 py-1.5 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] transition-colors hover:border-primary/35 hover:bg-accent/45 disabled:cursor-default"
+          disabled={!canPreview}
+          onClick={() => void openPreview()}
+          type="button"
+        >
+          {attachment.previewUrl && attachment.kind === 'image' ? (
+            <img
+              alt={attachment.label}
+              className="size-8 shrink-0 border border-border/70 object-cover"
+              draggable={false}
+              src={attachment.previewUrl}
+            />
+          ) : (
+            <span className="grid size-8 shrink-0 place-items-center border border-border/55 bg-muted/35 text-muted-foreground">
+              <Icon className="size-3.5" />
+            </span>
+          )}
+          <span className="min-w-0">
+            <span className="block truncate text-[0.72rem] font-medium leading-4 text-foreground/90">
+              {attachment.label}
+            </span>
+            {detail && (
+              <span className="block truncate font-mono text-[0.6rem] leading-3 text-muted-foreground/65">
+                {detail}
+              </span>
+            )}
+          </span>
+        </button>
+        {onRemove && (
+          <button
+            aria-label={c.removeAttachment(attachment.label)}
+            className="absolute -right-1 -top-1 grid size-3.5 place-items-center rounded-full border border-border/70 bg-background text-muted-foreground opacity-0 shadow-xs transition hover:bg-accent hover:text-foreground group-hover/attachment:opacity-100 focus-visible:opacity-100"
+            onClick={() => onRemove(attachment.id)}
+            type="button"
+          >
+            <Codicon name="close" size="0.625rem" />
+          </button>
+        )}
+      </div>
+    </Tip>
+  )
+}

package/src/app/chat/composer/completion-drawer.tsx

@@ -0,0 +1,63 @@
+import type { Unstable_TriggerAdapter } from '@assistant-ui/core'
+import { ComposerPrimitive } from '@assistant-ui/react'
+import type { ReactNode } from 'react'
+
+export const COMPLETION_DRAWER_CLASS = [
+  'absolute bottom-[calc(100%+0.25rem)] left-0 z-50',
+  'w-60 max-w-[calc(100vw-2rem)]',
+  'max-h-[min(23rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
+  'rounded-lg border border-(--ui-stroke-secondary)',
+  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)]',
+  'p-1 text-xs text-popover-foreground shadow-md',
+  'backdrop-blur-md'
+].join(' ')
+
+export const COMPLETION_DRAWER_BELOW_CLASS = [
+  'absolute left-0 top-[calc(100%+0.25rem)] z-50',
+  'w-60 max-w-[calc(100vw-2rem)]',
+  'max-h-[min(23rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
+  'rounded-lg border border-(--ui-stroke-secondary)',
+  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)]',
+  'p-1 text-xs text-popover-foreground shadow-md',
+  'backdrop-blur-md'
+].join(' ')
+
+export const COMPLETION_DRAWER_ROW_CLASS = [
+  'relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1',
+  'w-full min-w-0 text-left text-xs outline-hidden transition-colors',
+  'hover:bg-(--ui-bg-tertiary)',
+  'data-[highlighted]:bg-(--ui-bg-tertiary) data-[highlighted]:text-foreground'
+].join(' ')
+
+export function ComposerCompletionDrawer({
+  adapter,
+  ariaLabel,
+  char,
+  children
+}: {
+  adapter: Unstable_TriggerAdapter
+  ariaLabel: string
+  char: string
+  children: ReactNode
+}) {
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopover
+      adapter={adapter}
+      aria-label={ariaLabel}
+      char={char}
+      className={COMPLETION_DRAWER_CLASS}
+      data-slot="composer-completion-drawer"
+    >
+      {children}
+    </ComposerPrimitive.Unstable_TriggerPopover>
+  )
+}
+
+export function CompletionDrawerEmpty({ children, title }: { children?: ReactNode; title: string }) {
+  return (
+    <div className="px-3 py-3 text-xs text-(--ui-text-tertiary)">
+      <p>{title}</p>
+      {children && <p className="mt-1 text-xs text-(--ui-text-tertiary)">{children}</p>}
+    </div>
+  )
+}

package/src/app/chat/composer/context-menu.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { useI18n } from '@/i18n'
+import { Clipboard, FileText, FolderOpen, type IconComponent, ImageIcon, Link, MessageSquareText } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+import { GHOST_ICON_BTN } from './controls'
+import type { ChatBarState } from './types'
+
+const SNIPPET_KEYS = ['codeReview', 'implementationPlan', 'explainThis']
+
+export function ContextMenu({
+  state,
+  onInsertText,
+  onOpenUrlDialog,
+  onPasteClipboardImage,
+  onPickFiles,
+  onPickFolders,
+  onPickImages
+}: ContextMenuProps) {
+  const { t } = useI18n()
+  const c = t.composer
+  // Prompt snippets used to be a Radix submenu. That submenu didn't open
+  // reliably when the parent menu was positioned at the bottom of the
+  // window (composer "+" anchor), so we promoted it to a real Dialog —
+  // easier to grow with search / descriptions, and no positioning math.
+  const [snippetsOpen, setSnippetsOpen] = useState(false)
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            aria-label={state.tools.label}
+            className={cn(
+              GHOST_ICON_BTN,
+              'data-[state=open]:bg-(--chrome-action-hover) data-[state=open]:text-foreground'
+            )}
+            disabled={!state.tools.enabled}
+            size="icon"
+            title={state.tools.label}
+            type="button"
+            variant="ghost"
+          >
+            <Codicon name="add" size="1rem" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-60" side="top" sideOffset={10}>
+          <DropdownMenuLabel className="text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground/85">
+            {c.attachLabel}
+          </DropdownMenuLabel>
+          <ContextMenuItem disabled={!onPickFiles} icon={FileText} onSelect={onPickFiles}>
+            {c.files}
+          </ContextMenuItem>
+          <ContextMenuItem disabled={!onPickFolders} icon={FolderOpen} onSelect={onPickFolders}>
+            {c.folder}
+          </ContextMenuItem>
+          <ContextMenuItem disabled={!onPickImages} icon={ImageIcon} onSelect={onPickImages}>
+            {c.images}
+          </ContextMenuItem>
+          <ContextMenuItem disabled={!onPasteClipboardImage} icon={Clipboard} onSelect={onPasteClipboardImage}>
+            {c.pasteImage}
+          </ContextMenuItem>
+          <ContextMenuItem icon={Link} onSelect={onOpenUrlDialog}>
+            {c.url}
+          </ContextMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <ContextMenuItem icon={MessageSquareText} onSelect={() => setSnippetsOpen(true)}>
+            {c.promptSnippets}
+          </ContextMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <div className="px-2 py-1 text-[0.7rem] text-muted-foreground/80">
+            {c.tipPre}
+            <kbd className="rounded bg-muted/70 px-1 py-px font-mono text-[0.65rem]">@</kbd>
+            {c.tipPost}
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <PromptSnippetsDialog onInsertText={onInsertText} onOpenChange={setSnippetsOpen} open={snippetsOpen} />
+    </>
+  )
+}
+
+function PromptSnippetsDialog({ onInsertText, onOpenChange, open }: PromptSnippetsDialogProps) {
+  const { t } = useI18n()
+  const c = t.composer
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-w-md gap-3">
+        <DialogHeader>
+          <DialogTitle>{c.snippetsTitle}</DialogTitle>
+          <DialogDescription>{c.snippetsDesc}</DialogDescription>
+        </DialogHeader>
+        <ul className="grid gap-1">
+          {SNIPPET_KEYS.map(key => {
+            const snippet = c.snippets[key]
+
+            return (
+              <li key={key}>
+                <button
+                  className="group/snippet flex w-full cursor-pointer items-start gap-2.5 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) focus-visible:border-(--ui-stroke-tertiary) focus-visible:bg-(--ui-control-hover-background) focus-visible:outline-none"
+                  onClick={() => {
+                    onInsertText(snippet.text)
+                    onOpenChange(false)
+                  }}
+                  type="button"
+                >
+                  <MessageSquareText className="mt-0.5 size-3.5 shrink-0 text-(--ui-text-tertiary) group-hover/snippet:text-foreground" />
+                  <span className="grid min-w-0 gap-0.5">
+                    <span className="text-sm font-medium text-foreground">{snippet.label}</span>
+                    <span className="text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
+                      {snippet.description}
+                    </span>
+                  </span>
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function ContextMenuItem({ children, disabled, icon: Icon, onSelect }: ContextMenuItemProps) {
+  return (
+    <DropdownMenuItem disabled={disabled} onSelect={onSelect}>
+      <Icon />
+      <span>{children}</span>
+    </DropdownMenuItem>
+  )
+}
+
+interface ContextMenuItemProps {
+  children: string
+  disabled?: boolean
+  icon: IconComponent
+  onSelect?: () => void
+}
+
+interface ContextMenuProps {
+  onInsertText: (text: string) => void
+  onOpenUrlDialog: () => void
+  onPasteClipboardImage?: () => void
+  onPickFiles?: () => void
+  onPickFolders?: () => void
+  onPickImages?: () => void
+  state: ChatBarState
+}
+
+interface PromptSnippetsDialogProps {
+  onInsertText: (text: string) => void
+  onOpenChange: (open: boolean) => void
+  open: boolean
+}