fix(tui): inherit elevated tool theme (#38224)

This commit is contained in:
James Long 2026-07-21 22:45:21 -04:00 committed by GitHub
parent 80dc21d8f7
commit 6b9136e797
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 7 deletions

View file

@ -22,7 +22,7 @@ import { createComponentTheme, type ComponentTheme } from "../theme/v2/component
import { resolveThemeFile } from "../theme/v2/resolve"
import { migrateV1 } from "../theme/v2/v1-migrate"
import { themeModes } from "../theme/v2/select"
import { createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
import { createEffect, createMemo, onCleanup, onMount, type Accessor, type ParentProps } from "solid-js"
import { createStore, produce } from "solid-js/store"
import { createSimpleContext } from "./helper"
import { useConfig } from "../config"
@ -99,7 +99,7 @@ const [store, setStore] = createStore<State>({
subscribeThemes((themes) => setStore("themes", themes))
export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
const themeContext = createSimpleContext({
name: "Theme",
init: (props: { mode: "dark" | "light"; source?: ThemeSource }) => {
const renderer = useRenderer()
@ -363,6 +363,18 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
},
})
export const useTheme = themeContext.use
export const ThemeProvider = themeContext.provider
export function ThemeContextProvider(props: ParentProps<{ context: ContextName }>) {
const theme = useTheme()
return (
<themeContext.context.Provider value={theme.contextual(props.context)}>
{props.children}
</themeContext.context.Provider>
)
}
function duration(milliseconds: number) {
return `${milliseconds.toFixed(2)} ms`
}

View file

@ -22,7 +22,7 @@ import { useData } from "../../context/data"
import { SplitBorder } from "../../ui/border"
import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime"
import { Spinner, SPINNER_FRAMES } from "../../component/spinner"
import { useTheme } from "../../context/theme"
import { ThemeContextProvider, useTheme } from "../../context/theme"
import { BoxRenderable, ScrollBoxRenderable, addDefaultParsers, TextAttributes, RGBA } from "@opentui/core"
import { Prompt, type PromptRef } from "../../component/prompt"
import type {
@ -2352,15 +2352,26 @@ function StatusBadge(props: { children: string }) {
)
}
function BlockTool(props: {
type BlockToolProps = {
title?: string
path?: { label: string; value: string }
children?: JSX.Element
onClick?: () => void
part?: SessionMessageAssistantTool
spinner?: boolean
}) {
const { themeV2 } = useTheme().contextual("elevated")
}
function BlockTool(props: BlockToolProps) {
const parentTheme = useTheme()
return (
<ThemeContextProvider context="elevated">
<BlockToolContent {...props} borderColor={parentTheme.themeV2.background.default} />
</ThemeContextProvider>
)
}
function BlockToolContent(props: BlockToolProps & { borderColor: RGBA }) {
const { themeV2 } = useTheme()
const ctx = use()
const data = useData()
const renderer = useRenderer()
@ -2380,7 +2391,7 @@ function BlockTool(props: {
gap={1}
backgroundColor={hover() ? themeV2.raise(themeV2.background.default) : themeV2.background.default}
customBorderChars={SplitBorder.customBorderChars}
borderColor={themeV2.background.default}
borderColor={props.borderColor}
onMouseOver={() => props.onClick && setHover(true)}
onMouseOut={() => setHover(false)}
onMouseUp={() => {