diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx index 6f089960af..ed4162e3b6 100644 --- a/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx @@ -13,6 +13,7 @@ import { useLanguage } from "../../context/language" import { useVSCode } from "../../context/vscode" import { ModelSelector } from "./ModelSelector" import { ModeSwitcher } from "./ModeSwitcher" +import { ThinkingSelector } from "./ThinkingSelector" import { useFileMention } from "../../hooks/useFileMention" import { useImageAttachments } from "../../hooks/useImageAttachments" import { fileName, dirName, buildHighlightSegments } from "./prompt-input-utils" @@ -314,18 +315,7 @@ export const PromptInput: Component = () => {
- 0}> - - - - +
{ + const session = useSession() + const language = useLanguage() + const [open, setOpen] = createSignal(false) + + const variants = () => session.variantList() + const current = () => session.currentVariant() + + function pick(value: string | undefined) { + session.selectVariant(value) + setOpen(false) + } + + const triggerLabel = () => { + const v = current() + return v ? v.charAt(0).toUpperCase() + v.slice(1) : language.t("common.default") + } + + return ( + 0}> + + {triggerLabel()} + + + + + } + > +
+
pick(undefined)} + > + + {language.t("common.default")} + +
+ + {(v) => ( +
pick(v)} + > + {v.charAt(0).toUpperCase() + v.slice(1)} +
+ )} +
+
+
+
+ ) +} diff --git a/packages/kilo-vscode/webview-ui/src/context/session.tsx b/packages/kilo-vscode/webview-ui/src/context/session.tsx index 58457b92a6..521a97137b 100644 --- a/packages/kilo-vscode/webview-ui/src/context/session.tsx +++ b/packages/kilo-vscode/webview-ui/src/context/session.tsx @@ -109,7 +109,7 @@ interface SessionContextValue { // Thinking variant for the selected model variantList: () => string[] currentVariant: () => string | undefined - cycleVariant: () => void + selectVariant: (value: string | undefined) => void // Actions sendMessage: (text: string, providerID?: string, modelID?: string, files?: FileAttachment[]) => void @@ -296,21 +296,12 @@ export const SessionProvider: ParentComponent = (props) => { return undefined } - const cycleVariant = () => { + const selectVariant = (value: string | undefined) => { const sel = selected() if (!sel) return - const list = variantList() - if (list.length === 0) return const key = variantKey(sel) - const current = store.variantSelections[key] - const next = (() => { - if (!current || !list.includes(current)) return list[0] - const idx = list.indexOf(current) - if (idx === list.length - 1) return undefined - return list[idx + 1] - })() - setStore("variantSelections", key, next) - vscode.postMessage({ type: "persistVariant", key, value: next }) + setStore("variantSelections", key, value) + vscode.postMessage({ type: "persistVariant", key, value }) } // Load persisted variants from extension globalState @@ -926,7 +917,7 @@ export const SessionProvider: ParentComponent = (props) => { allParts, variantList, currentVariant, - cycleVariant, + selectVariant, sendMessage, abort, compact, diff --git a/packages/kilo-vscode/webview-ui/src/styles/chat.css b/packages/kilo-vscode/webview-ui/src/styles/chat.css index ce626c753c..99ac0e47b8 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/chat.css +++ b/packages/kilo-vscode/webview-ui/src/styles/chat.css @@ -576,6 +576,42 @@ letter-spacing: 0.03em; } +/* ============================================ + Thinking Selector (uses kilo-ui Popover) + ============================================ */ + +.thinking-selector-trigger-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-transform: capitalize; +} + +.thinking-selector-list { + min-width: 120px; +} + +.thinking-selector-item { + padding: 8px 12px; + cursor: pointer; + font-size: 12px; +} + +.thinking-selector-item:hover { + background: var(--surface-interactive-hover, var(--vscode-list-hoverBackground)); +} + +.thinking-selector-item.selected { + background: var( + --surface-interactive-active, + var(--vscode-list-activeSelectionBackground, var(--vscode-list-hoverBackground)) + ); +} + +.thinking-selector-item-name { + font-weight: 500; +} + /* ============================================ Mode Switcher (uses kilo-ui Popover) ============================================ */