bingocode 1.0.3 → 1.0.5

package/desktop/src/components/chat/ChatInput.tsx

@@ -1,622 +0,0 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
-import { useTranslation } from '../../i18n'
-import { useChatStore } from '../../stores/chatStore'
-import { useTabStore } from '../../stores/tabStore'
-import { useSessionStore } from '../../stores/sessionStore'
-import { useTeamStore } from '../../stores/teamStore'
-import { sessionsApi } from '../../api/sessions'
-import { PermissionModeSelector } from '../controls/PermissionModeSelector'
-import { ModelSelector } from '../controls/ModelSelector'
-import type { AttachmentRef } from '../../types/chat'
-import { AttachmentGallery } from './AttachmentGallery'
-import { ProjectContextChip } from '../shared/ProjectContextChip'
-import { DirectoryPicker } from '../shared/DirectoryPicker'
-import { FileSearchMenu, type FileSearchMenuHandle } from './FileSearchMenu'
-import {
-  FALLBACK_SLASH_COMMANDS,
-  findSlashTrigger,
-  mergeSlashCommands,
-  replaceSlashToken,
-} from './composerUtils'
-
-type GitInfo = { branch: string | null; repoName: string | null; workDir: string; changedFiles: number }
-
-type Attachment = {
-  id: string
-  name: string
-  type: 'image' | 'file'
-  mimeType?: string
-  previewUrl?: string
-  data?: string
-}
-
-type ChatInputProps = {
-  variant?: 'default' | 'hero'
-}
-
-export function ChatInput({ variant = 'default' }: ChatInputProps) {
-  const t = useTranslation()
-  const [input, setInput] = 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 composingRef = useRef(false)
-  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 { sendMessage, stopGeneration } = useChatStore()
-  const activeTabId = useTabStore((s) => s.activeTabId)
-  const sessionState = useChatStore((s) => activeTabId ? s.sessions[activeTabId] : undefined)
-  const chatState = sessionState?.chatState ?? 'idle'
-  const slashCommands = sessionState?.slashCommands ?? []
-  const activeSession = useSessionStore((state) => activeTabId ? state.sessions.find((session) => session.id === activeTabId) ?? null : null)
-  const memberInfo = useTeamStore((s) => activeTabId ? s.getMemberBySessionId(activeTabId) : null)
-  const [gitInfo, setGitInfo] = useState<GitInfo | null>(null)
-  const hasMessages = useChatStore((s) => activeTabId ? (s.sessions[activeTabId]?.messages?.length ?? 0) > 0 : false)
-
-  const isMemberSession = !!memberInfo
-  const isActive = chatState !== 'idle'
-  const isWorkspaceMissing = activeSession?.workDirExists === false
-  const canSubmit = !isWorkspaceMissing && (input.trim().length > 0 || (!isMemberSession && attachments.length > 0))
-  const isHeroComposer = variant === 'hero' && !isMemberSession
-
-  useEffect(() => {
-    textareaRef.current?.focus()
-  }, [isActive])
-
-  useEffect(() => {
-    if (!activeTabId) {
-      setGitInfo(null)
-      return
-    }
-    if (isMemberSession) {
-      setGitInfo(null)
-      return
-    }
-    sessionsApi.getGitInfo(activeTabId).then(setGitInfo).catch(() => setGitInfo(null))
-  }, [activeTabId, isMemberSession])
-
-  useEffect(() => {
-    if (!isMemberSession) return
-    setAttachments([])
-    setPlusMenuOpen(false)
-    setSlashMenuOpen(false)
-    setFileSearchOpen(false)
-  }, [isMemberSession, activeTabId])
-
-  useEffect(() => {
-    const el = textareaRef.current
-    if (!el) return
-    el.style.height = 'auto'
-    el.style.height = `${Math.min(el.scrollHeight, 200)}px`
-  }, [input])
-
-  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])
-
-  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(() => {
-    if (slashMenuOpen && slashItemRefs.current[slashSelectedIndex]) {
-      slashItemRefs.current[slashSelectedIndex]?.scrollIntoView({ block: 'nearest' })
-    }
-  }, [slashMenuOpen, slashSelectedIndex])
-
-  const detectSlashTrigger = useCallback((value: string, cursorPos: number) => {
-    const token = findSlashTrigger(value, cursorPos)
-    if (!token) {
-      setSlashMenuOpen(false)
-      return
-    }
-
-    setFileSearchOpen(false)
-    setSlashFilter(token.filter)
-    setSlashMenuOpen(true)
-  }, [])
-
-  // Detect @ trigger (file search)
-  const detectAtTrigger = useCallback((value: string, cursorPos: number) => {
-    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)
-      return
-    }
-
-    // Extract filter text after @
-    const filter = textBeforeCursor.slice(pos + 1)
-    setAtFilter(filter)
-    setAtCursorPos(cursorPos)
-    setSlashMenuOpen(false)
-    setFileSearchOpen(true)
-  }, [])
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = event.target.value
-    if (isMemberSession) {
-      setInput(value)
-      return
-    }
-    const cursorPos = event.target.selectionStart ?? value.length
-    setInput(value)
-    detectSlashTrigger(value, cursorPos)
-    detectAtTrigger(value, cursorPos)
-  }
-
-  const selectSlashCommand = useCallback((command: string) => {
-    const el = textareaRef.current
-    if (!el) return
-    const cursorPos = el.selectionStart ?? input.length
-    const replacement = replaceSlashToken(input, cursorPos, command)
-    setInput(replacement.value)
-    setSlashMenuOpen(false)
-    requestAnimationFrame(() => {
-      el.focus()
-      el.setSelectionRange(replacement.cursorPos, replacement.cursorPos)
-    })
-  }, [input])
-
-  const handleSubmit = () => {
-    const text = input.trim()
-    if ((!text && (!attachments.length || isMemberSession)) || isWorkspaceMissing) return
-
-    const attachmentPayload: AttachmentRef[] = attachments.map((attachment) => ({
-      type: attachment.type,
-      name: attachment.name,
-      data: attachment.data,
-      mimeType: attachment.mimeType,
-    }))
-
-    sendMessage(activeTabId!, text, attachmentPayload)
-    setInput('')
-    setAttachments([])
-    setPlusMenuOpen(false)
-    setSlashMenuOpen(false)
-    setFileSearchOpen(false)
-  }
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    // Ignore key events during IME composition (e.g. Chinese input method)
-    if (composingRef.current || event.nativeEvent.isComposing || event.keyCode === 229) 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
-      }
-      // Other keys (typing) should go to the textarea - let it propagate
-      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) => {
-    if (isMemberSession) return
-    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 || 'image/png',
-            previewUrl: reader.result as string,
-            data: reader.result as string,
-          },
-        ])
-      }
-      reader.readAsDataURL(file)
-    }
-
-    if (!hasImage) return
-  }
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (isMemberSession) return
-    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()
-    if (isMemberSession) return
-    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 insertSlashCommand = () => {
-    if (isMemberSession) return
-    const el = textareaRef.current
-    const cursorPos = el?.selectionStart ?? input.length
-    const replacement = replaceSlashToken(input, cursorPos, '', { trailingSpace: false })
-    setInput(replacement.value)
-    setPlusMenuOpen(false)
-    setSlashFilter('')
-    setSlashMenuOpen(true)
-    requestAnimationFrame(() => {
-      textareaRef.current?.focus()
-      textareaRef.current?.setSelectionRange(replacement.cursorPos, replacement.cursorPos)
-    })
-  }
-
-  const composerPlaceholder =
-    isHeroComposer
-      ? t('empty.placeholder')
-      : isWorkspaceMissing
-        ? t('chat.placeholderMissing')
-        : isMemberSession
-          ? t('teams.memberPlaceholder')
-          : t('chat.placeholder')
-
-  const addFilesLabel = isHeroComposer ? t('empty.addFiles') : t('chat.addFiles')
-  const slashCommandsLabel = isHeroComposer ? t('empty.slashCommands') : t('chat.slashCommands')
-
-  return (
-    <div className={isHeroComposer ? 'bg-[var(--color-surface)] px-8 pb-4' : 'bg-[var(--color-surface)] px-4 py-4'}>
-      <div className={isHeroComposer ? 'mx-auto flex w-full max-w-3xl flex-col gap-2' : 'mx-auto max-w-[860px]'}>
-        <div
-          className={isHeroComposer
-            ? 'glass-panel relative flex flex-col gap-3 rounded-xl p-4 transition-colors'
-            : 'glass-panel relative rounded-xl p-4 transition-colors'}
-          onDragOver={(event) => event.preventDefault()}
-          onDrop={handleDrop}
-        >
-          {!isMemberSession && fileSearchOpen && (
-            <FileSearchMenu
-              ref={fileSearchRef}
-              cwd={gitInfo?.workDir || activeSession?.workDir || ''}
-              filter={atFilter}
-              onSelect={(_path, name) => {
-                if (atCursorPos >= 0) {
-                  // Insert name at cursor position, replacing filter text
-                  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)
-                  })
-                }
-              }}
-            />
-          )}
-
-          {!isMemberSession && 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-[300px] 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 className="flex items-center gap-1.5 border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-tertiary)]">
-                <kbd className="rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1.5 py-0.5 font-mono text-[10px]">Up/Down</kbd>
-                <span>{t('chat.navigate')}</span>
-                <kbd className="ml-2 rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1.5 py-0.5 font-mono text-[10px]">Enter</kbd>
-                <span>{t('chat.select')}</span>
-                <kbd className="ml-2 rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1.5 py-0.5 font-mono text-[10px]">Esc</kbd>
-                <span>{t('chat.dismiss')}</span>
-              </div>
-            </div>
-          )}
-
-          {attachments.length > 0 && (
-            isHeroComposer ? (
-              <AttachmentGallery attachments={attachments} variant="composer" onRemove={removeAttachment} />
-            ) : (
-              <div className="px-3 pt-3">
-                <AttachmentGallery attachments={attachments} variant="composer" onRemove={removeAttachment} />
-              </div>
-            )
-          )}
-
-          {isHeroComposer ? (
-            <div className="flex items-start gap-3">
-              <textarea
-                ref={textareaRef}
-                value={input}
-                onChange={handleInputChange}
-                onKeyDown={handleKeyDown}
-                onCompositionStart={() => { composingRef.current = true }}
-                onCompositionEnd={() => { composingRef.current = false }}
-                onPaste={handlePaste}
-                placeholder={composerPlaceholder}
-                disabled={isWorkspaceMissing}
-                rows={2}
-                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)] disabled:opacity-50"
-              />
-            </div>
-          ) : (
-            <textarea
-              ref={textareaRef}
-              value={input}
-              onChange={handleInputChange}
-              onKeyDown={handleKeyDown}
-              onCompositionStart={() => { composingRef.current = true }}
-              onCompositionEnd={() => { composingRef.current = false }}
-              onPaste={handlePaste}
-              placeholder={composerPlaceholder}
-              disabled={isWorkspaceMissing}
-              rows={1}
-              className="w-full resize-none bg-transparent py-2 pb-12 text-sm leading-relaxed text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)] disabled:opacity-50"
-            />
-          )}
-
-          <div className={isHeroComposer
-            ? 'flex items-center justify-between border-t border-[var(--color-border-separator)] pt-3'
-            : 'absolute bottom-0 left-0 right-0 flex items-center justify-between border-t border-[var(--color-border-separator)] px-3 py-3'}>
-            <div className="flex items-center gap-2">
-              {!isMemberSession && (
-                <>
-                  <div ref={plusMenuRef} className="relative">
-                    <button
-                      onClick={() => setPlusMenuOpen((value) => !value)}
-                      aria-label="Open composer tools"
-                      className="rounded-[var(--radius-md)] 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 z-50 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 transition-colors hover:bg-[var(--color-surface-hover)]"
-                        >
-                          <span className="material-symbols-outlined text-[18px] text-[var(--color-text-secondary)]">attach_file</span>
-                          <span className="text-sm text-[var(--color-text-primary)]">{addFilesLabel}</span>
-                        </button>
-                        <button
-                          onClick={insertSlashCommand}
-                          className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-[var(--color-surface-hover)]"
-                        >
-                          <span className="w-[24px] text-center text-[18px] font-bold text-[var(--color-text-secondary)]">/</span>
-                          <span className="text-sm text-[var(--color-text-primary)]">{slashCommandsLabel}</span>
-                        </button>
-                      </div>
-                    )}
-                  </div>
-
-                  <PermissionModeSelector />
-                </>
-              )}
-            </div>
-
-            <div className="flex items-center gap-2">
-              {!isMemberSession && <ModelSelector />}
-              <button
-                onClick={!isMemberSession && isActive ? () => stopGeneration(activeTabId!) : handleSubmit}
-                disabled={!isMemberSession && isActive ? false : !canSubmit}
-                title={!isMemberSession && isActive ? t('chat.stopTitle') : undefined}
-                className={`flex w-[112px] items-center justify-center gap-1 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all hover:brightness-105 disabled:opacity-30 ${
-                  !isMemberSession && isActive
-                    ? 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
-                    : 'bg-[image:var(--gradient-btn-primary)] text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)]'
-                }`}
-              >
-                <span className="material-symbols-outlined text-[14px]">
-                  {!isMemberSession && isActive ? 'stop' : 'arrow_forward'}
-                </span>
-                {!isMemberSession && isActive ? t('common.stop') : isMemberSession ? t('common.send') : t('common.run')}
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileSelect} />
-
-        {!isMemberSession && (
-          <div className="mt-3 px-1">
-            {hasMessages ? (
-              <ProjectContextChip
-                workDir={gitInfo?.workDir || activeSession?.workDir}
-                repoName={gitInfo?.repoName || null}
-                branch={gitInfo?.branch || null}
-              />
-            ) : (
-              <DirectoryPicker
-                value={gitInfo?.workDir || activeSession?.workDir || ''}
-                onChange={async (newWorkDir) => {
-                  if (!activeTabId) return
-                  const oldId = activeTabId
-                  const { deleteSession, createSession } = useSessionStore.getState()
-                  const { replaceTabSession } = useTabStore.getState()
-                  const { disconnectSession, connectToSession } = useChatStore.getState()
-                  const newId = await createSession(newWorkDir)
-                  disconnectSession(oldId)
-                  replaceTabSession(oldId, newId)
-                  connectToSession(newId)
-                  deleteSession(oldId).catch(() => {})
-                }}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}