diff options
Diffstat (limited to 'packages/app/src/components')
| -rw-r--r-- | packages/app/src/components/prompt-input.tsx | 41 |
1 files changed, 22 insertions, 19 deletions
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 156b0b3a4..1131baa49 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -1,6 +1,6 @@ import { useFilteredList } from "@opencode-ai/ui/hooks" import { useSpring } from "@opencode-ai/ui/motion-spring" -import { createEffect, on, Component, Show, onCleanup, createMemo, createSignal } from "solid-js" +import { createEffect, on, Component, Show, onCleanup, createMemo, createSignal, createResource } from "solid-js" import { createStore } from "solid-js/store" import { useLocal } from "@/context/local" import { selectionFromLines, type SelectedLineRange, useFile } from "@/context/file" @@ -54,7 +54,7 @@ import { PromptImageAttachments } from "./prompt-input/image-attachments" import { PromptDragOverlay } from "./prompt-input/drag-overlay" import { promptPlaceholder } from "./prompt-input/placeholder" import { ImagePreview } from "@opencode-ai/ui/image-preview" -import { useQuery } from "@tanstack/solid-query" +import { useQueries, useQuery } from "@tanstack/solid-query" import { loadAgentsQuery, loadProvidersQuery } from "@/context/global-sync/bootstrap" interface PromptInputProps { @@ -1252,16 +1252,21 @@ export const PromptInput: Component<PromptInputProps> = (props) => { } } - const agentsQuery = useQuery(() => loadAgentsQuery(sdk.directory)) - const agentsLoading = () => agentsQuery.isLoading - - const globalProvidersQuery = useQuery(() => loadProvidersQuery(null)) - const providersQuery = useQuery(() => loadProvidersQuery(sdk.directory)) + const [agentsQuery, globalProvidersQuery, providersQuery] = useQueries(() => ({ + queries: [loadAgentsQuery(sdk.directory), loadProvidersQuery(null), loadProvidersQuery(sdk.directory)], + })) + const agentsLoading = () => agentsQuery.isLoading const providersLoading = () => agentsLoading() || providersQuery.isLoading || globalProvidersQuery.isLoading + const [promptReady] = createResource( + () => prompt.ready().promise, + (p) => p, + ) + return ( <div class="relative size-full _max-h-[320px] flex flex-col gap-0"> + {(promptReady(), null)} <PromptPopover popover={store.popover} setSlashPopoverRef={(el) => (slashPopoverRef = el)} @@ -1358,15 +1363,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => { }} style={{ "padding-bottom": space }} /> - <Show when={!prompt.dirty()}> - <div - class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate" - classList={{ "font-mono!": store.mode === "shell" }} - style={{ "padding-bottom": space }} - > - {placeholder()} - </div> - </Show> + <div + class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate" + classList={{ "font-mono!": store.mode === "shell" }} + style={{ "padding-bottom": space, display: prompt.dirty() ? "none" : undefined }} + > + {placeholder()} + </div> </div> <div @@ -1457,7 +1460,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { </div> <div class="flex items-center gap-1.5 min-w-0 flex-1 h-7"> <Show when={!agentsLoading()}> - <div data-component="prompt-agent-control"> + <div data-component="prompt-agent-control" style={{ animation: "fade-in 0.3s" }}> <TooltipKeybind placement="top" gutter={4} @@ -1483,7 +1486,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { </Show> <Show when={!providersLoading()}> <Show when={store.mode !== "shell"}> - <div data-component="prompt-model-control"> + <div data-component="prompt-model-control" style={{ animation: "fade-in 0.3s" }}> <Show when={providers.paid().length > 0} fallback={ @@ -1554,7 +1557,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { </TooltipKeybind> </Show> </div> - <div data-component="prompt-variant-control"> + <div data-component="prompt-variant-control" style={{ animation: "fade-in 0.3s" }}> <TooltipKeybind placement="top" gutter={4} |