diff --git a/app/src/components/AiToolbar.tsx b/app/src/components/AiToolbar.tsx index d258d28a..3b1451c6 100644 --- a/app/src/components/AiToolbar.tsx +++ b/app/src/components/AiToolbar.tsx @@ -1,7 +1,7 @@ import { Button2, IconButton2, Textarea } from "../ui/Shared"; import { CaretDown, CaretUp, MagicWand } from "phosphor-react"; import cx from "classnames"; -import { t } from "@lingui/macro"; +import { t, Trans } from "@lingui/macro"; import { createExamples } from "../pages/createExamples"; import { Mode, @@ -47,8 +47,12 @@ export function AiToolbar() { const toggleOpen = () => setIsOpen(!isOpen); const handleModeChange = (mode: Mode) => { - setMode(mode); - if (!isOpen) setIsOpen(true); + if (mode === currentMode && isOpen) { + setIsOpen(false); + } else { + setMode(mode); + setIsOpen(true); + } }; const currentText = usePromptStore((state) => state.currentText); @@ -56,25 +60,28 @@ export function AiToolbar() { const showAcceptDiffButton = diff && !isRunning; return ( -
+
-
+
{!showAcceptDiffButton ? ( (["prompt", "convert", "edit"] as Mode[]).map((mode) => ( handleModeChange(mode)} className={cx({ - "hover:bg-white dark:hover:bg-neutral-700": - mode !== currentMode, + "dark:hover:bg-neutral-700": mode !== currentMode, "dark:bg-purple-700 dark:text-purple-100": - mode === currentMode, + mode === currentMode && isOpen, })} > {getModeTitle(mode)} @@ -82,19 +89,23 @@ export function AiToolbar() { )) ) : ( - Keep changes? + Keep changes? )}
{!showAcceptDiffButton ? ( - {!isOpen ? : } + {!isOpen ? ( + + ) : ( + + )} ) : (
@@ -109,17 +120,17 @@ export function AiToolbar() {
{isOpen && (
-

+

{getModeDescription(currentMode)}