bingocode 1.0.2 → 1.0.3

package/desktop/src/pages/EmptySession.tsx

@@ -0,0 +1,518 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { skillsApi } from '../api/skills'
+import { useTranslation } from '../i18n'
+import { useSessionStore } from '../stores/sessionStore'
+import { useChatStore } from '../stores/chatStore'
+import { useUIStore } from '../stores/uiStore'
+import { useTabStore } from '../stores/tabStore'
+import { DirectoryPicker } from '../components/shared/DirectoryPicker'
+import { PermissionModeSelector } from '../components/controls/PermissionModeSelector'
+import { ModelSelector } from '../components/controls/ModelSelector'
+import { AttachmentGallery } from '../components/chat/AttachmentGallery'
+import { FileSearchMenu, type FileSearchMenuHandle } from '../components/chat/FileSearchMenu'
+import {
+  FALLBACK_SLASH_COMMANDS,
+  findSlashToken,
+  insertSlashTrigger,
+  mergeSlashCommands,
+  replaceSlashCommand,
+} from '../components/chat/composerUtils'
+import type { AttachmentRef } from '../types/chat'
+import type { SlashCommandOption } from '../components/chat/composerUtils'
+
+type Attachment = {
+  id: string
+  name: string
+  type: 'image' | 'file'
+  mimeType?: string
+  previewUrl?: string
+  data?: string
+}
+
+export function EmptySession() {
+  const t = useTranslation()
+  const [input, setInput] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [workDir, setWorkDir] = useState('')
+  const [attachments, setAttachments] = useState<Attachment[]>([])
+  const [plusMenuOpen, setPlusMenuOpen] = useState(false)
+  const [slashMenuOpen, setSlashMenuOpen] = useState(false)
+  const [fileSearchOpen, setFileSearchOpen] = useState(false)
+  const [atFilter, setAtFilter] = useState('')
+  const [atCursorPos, setAtCursorPos] = useState(-1)
+  const [slashFilter, setSlashFilter] = useState('')
+  const [slashSelectedIndex, setSlashSelectedIndex] = useState(0)
+  const [slashCommands, setSlashCommands] = useState<SlashCommandOption[]>([])
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const plusMenuRef = useRef<HTMLDivElement>(null)
+  const slashMenuRef = useRef<HTMLDivElement>(null)
+  const fileSearchRef = useRef<FileSearchMenuHandle>(null)
+  const slashItemRefs = useRef<(HTMLButtonElement | null)[]>([])
+  const createSession = useSessionStore((state) => state.createSession)
+  const sendMessage = useChatStore((state) => state.sendMessage)
+  const connectToSession = useChatStore((state) => state.connectToSession)
+  const setActiveView = useUIStore((state) => state.setActiveView)
+  const addToast = useUIStore((state) => state.addToast)
+
+  useEffect(() => {
+    textareaRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    if (!plusMenuOpen) return
+    const handleClick = (event: MouseEvent) => {
+      if (plusMenuRef.current && !plusMenuRef.current.contains(event.target as Node)) {
+        setPlusMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [plusMenuOpen])
+
+  useEffect(() => {
+    if (!slashMenuOpen) return
+    const handleClick = (event: MouseEvent) => {
+      if (
+        slashMenuRef.current &&
+        !slashMenuRef.current.contains(event.target as Node) &&
+        textareaRef.current &&
+        !textareaRef.current.contains(event.target as Node)
+      ) {
+        setSlashMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [slashMenuOpen])
+
+  useEffect(() => {
+    if (!fileSearchOpen) return
+    const handleClick = (event: MouseEvent) => {
+      const menu = document.getElementById('file-search-menu')
+      if (
+        menu &&
+        !menu.contains(event.target as Node) &&
+        textareaRef.current &&
+        !textareaRef.current.contains(event.target as Node)
+      ) {
+        setFileSearchOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [fileSearchOpen])
+
+  useEffect(() => {
+    let cancelled = false
+
+    skillsApi.list(workDir || undefined)
+      .then(({ skills }) => {
+        if (cancelled) return
+        setSlashCommands(
+          skills
+            .filter((skill) => skill.userInvocable)
+            .map((skill) => ({
+              name: skill.name,
+              description: skill.description,
+            })),
+        )
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSlashCommands([])
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [workDir])
+
+  const filteredCommands = useMemo(() => {
+    const source = mergeSlashCommands(slashCommands, FALLBACK_SLASH_COMMANDS)
+    if (!slashFilter) return source
+    const lower = slashFilter.toLowerCase()
+    return source.filter((command) => (
+      command.name.toLowerCase().includes(lower) ||
+      command.description.toLowerCase().includes(lower)
+    ))
+  }, [slashCommands, slashFilter])
+
+  useEffect(() => {
+    setSlashSelectedIndex(0)
+  }, [slashFilter])
+
+  useEffect(() => {
+    const activeItem = slashMenuOpen ? slashItemRefs.current[slashSelectedIndex] : null
+    if (typeof activeItem?.scrollIntoView === 'function') {
+      activeItem.scrollIntoView({ block: 'nearest' })
+    }
+  }, [slashMenuOpen, slashSelectedIndex])
+
+  const handleSubmit = async () => {
+    const text = input.trim()
+    if ((!text && attachments.length === 0) || isSubmitting) return
+
+    setIsSubmitting(true)
+    try {
+      const sessionId = await createSession(workDir || undefined)
+      setActiveView('code')
+      useTabStore.getState().openTab(sessionId, 'New Session')
+      connectToSession(sessionId)
+      const attachmentPayload: AttachmentRef[] = attachments.map((attachment) => ({
+        type: attachment.type,
+        name: attachment.name,
+        data: attachment.data,
+        mimeType: attachment.mimeType,
+      }))
+      sendMessage(sessionId, text, attachmentPayload)
+      setInput('')
+      setAttachments([])
+    } catch (error) {
+      addToast({
+        type: 'error',
+        message: error instanceof Error ? error.message : t('empty.failedToCreate'),
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleInputChange = (value: string, cursorPos: number) => {
+    setInput(value)
+    const token = findSlashToken(value, cursorPos)
+    if (!token) {
+      setSlashMenuOpen(false)
+    } else {
+      setSlashFilter(token.filter)
+      setSlashMenuOpen(true)
+    }
+
+    // Detect @ trigger for file search
+    const textBeforeCursor = value.slice(0, cursorPos)
+    let pos = -1
+    for (let i = textBeforeCursor.length - 1; i >= 0; i--) {
+      const ch = textBeforeCursor[i]!
+      if (ch === '@') {
+        if (i === 0 || /\s/.test(textBeforeCursor[i - 1]!)) {
+          pos = i
+          break
+        }
+        break
+      }
+      if (/\s/.test(ch)) {
+        break
+      }
+    }
+    if (pos < 0) {
+      setFileSearchOpen(false)
+      setAtFilter('')
+      setAtCursorPos(-1)
+    } else {
+      setAtFilter(textBeforeCursor.slice(pos + 1))
+      setAtCursorPos(cursorPos)
+      setSlashMenuOpen(false)
+      setFileSearchOpen(true)
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    // Ignore key events during IME composition (e.g. Chinese input method)
+    if (event.nativeEvent.isComposing) return
+
+    // Route file search navigation keys to FileSearchMenu
+    if (fileSearchOpen) {
+      const key = event.key
+      if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === 'Tab' || key === 'Escape') {
+        event.preventDefault()
+        if (key === 'Escape') {
+          setFileSearchOpen(false)
+          setAtFilter('')
+          setAtCursorPos(-1)
+          return
+        }
+        fileSearchRef.current?.handleKeyDown(event.nativeEvent)
+        return
+      }
+      return
+    }
+
+    if (slashMenuOpen && filteredCommands.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setSlashSelectedIndex((prev) => (prev + 1) % filteredCommands.length)
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setSlashSelectedIndex((prev) => (prev - 1 + filteredCommands.length) % filteredCommands.length)
+        return
+      }
+      if (event.key === 'Enter' || event.key === 'Tab') {
+        event.preventDefault()
+        const selected = filteredCommands[slashSelectedIndex]
+        if (selected) selectSlashCommand(selected.name)
+        return
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        setSlashMenuOpen(false)
+        return
+      }
+    }
+
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      handleSubmit()
+    }
+  }
+
+  const handlePaste = (event: React.ClipboardEvent) => {
+    const items = event.clipboardData?.items
+    if (!items) return
+
+    let hasImage = false
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i]
+      if (!item || !item.type.startsWith('image/')) continue
+
+      hasImage = true
+      event.preventDefault()
+      const file = item.getAsFile()
+      if (!file) continue
+      const id = `att-${Date.now()}-${Math.random().toString(36).slice(2)}`
+      const reader = new FileReader()
+      reader.onload = () => {
+        setAttachments((prev) => [
+          ...prev,
+          {
+            id,
+            name: `pasted-image-${Date.now()}.png`,
+            type: 'image',
+            mimeType: file.type || undefined,
+            previewUrl: reader.result as string,
+            data: reader.result as string,
+          },
+        ])
+      }
+      reader.readAsDataURL(file)
+    }
+
+    if (!hasImage) return
+  }
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files
+    if (!files) return
+
+    Array.from(files).forEach((file) => {
+      const id = `att-${Date.now()}-${Math.random().toString(36).slice(2)}`
+      const isImage = file.type.startsWith('image/')
+      const reader = new FileReader()
+      reader.onload = () => {
+        setAttachments((prev) => [
+          ...prev,
+          {
+            id,
+            name: file.name,
+            type: isImage ? 'image' : 'file',
+            mimeType: file.type || undefined,
+            previewUrl: isImage ? (reader.result as string) : undefined,
+            data: reader.result as string,
+          },
+        ])
+      }
+      reader.readAsDataURL(file)
+    })
+
+    event.target.value = ''
+  }
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault()
+    const files = event.dataTransfer.files
+    if (files.length > 0) {
+      const fakeEvent = { target: { files } } as React.ChangeEvent<HTMLInputElement>
+      handleFileSelect(fakeEvent)
+    }
+  }
+
+  const removeAttachment = (id: string) => {
+    setAttachments((prev) => prev.filter((attachment) => attachment.id !== id))
+  }
+
+  const selectSlashCommand = (command: string) => {
+    const el = textareaRef.current
+    if (!el) return
+    const cursorPos = el.selectionStart ?? input.length
+    const replacement = replaceSlashCommand(input, cursorPos, command)
+    if (!replacement) return
+    setInput(replacement.value)
+    setSlashMenuOpen(false)
+    requestAnimationFrame(() => {
+      el.focus()
+      el.setSelectionRange(replacement.cursorPos, replacement.cursorPos)
+    })
+  }
+
+  const insertSlashCommand = () => {
+    const el = textareaRef.current
+    const cursorPos = el?.selectionStart ?? input.length
+    const replacement = insertSlashTrigger(input, cursorPos)
+    setInput(replacement.value)
+    setPlusMenuOpen(false)
+    setSlashFilter('')
+    setSlashMenuOpen(true)
+    requestAnimationFrame(() => {
+      textareaRef.current?.focus()
+      textareaRef.current?.setSelectionRange(replacement.cursorPos, replacement.cursorPos)
+    })
+  }
+
+  return (
+    <div className="relative flex flex-1 flex-col overflow-hidden bg-[var(--color-surface)]">
+      <div className="flex flex-1 flex-col items-center justify-center p-8 pb-32">
+        <div className="flex max-w-md flex-col items-center text-center">
+          <img src="/app-icon.jpg" alt="Claude Code Haha" className="mb-6 h-24 w-24 rounded-[22px]" style={{ boxShadow: 'var(--shadow-dropdown)' }} />
+          <h1 className="mb-2 text-3xl font-extrabold tracking-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
+            {t('empty.title')}
+          </h1>
+          <p className="mx-auto max-w-xs text-[var(--color-text-secondary)]" style={{ fontFamily: 'var(--font-body)' }}>
+            {t('empty.subtitle')}
+          </p>
+        </div>
+      </div>
+
+      <div className="absolute bottom-4 left-0 right-0 flex justify-center px-8">
+        <div className="flex w-full max-w-3xl flex-col gap-2">
+          <div
+            className="glass-panel relative flex flex-col gap-3 rounded-xl p-4"
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={handleDrop}
+          >
+            {fileSearchOpen && (
+              <FileSearchMenu
+                ref={fileSearchRef}
+                cwd={workDir || ''}
+                filter={atFilter}
+                onSelect={(_path, name) => {
+                  if (atCursorPos >= 0) {
+                    const newValue = `${input.slice(0, atCursorPos)}${name}${input.slice(atCursorPos)}`
+                    const newCursorPos = atCursorPos + name.length
+                    setInput(newValue)
+                    setFileSearchOpen(false)
+                    setAtFilter('')
+                    setAtCursorPos(-1)
+                    void textareaRef.current?.focus()
+                    requestAnimationFrame(() => {
+                      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos)
+                    })
+                  }
+                }}
+              />
+            )}
+
+            {slashMenuOpen && filteredCommands.length > 0 && (
+              <div
+                ref={slashMenuRef}
+                className="absolute bottom-full left-0 right-0 z-50 mb-2 overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]"
+              >
+                <div className="max-h-[260px] overflow-y-auto py-1">
+                  {filteredCommands.map((command, index) => (
+                    <button
+                      key={command.name}
+                      ref={(el) => { slashItemRefs.current[index] = el }}
+                      onClick={() => selectSlashCommand(command.name)}
+                      onMouseEnter={() => setSlashSelectedIndex(index)}
+                      className={`flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${
+                        index === slashSelectedIndex ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'
+                      }`}
+                    >
+                      <span className="shrink-0 text-sm font-semibold text-[var(--color-text-primary)]">/{command.name}</span>
+                      <span className="min-w-0 flex-1 truncate text-xs text-[var(--color-text-tertiary)]">{command.description}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {attachments.length > 0 && (
+              <AttachmentGallery attachments={attachments} variant="composer" onRemove={removeAttachment} />
+            )}
+
+            <div className="flex items-start gap-3">
+              <textarea
+                ref={textareaRef}
+                value={input}
+                onChange={(event) => handleInputChange(event.target.value, event.target.selectionStart ?? event.target.value.length)}
+                onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
+                className="flex-1 resize-none border-none bg-transparent py-2 leading-relaxed text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+                style={{ fontFamily: 'var(--font-body)' }}
+                placeholder={t('empty.placeholder')}
+                rows={2}
+              />
+            </div>
+
+            <div className="flex items-center justify-between border-t border-[var(--color-border-separator)] pt-3">
+              <div className="flex items-center gap-2">
+                <div ref={plusMenuRef} className="relative">
+                  <button
+                    onClick={() => setPlusMenuOpen((prev) => !prev)}
+                    aria-label="Open composer tools"
+                    className="rounded-lg p-1.5 text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+                  >
+                    <span className="material-symbols-outlined text-[18px]">add</span>
+                  </button>
+
+                  {plusMenuOpen && (
+                    <div className="absolute bottom-full left-0 mb-2 w-[240px] rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-1 shadow-[var(--shadow-dropdown)]">
+                      <button
+                        onClick={() => {
+                          fileInputRef.current?.click()
+                          setPlusMenuOpen(false)
+                        }}
+                        className="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+                      >
+                        <span className="material-symbols-outlined text-[18px] text-[var(--color-text-secondary)]">attach_file</span>
+                        {t('empty.addFiles')}
+                      </button>
+                      <button
+                        onClick={insertSlashCommand}
+                        className="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+                      >
+                        <span className="w-5 text-center text-[18px] font-bold text-[var(--color-text-secondary)]">/</span>
+                        {t('empty.slashCommands')}
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                <PermissionModeSelector workDir={workDir} />
+              </div>
+
+              <div className="flex items-center gap-3">
+                <ModelSelector />
+                <button
+                  onClick={handleSubmit}
+                  disabled={(!input.trim() && attachments.length === 0) || isSubmitting}
+                  className="flex w-[112px] items-center justify-center gap-1 rounded-lg bg-[image:var(--gradient-btn-primary)] px-3 py-1.5 text-xs font-semibold text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] transition-all hover:brightness-105 disabled:opacity-30"
+                >
+                  {t('common.run')}
+                  <span className="material-symbols-outlined text-[14px]">arrow_forward</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <DirectoryPicker value={workDir} onChange={setWorkDir} />
+          </div>
+        </div>
+      </div>
+
+      <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileSelect} />
+    </div>
+  )
+}