From 63596512479c9e371d54478f8815ed24ba6df628 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Sat, 4 Apr 2026 13:24:26 +0800
Subject: [PATCH] feat(chat): add slash command dropdown button in message
 input toolbar

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/chat/message-input.tsx         | 65 +++++++++++++++++--
 .../chat/session-config-selector.tsx          |  7 +-
 src/i18n/messages/ar.json                     |  3 +-
 src/i18n/messages/de.json                     |  3 +-
 src/i18n/messages/en.json                     |  3 +-
 src/i18n/messages/es.json                     |  3 +-
 src/i18n/messages/fr.json                     |  3 +-
 src/i18n/messages/ja.json                     |  3 +-
 src/i18n/messages/ko.json                     |  3 +-
 src/i18n/messages/pt.json                     |  3 +-
 src/i18n/messages/zh-CN.json                  |  3 +-
 src/i18n/messages/zh-TW.json                  |  3 +-
 12 files changed, 85 insertions(+), 17 deletions(-)

diff --git a/src/components/chat/message-input.tsx b/src/components/chat/message-input.tsx
index 35b8f55..72e7314 100644
--- a/src/components/chat/message-input.tsx
+++ b/src/components/chat/message-input.tsx
@@ -20,6 +20,7 @@ import {
   ListPlus,
   Plus,
   Send,
+  Command,
   Square,
   X,
 } from "lucide-react"
@@ -54,6 +55,7 @@ import { ModeSelector } from "@/components/chat/mode-selector"
 import { SessionConfigSelector } from "@/components/chat/session-config-selector"
 import { SlashCommandMenu } from "@/components/chat/slash-command-menu"
 import { FileMentionMenu } from "@/components/chat/file-mention-menu"
