aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2025-12-19 15:14:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: apply dark mode to tool confirmation message (#1482)

Browse Source
This commit is contained in:
Yingjie He
2025-03-03 15:07:14 -08:00
committed by GitHub
parent cbd1ba6706
commit c957bef510
4 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/desktop/src/components/BottomMenu.tsx
View File

@@ -15,7 +15,7 @@ export default function BottomMenu({
setView: (view: View) => void;
}) {
const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
const [gooseMode, setGooseMode] = useState('approve');
const [gooseMode, setGooseMode] = useState('auto');
const { currentModel } = useModel();
const { recentModels } = useRecentModels(); // Get recent models
const dropdownRef = useRef<HTMLDivElement>(null);
@@ -50,8 +50,10 @@ export default function BottomMenu({
if (response.ok) {
const { value } = await response.json();
if (value) {
setGooseMode(value);
}
}
} catch (error) {
console.error('Error fetching current mode:', error);
}

5
ui/desktop/src/components/ToolCallConfirmation.tsx
View File

@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import { ConfirmToolRequest } from '../utils/toolConfirm';
import { snakeToTitleCase } from '../utils';
import Box from './ui/Box';
export default function ToolConfirmation({ toolConfirmationId, toolName }) {
const [clicked, setClicked] = useState(false);
@@ -15,7 +14,7 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
return (
<>
<div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 rounded-b-none">
<div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 rounded-b-none text-textStandard">
Goose would like to call the above tool. Allow?
</div>
{clicked ? (
@@ -45,7 +44,7 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
)}
<span className="ml-2 text-gray-500 dark:text-gray-400">
<span className="ml-2 text-textStandard">
{snakeToTitleCase(toolName.substring(toolName.lastIndexOf('__') + 2))} is {status}
</span>
</div>

4
ui/desktop/src/components/settings/SettingsView.tsx
View File

@@ -62,7 +62,7 @@ export default function SettingsView({
setView: (view: View) => void;
viewOptions: SettingsViewOptions;
}) {
const [mode, setMode] = useState('approve');
const [mode, setMode] = useState('auto');
const handleModeChange = async (newMode: string) => {
const storeResponse = await fetch(getApiUrl('/configs/store'), {
@@ -99,8 +99,10 @@ export default function SettingsView({
if (response.ok) {
const { value } = await response.json();
if (value) {
setMode(value);
}
}
} catch (error) {
console.error('Error fetching current mode:', error);
}

18
ui/desktop/src/components/settings/basic/ModeSelection.tsx
View File

@@ -22,22 +22,28 @@ const ModeSelection = ({ value, onChange }) => {
return (
<div>
<h4 className="font-medium mb-4">Mode Selection</h4>
<h4 className="font-medium mb-4 text-textStandard">Mode Selection</h4>
<RadioGroup.Root className="flex flex-col space-y-2" value={value} onValueChange={onChange}>
{modes.map((mode) => (
<RadioGroup.Item
key={mode.value}
value={mode.value}
className="flex items-center justify-between p-2 hover:bg-gray-100 rounded transition-all cursor-pointer"
className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-all cursor-pointer"
>
<div className="flex flex-col text-left">
<h3 className="text-sm font-semibold text-textStandard">{mode.label}</h3>
<p className="text-xs text-textSubtle mt-[2px]">{mode.description}</p>
<h3 className="text-sm font-semibold text-textStandard dark:text-gray-200">
{mode.label}
</h3>
<p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
{mode.description}
</p>
</div>
<div className="flex-shrink-0">
<div className="w-4 h-4 flex items-center justify-center rounded-full border border-gray-500">
{value === mode.value && <div className="w-2 h-2 bg-black rounded-full" />}
<div className="w-4 h-4 flex items-center justify-center rounded-full border border-gray-500 dark:border-gray-400">
{value === mode.value && (
<div className="w-2 h-2 bg-black dark:bg-white rounded-full" />
)}
</div>
</div>
</RadioGroup.Item>