Skip to content

Commit 0ca7ecc

Browse files
opencode-agent[bot]jayair
opencode-agent[bot]
and
jayair
authored
fix(app): migrate composer tooltips to v2 (anomalyco#34147)
Co-authored-by: Jay V <[email protected]> Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
1 parent 25c017f commit 0ca7ecc

1 file changed

Lines changed: 57 additions & 20 deletions

File tree

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

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import { DockShellForm, DockTray } from "@opencode-ai/ui/dock-surface"
3535
import { Icon } from "@opencode-ai/ui/icon"
3636
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
3737
import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
38+
import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
39+
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
3840
import { IconButton } from "@opencode-ai/ui/icon-button"
3941
import { Select } from "@opencode-ai/ui/select"
4042
import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -1362,7 +1364,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
13621364
shouldAnimate: providersShouldFadeIn(),
13631365
paid: props.controls.model.paid,
13641366
title: language.t("command.model.choose"),
1365-
keybind: command.keybind("model.choose"),
1367+
keybind: command.keybindParts("model.choose"),
13661368
model: props.controls.model.selection,
13671369
providerID: props.controls.model.selection.current()?.provider?.id,
13681370
modelName: props.controls.model.selection.current()?.name ?? language.t("dialog.model.select.title"),
@@ -1379,7 +1381,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
13791381
const showAgentControl = createMemo(() => props.controls.agents.visible && props.controls.agents.options.length > 0)
13801382
const agentControlState = createMemo<ComposerAgentControlState>(() => ({
13811383
title: language.t("command.agent.cycle"),
1382-
keybind: command.keybind("agent.cycle"),
1384+
keybind: command.keybindParts("agent.cycle"),
13831385
options: props.controls.agents.options,
13841386
current: props.controls.agents.current,
13851387
style: control(),
@@ -1497,10 +1499,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
14971499
<div class="flex h-11 items-center px-2">
14981500
<div class="flex min-w-0 flex-1 items-center gap-0">
14991501
{fileAttachmentInput()}
1500-
<TooltipKeybind
1502+
<TooltipV2
15011503
placement="top"
1502-
title={language.t("prompt.action.attachFile")}
1503-
keybind={command.keybind("file.attach")}
1504+
value={
1505+
<>
1506+
{language.t("prompt.action.attachFile")}
1507+
<KeybindV2 keys={command.keybindParts("file.attach")} variant="neutral" />
1508+
</>
1509+
}
15041510
>
15051511
<IconButton
15061512
data-action="prompt-attach"
@@ -1514,7 +1520,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
15141520
tabIndex={store.mode === "normal" ? undefined : -1}
15151521
aria-label={language.t("prompt.action.attachFile")}
15161522
/>
1517-
</TooltipKeybind>
1523+
</TooltipV2>
15181524
<Show when={showAgentControl()}>
15191525
<ComposerAgentControl state={agentControlState()} />
15201526
</Show>
@@ -1529,11 +1535,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
15291535
!props.controls.model.selection.variant.current() && !store.variantOpen,
15301536
}}
15311537
>
1532-
<TooltipKeybind
1538+
<TooltipV2
15331539
placement="top"
15341540
gutter={4}
1535-
title={language.t("command.model.variant.cycle")}
1536-
keybind={command.keybind("model.variant.cycle")}
1541+
value={
1542+
<>
1543+
{language.t("command.model.variant.cycle")}
1544+
<KeybindV2 keys={command.keybindParts("model.variant.cycle")} variant="neutral" />
1545+
</>
1546+
}
15371547
>
15381548
<Select
15391549
size="normal"
@@ -1551,11 +1561,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
15511561
triggerProps={{ "data-action": "prompt-model-variant" }}
15521562
variant="ghost"
15531563
/>
1554-
</TooltipKeybind>
1564+
</TooltipV2>
15551565
</div>
15561566
</Show>
15571567
</div>
1558-
<Tooltip placement="top" inactive={!working() && blank()} value={tip()}>
1568+
<TooltipV2 placement="top" inactive={!working() && blank()} value={tip()}>
15591569
<IconButton
15601570
data-action="prompt-submit"
15611571
type="submit"
@@ -1570,7 +1580,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
15701580
}}
15711581
aria-label={stopping() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
15721582
/>
1573-
</Tooltip>
1583+
</TooltipV2>
15741584
</div>
15751585
</DockShellForm>
15761586
</div>
@@ -1916,7 +1926,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
19161926

19171927
type ComposerAgentControlState = {
19181928
title: string
1919-
keybind: string
1929+
keybind: string[]
19201930
options: string[]
19211931
current: string
19221932
style: JSX.CSSProperties | undefined
@@ -1928,7 +1938,7 @@ type ComposerModelControlState = {
19281938
shouldAnimate: boolean
19291939
paid: boolean
19301940
title: string
1931-
keybind: string
1941+
keybind: string[]
19321942
model: ReturnType<typeof useLocal>["model"]
19331943
providerID?: string
19341944
modelName: string
@@ -1943,7 +1953,16 @@ function ComposerAgentControl(props: { state: ComposerAgentControlState }) {
19431953
<div class="pointer-events-none absolute left-2 top-1/2 z-10 flex size-4 -translate-y-1/2 items-center justify-center text-v2-icon-icon-muted">
19441954
<Icon name="sliders" size="small" />
19451955
</div>
1946-
<TooltipKeybind placement="top" gutter={4} title={props.state.title} keybind={props.state.keybind}>
1956+
<TooltipV2
1957+
placement="top"
1958+
gutter={4}
1959+
value={
1960+
<>
1961+
{props.state.title}
1962+
<KeybindV2 keys={props.state.keybind} variant="neutral" />
1963+
</>
1964+
}
1965+
>
19471966
<Select
19481967
size="normal"
19491968
options={props.state.options}
@@ -1955,7 +1974,7 @@ function ComposerAgentControl(props: { state: ComposerAgentControlState }) {
19551974
triggerProps={{ "data-action": "prompt-agent" }}
19561975
variant="ghost"
19571976
/>
1958-
</TooltipKeybind>
1977+
</TooltipV2>
19591978
</div>
19601979
)
19611980
}
@@ -1966,7 +1985,16 @@ function ComposerModelControl(props: { state: ComposerModelControlState }) {
19661985
<Show
19671986
when={props.state.paid}
19681987
fallback={
1969-
<TooltipKeybind placement="top" gutter={4} title={props.state.title} keybind={props.state.keybind}>
1988+
<TooltipV2
1989+
placement="top"
1990+
gutter={4}
1991+
value={
1992+
<>
1993+
{props.state.title}
1994+
<KeybindV2 keys={props.state.keybind} variant="neutral" />
1995+
</>
1996+
}
1997+
>
19701998
<Button
19711999
data-action="prompt-model"
19722000
as="div"
@@ -1991,10 +2019,19 @@ function ComposerModelControl(props: { state: ComposerModelControlState }) {
19912019
<Icon name="chevron-down" size="small" class="text-v2-icon-icon-muted" />
19922020
</span>
19932021
</Button>
1994-
</TooltipKeybind>
2022+
</TooltipV2>
19952023
}
19962024
>
1997-
<TooltipKeybind placement="top" gutter={4} title={props.state.title} keybind={props.state.keybind}>
2025+
<TooltipV2
2026+
placement="top"
2027+
gutter={4}
2028+
value={
2029+
<>
2030+
{props.state.title}
2031+
<KeybindV2 keys={props.state.keybind} variant="neutral" />
2032+
</>
2033+
}
2034+
>
19982035
<ModelSelectorPopover
19992036
model={props.state.model}
20002037
triggerAs={Button}
@@ -2023,7 +2060,7 @@ function ComposerModelControl(props: { state: ComposerModelControlState }) {
20232060
<Icon name="chevron-down" size="small" class="text-v2-icon-icon-muted" />
20242061
</span>
20252062
</ModelSelectorPopover>
2026-
</TooltipKeybind>
2063+
</TooltipV2>
20272064
</Show>
20282065
</Show>
20292066
)

0 commit comments

Comments
 (0)