+import { DropdownRadioItemContent } from "@/components/chat/dropdown-radio-item-content"
 import { useFileTree } from "@/hooks/use-file-tree"
 import { joinFsPath } from "@/lib/path-utils"
 import {
@@ -314,6 +316,7 @@ export function MessageInput({
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const lastDomDropAtRef = useRef(0)
   const composingRef = useRef(false)
+  const cursorPosRef = useRef<number | null>(null)
   const textRef = useRef(text)
   const disabledRef = useRef(disabled)
   const isPromptingRef = useRef(isPrompting)
@@ -778,6 +781,24 @@ export function MessageInput({
     setSlashMenuOpen(false)
   }, [])
 
+  const handleSlashPopoverSelect = useCallback((cmd: AvailableCommandInfo) => {
+    const pos = cursorPosRef.current ?? textRef.current.length
+    const before = textRef.current.slice(0, pos)
+    const after = textRef.current.slice(pos)
+    const needsSpace = pos > 0 && !/\s$/.test(before)
+    const insertion = `${needsSpace ? " " : ""}/${cmd.name} `
+    const newText = before + insertion + after
+    setText(newText)
+    requestAnimationFrame(() => {
+      const ta = textareaRef.current
+      if (ta) {
+        ta.focus()
+        const newPos = pos + insertion.length
+        ta.setSelectionRange(newPos, newPos)
+      }
+    })
+  }, [])
+
   const atTriggerPosRef = useRef(atTriggerPos)
   useEffect(() => {
     atTriggerPosRef.current = atTriggerPos
@@ -1476,26 +1497,60 @@ export function MessageInput({
           autoFocus={autoFocus}
         />
         <div className="@container flex shrink-0 items-end justify-between gap-2 px-2 pb-2">
-          <div className="flex min-w-0 items-end gap-1">
+          <div className="flex min-w-0 items-end gap-2">
             <Button
               onClick={handlePickFiles}
               disabled={disabled}
-              variant="ghost"
+              variant="outline"
               size="icon"
-              className="h-6 w-6 shrink-0"
+              className="h-6 w-6 shrink-0 bg-transparent"
               title={t("attachFiles")}
             >
               <Plus className="size-4" />
             </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  disabled={disabled || slashCommands.length === 0}
+                  variant="outline"
+                  size="icon"
+                  className="h-6 w-6 shrink-0 bg-transparent"
+                  onPointerDown={() => {
+                    cursorPosRef.current =
+                      textareaRef.current?.selectionStart ?? null
+                  }}
+                  title={t("slashCommands")}
+                >
+                  <Command className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                align="start"
+                className="min-w-72"
+              >
+                {slashCommands.map((cmd) => (
+                  <DropdownMenuItem
+                    key={cmd.name}
+                    onClick={() => handleSlashPopoverSelect(cmd)}
+                  >
+                    <DropdownRadioItemContent
+                      label={`/${cmd.name}`}
+                      description={cmd.description}
+                    />
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
             {/* 宽屏内联显示，窄屏（<300px）通过"更多"气泡显示 */}
             <div className="hidden @[300px]:contents">{selectorItems}</div>
             {hasAnySelector && (
               <Popover>
                 <PopoverTrigger asChild>
                   <Button
-                    variant="ghost"
+                    variant="outline"
                     size="icon"
-                    className="h-6 w-6 shrink-0 @[300px]:hidden"
+                    className="h-6 w-6 shrink-0 bg-transparent @[300px]:hidden"
                   >
                     <Ellipsis className="size-4" />
                   </Button>
diff --git a/src/components/chat/session-config-selector.tsx b/src/components/chat/session-config-selector.tsx
index 781088f..c8a9402 100644
--- a/src/components/chat/session-config-selector.tsx
+++ b/src/components/chat/session-config-selector.tsx
@@ -37,9 +37,12 @@ export function SessionConfigSelector({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          variant="ghost"
+          variant="outline"
           size="xs"
-          className={cn("gap-1 min-w-0", isActive && "text-primary")}
+          className={cn(
+            "gap-1 min-w-0 bg-transparent",
+            isActive && "text-primary"
+          )}
           title={option.description ?? option.name}
         >
           <span className="truncate">{label}</span>
diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
index ae85281..faeb5ac 100644
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "جارٍ تحميل الوضع...",
         "cancel": "إلغاء",
         "send": "إرسال",
-        "forkAndSend": "تفريع وإرسال"
+        "forkAndSend": "تفريع وإرسال",
+        "slashCommands": "أوامر الشرطة المائلة"
       },
       "messageQueue": {
         "addToQueue": "إضافة للقائمة",
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json
index 9a3862a..e02e82e 100644
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "Modus wird geladen...",
         "cancel": "Abbrechen",
         "send": "Senden",
-        "forkAndSend": "Fork & Senden"
+        "forkAndSend": "Fork & Senden",
+        "slashCommands": "Slash-Befehle"
       },
       "messageQueue": {
         "addToQueue": "Zur Warteschlange",
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 41db5f2..d238d75 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "Loading mode...",
         "cancel": "Cancel",
         "send": "Send",
-        "forkAndSend": "Fork & Send"
+        "forkAndSend": "Fork & Send",
+        "slashCommands": "Slash commands"
       },
       "messageQueue": {
         "addToQueue": "Queue message",
diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json
index dbf82ea..b967c0f 100644
--- a/src/i18n/messages/es.json
+++ b/src/i18n/messages/es.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "Cargando modo...",
         "cancel": "Cancelar",
         "send": "Enviar",
-        "forkAndSend": "Fork y Enviar"
+        "forkAndSend": "Fork y Enviar",
+        "slashCommands": "Comandos de barra"
       },
       "messageQueue": {
         "addToQueue": "Agregar a la cola",
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index cbfef2a..0f0fb39 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "Chargement du mode...",
         "cancel": "Annuler",
         "send": "Envoyer",
-        "forkAndSend": "Fork & Envoyer"
+        "forkAndSend": "Fork & Envoyer",
+        "slashCommands": "Commandes slash"
       },
       "messageQueue": {
         "addToQueue": "Mettre en file",
diff --git a/src/i18n/messages/ja.json b/src/i18n/messages/ja.json
index cf72b0d..42345e1 100644
--- a/src/i18n/messages/ja.json
+++ b/src/i18n/messages/ja.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "モードを読み込み中...",
         "cancel": "キャンセル",
         "send": "送信",
-        "forkAndSend": "フォークして送信"
+        "forkAndSend": "フォークして送信",
+        "slashCommands": "スラッシュコマンド"
       },
       "messageQueue": {
         "addToQueue": "キューに追加",
diff --git a/src/i18n/messages/ko.json b/src/i18n/messages/ko.json
index d854f8a..36f8451 100644
--- a/src/i18n/messages/ko.json
+++ b/src/i18n/messages/ko.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "모드 불러오는 중...",
         "cancel": "취소",
         "send": "보내기",
-        "forkAndSend": "포크 & 전송"
+        "forkAndSend": "포크 & 전송",
+        "slashCommands": "슬래시 명령"
       },
       "messageQueue": {
         "addToQueue": "대기열에 추가",
diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json
index 0c8798d..4992002 100644
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "Carregando modo...",
         "cancel": "Cancelar",
         "send": "Enviar",
-        "forkAndSend": "Fork & Enviar"
+        "forkAndSend": "Fork & Enviar",
+        "slashCommands": "Comandos de barra"
       },
       "messageQueue": {
         "addToQueue": "Adicionar à fila",
diff --git a/src/i18n/messages/zh-CN.json b/src/i18n/messages/zh-CN.json
index fcb1c27..2c3274d 100644
--- a/src/i18n/messages/zh-CN.json
+++ b/src/i18n/messages/zh-CN.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "正在加载模式...",
         "cancel": "取消",
         "send": "发送",
-        "forkAndSend": "分叉发送"
+        "forkAndSend": "分叉发送",
+        "slashCommands": "斜杠命令"
       },
       "messageQueue": {
         "addToQueue": "加入队列",
diff --git a/src/i18n/messages/zh-TW.json b/src/i18n/messages/zh-TW.json
index 60b1439..ee6a3f1 100644
--- a/src/i18n/messages/zh-TW.json
+++ b/src/i18n/messages/zh-TW.json
@@ -1421,7 +1421,8 @@
         "loadingMode": "正在載入模式...",
         "cancel": "取消",
         "send": "傳送",
-        "forkAndSend": "分叉發送"
+        "forkAndSend": "分叉發送",
+        "slashCommands": "斜線命令"
       },
       "messageQueue": {
         "addToQueue": "加入佇列",