Skip to content

Commit 69cb49f

Browse files
iamdavidhilliamdavidhill
committed
tui: dock auto-accept after thinking and move Add file to bottom-left
Auto-accept now lives in the footer dock beside the thinking control so it stays easy to find without crowding the text box. The Add file button moves to the bottom-left of the editor and the input gets a bit more bottom padding so the control row doesn’t overlap what you’re typing.
1 parent e30678a commit 69cb49f

1 file changed

Lines changed: 68 additions & 54 deletions

File tree

‎packages/app/src/components/prompt-input.tsx‎

Lines changed: 68 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1214,15 +1214,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
12141214
onKeyDown={handleKeyDown}
12151215
classList={{
12161216
"select-text": true,
1217-
"w-full pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
1217+
"w-full pl-3 pr-2 pt-2 pb-[52px] text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
12181218
"[&_[data-type=file]]:text-syntax-property": true,
12191219
"[&_[data-type=agent]]:text-syntax-type": true,
12201220
"font-mono!": store.mode === "shell",
12211221
}}
12221222
/>
12231223
<Show when={!prompt.dirty()}>
12241224
<div
1225-
class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
1225+
class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-[52px] text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
12261226
classList={{ "font-mono!": store.mode === "shell" }}
12271227
>
12281228
{placeholder()}
@@ -1250,30 +1250,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
12501250
"pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
12511251
}}
12521252
>
1253-
<TooltipKeybind
1254-
placement="top"
1255-
title={language.t("prompt.action.attachFile")}
1256-
keybind={command.keybind("file.attach")}
1257-
>
1258-
<Button
1259-
data-action="prompt-attach"
1260-
type="button"
1261-
variant="ghost"
1262-
class="size-8 p-0"
1263-
style={{
1264-
opacity: buttonsSpring(),
1265-
transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
1266-
filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
1267-
}}
1268-
onClick={pick}
1269-
disabled={store.mode !== "normal"}
1270-
tabIndex={store.mode === "normal" ? undefined : -1}
1271-
aria-label={language.t("prompt.action.attachFile")}
1272-
>
1273-
<Icon name="plus" class="size-4.5" />
1274-
</Button>
1275-
</TooltipKeybind>
1276-
12771253
<Tooltip
12781254
placement="top"
12791255
inactive={!prompt.dirty() && !working()}
@@ -1314,42 +1290,35 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
13141290
</div>
13151291

13161292
<div class="pointer-events-none absolute bottom-2 left-2">
1317-
<div class="pointer-events-auto">
1293+
<div
1294+
aria-hidden={store.mode !== "normal"}
1295+
class="pointer-events-auto"
1296+
style={{
1297+
"pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
1298+
}}
1299+
>
13181300
<TooltipKeybind
13191301
placement="top"
13201302
gutter={8}
1321-
title={language.t(
1322-
accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
1323-
)}
1324-
keybind={command.keybind("permissions.autoaccept")}
1303+
title={language.t("prompt.action.attachFile")}
1304+
keybind={command.keybind("file.attach")}
13251305
>
13261306
<Button
1327-
data-action="prompt-permissions"
1307+
data-action="prompt-attach"
1308+
type="button"
13281309
variant="ghost"
1329-
onClick={() => {
1330-
if (!params.id) {
1331-
permission.toggleAutoAcceptDirectory(sdk.directory)
1332-
return
1333-
}
1334-
permission.toggleAutoAccept(params.id, sdk.directory)
1335-
}}
1336-
classList={{
1337-
"size-6 flex items-center justify-center": true,
1338-
"text-text-base": !accepting(),
1339-
"hover:bg-surface-success-base": accepting(),
1310+
class="size-8 p-0"
1311+
style={{
1312+
opacity: buttonsSpring(),
1313+
transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
1314+
filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
13401315
}}
1341-
aria-label={
1342-
accepting()
1343-
? language.t("command.permissions.autoaccept.disable")
1344-
: language.t("command.permissions.autoaccept.enable")
1345-
}
1346-
aria-pressed={accepting()}
1316+
onClick={pick}
1317+
disabled={store.mode !== "normal"}
1318+
tabIndex={store.mode === "normal" ? undefined : -1}
1319+
aria-label={language.t("prompt.action.attachFile")}
13471320
>
1348-
<Icon
1349-
name="chevron-double-right"
1350-
size="small"
1351-
classList={{ "text-icon-success-base": accepting() }}
1352-
/>
1321+
<Icon name="plus" class="size-4.5" />
13531322
</Button>
13541323
</TooltipKeybind>
13551324
</div>
@@ -1494,6 +1463,51 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
14941463
variant="ghost"
14951464
/>
14961465
</TooltipKeybind>
1466+
1467+
<TooltipKeybind
1468+
placement="top"
1469+
gutter={4}
1470+
title={language.t(
1471+
accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
1472+
)}
1473+
keybind={command.keybind("permissions.autoaccept")}
1474+
>
1475+
<Button
1476+
data-action="prompt-permissions"
1477+
type="button"
1478+
variant="ghost"
1479+
class="size-7 p-0 flex items-center justify-center"
1480+
style={{
1481+
opacity: buttonsSpring(),
1482+
transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
1483+
filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
1484+
"pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
1485+
}}
1486+
onClick={() => {
1487+
if (!params.id) {
1488+
permission.toggleAutoAcceptDirectory(sdk.directory)
1489+
return
1490+
}
1491+
permission.toggleAutoAccept(params.id, sdk.directory)
1492+
}}
1493+
classList={{
1494+
"text-text-base": !accepting(),
1495+
"hover:bg-surface-success-base": accepting(),
1496+
}}
1497+
aria-label={
1498+
accepting()
1499+
? language.t("command.permissions.autoaccept.disable")
1500+
: language.t("command.permissions.autoaccept.enable")
1501+
}
1502+
aria-pressed={accepting()}
1503+
>
1504+
<Icon
1505+
name="chevron-double-right"
1506+
size="small"
1507+
classList={{ "text-icon-success-base": accepting() }}
1508+
/>
1509+
</Button>
1510+
</TooltipKeybind>
14971511
</div>
14981512
</div>
14991513
<div class="shrink-0">

0 commit comments

Comments
 (0)