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

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

@@ -15,7 +15,7 @@ export default function BottomMenu({
setView: (view: View) => void; setView: (view: View) => void;
}) { }) {
const [isModelMenuOpen, setIsModelMenuOpen] = useState(false); const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
const [gooseMode, setGooseMode] = useState('approve'); const [gooseMode, setGooseMode] = useState('auto');
const { currentModel } = useModel(); const { currentModel } = useModel();
const { recentModels } = useRecentModels(); // Get recent models const { recentModels } = useRecentModels(); // Get recent models
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
@@ -50,7 +50,9 @@ export default function BottomMenu({
if (response.ok) { if (response.ok) {
const { value } = await response.json(); const { value } = await response.json();
setGooseMode(value); if (value) {
setGooseMode(value);
}
} }
} catch (error) { } catch (error) {
console.error('Error fetching current mode:', 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 React, { useState } from 'react';
import { ConfirmToolRequest } from '../utils/toolConfirm'; import { ConfirmToolRequest } from '../utils/toolConfirm';
import { snakeToTitleCase } from '../utils'; import { snakeToTitleCase } from '../utils';
import Box from './ui/Box';
export default function ToolConfirmation({ toolConfirmationId, toolName }) { export default function ToolConfirmation({ toolConfirmationId, toolName }) {
const [clicked, setClicked] = useState(false); const [clicked, setClicked] = useState(false);
@@ -15,7 +14,7 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
return ( 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? Goose would like to call the above tool. Allow?
</div> </div>
{clicked ? ( {clicked ? (
@@ -45,7 +44,7 @@ export default function ToolConfirmation({ toolConfirmationId, toolName }) {
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </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} {snakeToTitleCase(toolName.substring(toolName.lastIndexOf('__') + 2))} is {status}
</span> </span>
</div> </div>

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

@@ -62,7 +62,7 @@ export default function SettingsView({
setView: (view: View) => void; setView: (view: View) => void;
viewOptions: SettingsViewOptions; viewOptions: SettingsViewOptions;
}) { }) {
const [mode, setMode] = useState('approve'); const [mode, setMode] = useState('auto');
const handleModeChange = async (newMode: string) => { const handleModeChange = async (newMode: string) => {
const storeResponse = await fetch(getApiUrl('/configs/store'), { const storeResponse = await fetch(getApiUrl('/configs/store'), {
@@ -99,7 +99,9 @@ export default function SettingsView({
if (response.ok) { if (response.ok) {
const { value } = await response.json(); const { value } = await response.json();
setMode(value); if (value) {
setMode(value);
}
} }
} catch (error) { } catch (error) {
console.error('Error fetching current mode:', 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 ( return (
<div> <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}> <RadioGroup.Root className="flex flex-col space-y-2" value={value} onValueChange={onChange}>
{modes.map((mode) => ( {modes.map((mode) => (
<RadioGroup.Item <RadioGroup.Item
key={mode.value} key={mode.value}
value={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"> <div className="flex flex-col text-left">
<h3 className="text-sm font-semibold text-textStandard">{mode.label}</h3> <h3 className="text-sm font-semibold text-textStandard dark:text-gray-200">
<p className="text-xs text-textSubtle mt-[2px]">{mode.description}</p> {mode.label}
</h3>
<p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
{mode.description}
</p>
</div> </div>
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="w-4 h-4 flex items-center justify-center rounded-full border border-gray-500"> <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 rounded-full" />} {value === mode.value && (
<div className="w-2 h-2 bg-black dark:bg-white rounded-full" />
)}
</div> </div>
</div> </div>
</RadioGroup.Item> </RadioGroup.Item>