diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/app/src/components/prompt-input.tsx | 42 | ||||
| -rw-r--r-- | packages/app/src/components/session-context-usage.tsx | 2 | ||||
| -rw-r--r-- | packages/ui/src/components/select.tsx | 4 |
3 files changed, 34 insertions, 14 deletions
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 5162c0b08..619d4e5d9 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -1896,8 +1896,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => { </div> </Show> </div> - <div class="relative p-3 flex items-center justify-between"> - <div class="flex items-center justify-start gap-0.5"> + <div class="relative p-3 flex items-center justify-between gap-2"> + <div class="flex items-center gap-2 min-w-0 flex-1"> <Switch> <Match when={store.mode === "shell"}> <div class="flex items-center gap-2 px-2 h-6"> @@ -1909,6 +1909,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { <Match when={store.mode === "normal"}> <TooltipKeybind placement="top" + gutter={8} title={language.t("command.agent.cycle")} keybind={command.keybind("agent.cycle")} > @@ -1916,7 +1917,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => { options={local.agent.list().map((agent) => agent.name)} current={local.agent.current()?.name ?? ""} onSelect={local.agent.set} - class="capitalize" + class={`capitalize ${local.model.variant.list().length > 0 ? "max-w-[80px]" : "max-w-[120px]"}`} + valueClass="truncate" variant="ghost" /> </TooltipKeybind> @@ -1925,36 +1927,51 @@ export const PromptInput: Component<PromptInputProps> = (props) => { fallback={ <TooltipKeybind placement="top" + gutter={8} title={language.t("command.model.choose")} keybind={command.keybind("model.choose")} > - <Button as="div" variant="ghost" onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}> + <Button + as="div" + variant="ghost" + class="px-2 min-w-0 max-w-[140px]" + onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)} + > <Show when={local.model.current()?.provider?.id}> <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" /> </Show> - {local.model.current()?.name ?? language.t("dialog.model.select.title")} - <Icon name="chevron-down" size="small" /> + <span class="truncate max-w-[100px]"> + {local.model.current()?.name ?? language.t("dialog.model.select.title")} + </span> + <Icon name="chevron-down" size="small" class="shrink-0" /> </Button> </TooltipKeybind> } > <TooltipKeybind placement="top" + gutter={8} title={language.t("command.model.choose")} keybind={command.keybind("model.choose")} > - <ModelSelectorPopover triggerAs={Button} triggerProps={{ variant: "ghost" }}> + <ModelSelectorPopover + triggerAs={Button} + triggerProps={{ variant: "ghost", class: "min-w-0 max-w-[140px]" }} + > <Show when={local.model.current()?.provider?.id}> <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" /> </Show> - {local.model.current()?.name ?? language.t("dialog.model.select.title")} - <Icon name="chevron-down" size="small" /> + <span class="truncate max-w-[100px]"> + {local.model.current()?.name ?? language.t("dialog.model.select.title")} + </span> + <Icon name="chevron-down" size="small" class="shrink-0" /> </ModelSelectorPopover> </TooltipKeybind> </Show> <Show when={local.model.variant.list().length > 0}> <TooltipKeybind placement="top" + gutter={8} title={language.t("command.model.variant.cycle")} keybind={command.keybind("model.variant.cycle")} > @@ -1971,6 +1988,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { <Show when={permission.permissionsEnabled() && params.id}> <TooltipKeybind placement="top" + gutter={8} title={language.t("command.permissions.autoaccept.enable")} keybind={command.keybind("permissions.autoaccept")} > @@ -2000,7 +2018,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { </Match> </Switch> </div> - <div class="flex items-center gap-3 absolute right-3 bottom-3"> + <div class="flex items-center gap-1 shrink-0"> <input ref={fileInputRef} type="file" @@ -2012,14 +2030,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => { e.currentTarget.value = "" }} /> - <div class="flex items-center gap-2"> + <div class="flex items-center gap-1 mr-1"> <SessionContextUsage /> <Show when={store.mode === "normal"}> <Tooltip placement="top" value={language.t("prompt.action.attachFile")}> <Button type="button" variant="ghost" - class="size-6" + class="size-6 px-1" onClick={() => fileInputRef.click()} aria-label={language.t("prompt.action.attachFile")} > diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx index 1e37d8f6a..c5de54cf0 100644 --- a/packages/app/src/components/session-context-usage.tsx +++ b/packages/app/src/components/session-context-usage.tsx @@ -64,7 +64,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) { } const circle = () => ( - <div class="p-1"> + <div class="flex items-center justify-center"> <ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} /> </div> ) diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx index 0386c329e..b370dbb64 100644 --- a/packages/ui/src/components/select.tsx +++ b/packages/ui/src/components/select.tsx @@ -11,6 +11,7 @@ export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | " value?: (x: T) => string label?: (x: T) => string groupBy?: (x: T) => string + valueClass?: ComponentProps<"div">["class"] onSelect?: (value: T | undefined) => void onHighlight?: (value: T | undefined) => (() => void) | void class?: ComponentProps<"div">["class"] @@ -30,6 +31,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">) "value", "label", "groupBy", + "valueClass", "onSelect", "onHighlight", "onOpenChange", @@ -140,7 +142,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">) [local.class ?? ""]: !!local.class, }} > - <Kobalte.Value<T> data-slot="select-select-trigger-value"> + <Kobalte.Value<T> data-slot="select-select-trigger-value" class={local.valueClass}> {(state) => { const selected = state.selectedOption() ?? local.current if (!selected) return local.placeholder || "" |