feat(prompt): add shell mode UI with cancel button, custom icon, and example placeholder (#24105)

2026-04-24 14:04:55 +08:00
parent 6c1268f3b1
commit 4712f0f3c1
21 changed files with 40 additions and 29 deletions
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -270,7 +270,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
  const buttonsSpring = useSpring(() => (store.mode === "normal" ? 1 : 0), { visualDuration: 0.2, bounce: 0 })
  const motion = (value: number) => ({
    opacity: value,
-    transform: `scale(${0.95 + value * 0.05})`,
+    transform: `scale(${0.98 + value * 0.02})`,
    filter: `blur(${(1 - value) * 2}px)`,
    "pointer-events": value > 0.5 ? ("auto" as const) : ("none" as const),
  })
@@ -345,7 +345,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    promptPlaceholder({
      mode: store.mode,
      commentCount: commentCount(),
-      example: suggest() ? language.t(EXAMPLES[store.placeholder]) : "",
+      example: suggest() ? (store.mode === "shell" ? "git status" : language.t(EXAMPLES[store.placeholder])) : "",
      suggest: suggest(),
      t: (key, params) => language.t(key as Parameters<typeof language.t>[0], params as never),
    }),
@@ -1403,12 +1403,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                <IconButton
                  data-action="prompt-submit"
                  type="submit"
-                  disabled={store.mode !== "normal" || (!working() && blank())}
+                  disabled={!working() && blank()}
                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  icon={stopping() ? "stop" : "arrow-up"}
+                  icon={stopping() ? "stop" : store.mode === "shell" ? "arrow-undo-down" : "arrow-up"}
                  variant="primary"
                  class="size-8"
-                  style={buttons()}
                  aria-label={stopping() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
                />
              </Tooltip>
@@ -1451,14 +1450,24 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
          <div class="px-1.75 pt-5.5 pb-2 flex items-center gap-2 min-w-0">
            <div class="flex items-center gap-1.5 min-w-0 flex-1 relative">
              <div
-                class="h-7 flex items-center gap-1.5 max-w-[160px] min-w-0 absolute inset-y-0 left-0"
+                class="h-7 flex items-center gap-1.5 min-w-0 absolute inset-0"
                style={{
-                  padding: "0 4px 0 8px",
+                  padding: "0 0px 0 8px",
                  ...shell(),
                }}
              >
-                <span class="truncate text-13-medium text-text-strong">{language.t("prompt.mode.shell")}</span>
-                <div class="size-4 shrink-0" />
+                <Icon name="console" />
+                <span class="truncate text-13-medium text-text-base">{language.t("prompt.mode.shell")}</span>
+                <div class="flex-1" />
+                <Button
+                  variant="ghost"
+                  class="text-text-base"
+                  onClick={() => {
+                    setStore("mode", "normal")
+                  }}
+                >
+                  {language.t("common.cancel")}
+                </Button>
              </div>
              <div class="flex items-center gap-1.5 min-w-0 flex-1 h-7">
                <Show when={!agentsLoading()}>
--- a/packages/app/src/components/prompt-input/placeholder.ts
+++ b/packages/app/src/components/prompt-input/placeholder.ts
@@ -7,7 +7,7 @@ type PromptPlaceholderInput = {
 }

 export function promptPlaceholder(input: PromptPlaceholderInput) {
-  if (input.mode === "shell") return input.t("prompt.placeholder.shell")
+  if (input.mode === "shell") return input.t("prompt.placeholder.shell", { example: input.example })
  if (input.commentCount > 1) return input.t("prompt.placeholder.summarizeComments")
  if (input.commentCount === 1) return input.t("prompt.placeholder.summarizeComment")
  if (!input.suggest) return input.t("prompt.placeholder.simple")
--- a/packages/app/src/i18n/ar.ts
+++ b/packages/app/src/i18n/ar.ts
@@ -210,7 +210,7 @@ export const dict = {
  "common.saving": "جارٍ الحفظ...",
  "common.default": "افتراضي",
  "common.attachment": "مرفق",
-  "prompt.placeholder.shell": "أدخل أمر shell...",
+  "prompt.placeholder.shell": "أدخل أمر shell... {{example}}",
  "prompt.placeholder.normal": 'اسأل أي شيء... "{{example}}"',
  "prompt.placeholder.simple": "اسأل أي شيء...",
  "prompt.placeholder.summarizeComments": "لخّص التعليقات…",
--- a/packages/app/src/i18n/br.ts
+++ b/packages/app/src/i18n/br.ts
@@ -210,7 +210,7 @@ export const dict = {
  "common.saving": "Salvando...",
  "common.default": "Padrão",
  "common.attachment": "anexo",
-  "prompt.placeholder.shell": "Digite comando do shell...",
+  "prompt.placeholder.shell": "Digite comando do shell... {{example}}",
  "prompt.placeholder.normal": 'Pergunte qualquer coisa... "{{example}}"',
  "prompt.placeholder.simple": "Pergunte qualquer coisa...",
  "prompt.placeholder.summarizeComments": "Resumir comentários…",
--- a/packages/app/src/i18n/bs.ts
+++ b/packages/app/src/i18n/bs.ts
@@ -228,7 +228,7 @@ export const dict = {
  "common.default": "Podrazumijevano",
  "common.attachment": "prilog",

-  "prompt.placeholder.shell": "Unesi shell naredbu...",
+  "prompt.placeholder.shell": "Unesi shell naredbu... {{example}}",
  "prompt.placeholder.normal": 'Pitaj bilo šta... "{{example}}"',
  "prompt.placeholder.simple": "Pitaj bilo šta...",
  "prompt.placeholder.summarizeComments": "Sažmi komentare…",
--- a/packages/app/src/i18n/da.ts
+++ b/packages/app/src/i18n/da.ts
@@ -226,7 +226,7 @@ export const dict = {
  "common.default": "Standard",
  "common.attachment": "vedhæftning",

-  "prompt.placeholder.shell": "Indtast shell-kommando...",
+  "prompt.placeholder.shell": "Indtast shell-kommando... {{example}}",
  "prompt.placeholder.normal": 'Spørg om hvad som helst... "{{example}}"',
  "prompt.placeholder.simple": "Spørg om hvad som helst...",
  "prompt.placeholder.summarizeComments": "Opsummér kommentarer…",
--- a/packages/app/src/i18n/de.ts
+++ b/packages/app/src/i18n/de.ts
@@ -215,7 +215,7 @@ export const dict = {
  "common.saving": "Speichert...",
  "common.default": "Standard",
  "common.attachment": "Anhang",
-  "prompt.placeholder.shell": "Shell-Befehl eingeben...",
+  "prompt.placeholder.shell": "Shell-Befehl eingeben... {{example}}",
  "prompt.placeholder.normal": 'Fragen Sie alles... "{{example}}"',
  "prompt.placeholder.simple": "Fragen Sie alles...",
  "prompt.placeholder.summarizeComments": "Kommentare zusammenfassen…",
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -230,7 +230,7 @@ export const dict = {
  "common.default": "Default",
  "common.attachment": "attachment",

-  "prompt.placeholder.shell": "Enter shell command...",
+  "prompt.placeholder.shell": "Enter shell command... {{example}}",
  "prompt.placeholder.normal": 'Ask anything... "{{example}}"',
  "prompt.placeholder.simple": "Ask anything...",
  "prompt.placeholder.summarizeComments": "Summarize comments…",
--- a/packages/app/src/i18n/es.ts
+++ b/packages/app/src/i18n/es.ts
@@ -227,7 +227,7 @@ export const dict = {
  "common.default": "Predeterminado",
  "common.attachment": "adjunto",

-  "prompt.placeholder.shell": "Introduce comando de shell...",
+  "prompt.placeholder.shell": "Introduce comando de shell... {{example}}",
  "prompt.placeholder.normal": 'Pregunta cualquier cosa... "{{example}}"',
  "prompt.placeholder.simple": "Pregunta cualquier cosa...",
  "prompt.placeholder.summarizeComments": "Resumir comentarios…",
--- a/packages/app/src/i18n/fr.ts
+++ b/packages/app/src/i18n/fr.ts
@@ -210,7 +210,7 @@ export const dict = {
  "common.saving": "Enregistrement...",
  "common.default": "Défaut",
  "common.attachment": "pièce jointe",
-  "prompt.placeholder.shell": "Entrez une commande shell...",
+  "prompt.placeholder.shell": "Entrez une commande shell... {{example}}",
  "prompt.placeholder.normal": 'Demandez n\'importe quoi... "{{example}}"',
  "prompt.placeholder.simple": "Demandez n'importe quoi...",
  "prompt.placeholder.summarizeComments": "Résumer les commentaires…",
--- a/packages/app/src/i18n/ja.ts
+++ b/packages/app/src/i18n/ja.ts
@@ -209,7 +209,7 @@ export const dict = {
  "common.saving": "保存中...",
  "common.default": "デフォルト",
  "common.attachment": "添付ファイル",
-  "prompt.placeholder.shell": "シェルコマンドを入力...",
+  "prompt.placeholder.shell": "シェルコマンドを入力... {{example}}",
  "prompt.placeholder.normal": '何でも聞いてください... "{{example}}"',
  "prompt.placeholder.simple": "何でも聞いてください...",
  "prompt.placeholder.summarizeComments": "コメントを要約…",
--- a/packages/app/src/i18n/ko.ts
+++ b/packages/app/src/i18n/ko.ts
@@ -209,7 +209,7 @@ export const dict = {
  "common.saving": "저장 중...",
  "common.default": "기본값",
  "common.attachment": "첨부 파일",
-  "prompt.placeholder.shell": "셸 명령어 입력...",
+  "prompt.placeholder.shell": "셸 명령어 입력... {{example}}",
  "prompt.placeholder.normal": '무엇이든 물어보세요... "{{example}}"',
  "prompt.placeholder.simple": "무엇이든 물어보세요...",
  "prompt.placeholder.summarizeComments": "댓글 요약…",
--- a/packages/app/src/i18n/no.ts
+++ b/packages/app/src/i18n/no.ts
@@ -230,7 +230,7 @@ export const dict = {
  "common.default": "Standard",
  "common.attachment": "vedlegg",

-  "prompt.placeholder.shell": "Skriv inn shell-kommando...",
+  "prompt.placeholder.shell": "Skriv inn shell-kommando... {{example}}",
  "prompt.placeholder.normal": 'Spør om hva som helst... "{{example}}"',
  "prompt.placeholder.simple": "Spør om hva som helst...",
  "prompt.placeholder.summarizeComments": "Oppsummer kommentarer…",
--- a/packages/app/src/i18n/pl.ts
+++ b/packages/app/src/i18n/pl.ts
@@ -211,7 +211,7 @@ export const dict = {
  "common.saving": "Zapisywanie...",
  "common.default": "Domyślny",
  "common.attachment": "załącznik",
-  "prompt.placeholder.shell": "Wpisz polecenie terminala...",
+  "prompt.placeholder.shell": "Wpisz polecenie terminala... {{example}}",
  "prompt.placeholder.normal": 'Zapytaj o cokolwiek... "{{example}}"',
  "prompt.placeholder.simple": "Zapytaj o cokolwiek...",
  "prompt.placeholder.summarizeComments": "Podsumuj komentarze…",
--- a/packages/app/src/i18n/ru.ts
+++ b/packages/app/src/i18n/ru.ts
@@ -227,7 +227,7 @@ export const dict = {
  "common.default": "По умолчанию",
  "common.attachment": "вложение",

-  "prompt.placeholder.shell": "Введите команду оболочки...",
+  "prompt.placeholder.shell": "Введите команду оболочки... {{example}}",
  "prompt.placeholder.normal": 'Спросите что угодно... "{{example}}"',
  "prompt.placeholder.simple": "Спросите что угодно...",
  "prompt.placeholder.summarizeComments": "Суммировать комментарии…",
--- a/packages/app/src/i18n/th.ts
+++ b/packages/app/src/i18n/th.ts
@@ -227,7 +227,7 @@ export const dict = {
  "common.default": "ค่าเริ่มต้น",
  "common.attachment": "ไฟล์แนบ",

-  "prompt.placeholder.shell": "ป้อนคำสั่งเชลล์...",
+  "prompt.placeholder.shell": "ป้อนคำสั่งเชลล์... {{example}}",
  "prompt.placeholder.normal": 'ถามอะไรก็ได้... "{{example}}"',
  "prompt.placeholder.simple": "ถามอะไรก็ได้...",
  "prompt.placeholder.summarizeComments": "สรุปความคิดเห็น…",
--- a/packages/app/src/i18n/tr.ts
+++ b/packages/app/src/i18n/tr.ts
@@ -232,7 +232,7 @@ export const dict = {
  "common.default": "Varsayılan",
  "common.attachment": "ek",

-  "prompt.placeholder.shell": "Kabuk komutu girin...",
+  "prompt.placeholder.shell": "Kabuk komutu girin... {{example}}",
  "prompt.placeholder.normal": 'Bir şeyler sorun... "{{example}}"',
  "prompt.placeholder.simple": "Bir şeyler sorun...",
  "prompt.placeholder.summarizeComments": "Yorumları özetle…",
--- a/packages/app/src/i18n/zh.ts
+++ b/packages/app/src/i18n/zh.ts
@@ -249,7 +249,7 @@ export const dict = {
  "common.default": "默认",
  "common.attachment": "附件",

-  "prompt.placeholder.shell": "输入 shell 命令...",
+  "prompt.placeholder.shell": "输入 shell 命令... {{example}}",
  "prompt.placeholder.normal": '随便问点什么... "{{example}}"',
  "prompt.placeholder.simple": "随便问点什么...",
  "prompt.placeholder.summarizeComments": "总结评论…",
--- a/packages/app/src/i18n/zht.ts
+++ b/packages/app/src/i18n/zht.ts
@@ -227,7 +227,7 @@ export const dict = {
  "common.default": "預設",
  "common.attachment": "附件",

-  "prompt.placeholder.shell": "輸入 shell 命令...",
+  "prompt.placeholder.shell": "輸入 shell 命令... {{example}}",
  "prompt.placeholder.normal": '隨便問點什麼... "{{example}}"',
  "prompt.placeholder.simple": "隨便問點什麼...",
  "prompt.placeholder.summarizeComments": "摘要評論…",