aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2026-02-23 07:24:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: fully remove react-router now that it is unused (#1317)

Browse Source
This commit is contained in:
Alex Hancock
2025-02-20 16:39:33 -05:00
committed by GitHub
parent 353bf4cddc
commit f509bafd07
15 changed files with 11 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/desktop/eslint.config.js
View File

@@ -26,7 +26,7 @@ const noWindowLocationHref = {
) {
context.report({
node,
message: 'Do not use window.location.href directly in Electron apps. Use React Router\'s navigate() instead.'
message: 'Do not use window.location.href directly in Electron apps. Use setView from the project instead'
});
}
}

2
ui/desktop/openapi.json
View File

@@ -10,7 +10,7 @@
"license": {
"name": "Apache-2.0"
},
"version": "1.0.5"
"version": "1.0.7"
},
"paths": {
"/config": {

42
ui/desktop/package-lock.json generated
View File

@@ -38,7 +38,6 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-markdown": "^9.0.1",
"react-router-dom": "^6.28.0",
"react-select": "^5.9.0",
"react-syntax-highlighter": "^15.6.1",
"react-toastify": "^8.0.0",
@@ -3925,15 +3924,6 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.22.0.tgz",
"integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==",
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.34.6",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.6.tgz",
@@ -13655,38 +13645,6 @@
}
}
},
"node_modules/react-router": {
"version": "6.29.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.29.0.tgz",
"integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.22.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.29.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.29.0.tgz",
"integrity": "sha512-pkEbJPATRJ2iotK+wUwHfy0xs2T59YPEN8BQxVCPeBZvK7kfPESRc/nyxzdcxR17hXgUPYx2whMwl+eo9cUdnQ==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.22.0",
"react-router": "6.29.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-select": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.0.tgz",

1
ui/desktop/package.json
View File

@@ -93,7 +93,6 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-markdown": "^9.0.1",
"react-router-dom": "^6.28.0",
"react-select": "^5.9.0",
"react-syntax-highlighter": "^15.6.1",
"react-toastify": "^8.0.0",

5
ui/desktop/src/App.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { addExtensionFromDeepLink } from './extensions';
import { useNavigate } from 'react-router-dom';
import LauncherWindow from './LauncherWindow';
import ChatWindow from './ChatWindow';
import ErrorScreen from './components/ErrorScreen';
@@ -19,7 +18,7 @@ export default function App() {
const [isInstalling, setIsInstalling] = useState(false); // Track installation progress
const searchParams = new URLSearchParams(window.location.search);
const isLauncher = searchParams.get('window') === 'launcher';
const navigate = useNavigate();
const navigate = () => console.log('todo - bring back nav');
// Utility function to extract the command from the link
function extractCommand(link: string): string {
@@ -55,7 +54,7 @@ export default function App() {
console.log('Confirming installation for link:', pendingLink);
try {
await addExtensionFromDeepLink(pendingLink, navigate); // Proceed with adding the extension
await addExtensionFromDeepLink(pendingLink, navigate);
} catch (error) {
console.error('Failed to add extension:', error);
} finally {

14
ui/desktop/src/ChatWindow.tsx
View File

@@ -363,12 +363,6 @@ export default function ChatWindow() {
setupStoredProvider();
}, []);
// Render everything inside ChatLayout now
// We'll switch views inside the ChatLayout children.
// If we want to skip showing ChatLayout for the welcome screen, we can do so.
// But let's do exactly what's requested: put all view options under ChatLayout.
return (
<ChatLayout mode={mode}>
{/* Conditionally render based on `view` */}
@@ -395,14 +389,6 @@ export default function ChatWindow() {
setView={setView}
/>
)}
{view === 'configPage' && (
<ConfigPage
onClose={() => {
setView('chat');
}}
setView={setView}
/>
)}
{view === 'configureProviders' && (
<ConfigureProviders
onClose={() => {

150
ui/desktop/src/ConfigTestingWindow.tsx
View File

@@ -1,150 +0,0 @@
import React, { useEffect, useState } from 'react';
import { Button } from './components/ui/button';
import { Input } from './components/ui/input';
import { Label } from './components/ui/label';
import { Card } from './components/ui/card';
import { useNavigate } from 'react-router-dom';
import BackButton from './components/ui/BackButton';
import { useConfig } from './hooks/useConfig';
export default function ConfigPage() {
const [configs, setConfigs] = useState<Record<string, any>>({});
const [newKey, setNewKey] = useState('');
const [newValue, setNewValue] = useState('');
const navigate = useNavigate();
const { loading, error, loadConfigs, addConfig, removeConfig } = useConfig();
// Fetch all configs on component mount
useEffect(() => {
const fetchConfigs = async () => {
const result = await loadConfigs();
setConfigs(result);
};
fetchConfigs();
}, [loadConfigs]);
const handleAddConfig = async () => {
if (!newKey || !newValue) {
return;
}
let parsedValue = newValue;
// Try to parse as JSON if it looks like JSON
if (newValue.trim().startsWith('{') || newValue.trim().startsWith('[')) {
try {
parsedValue = JSON.parse(newValue);
} catch (e) {
// If parsing fails, use the original string value
console.log('Value is not valid JSON, using as string');
}
}
const success = await addConfig(newKey, parsedValue);
if (success) {
setNewKey('');
setNewValue('');
const updatedConfigs = await loadConfigs();
setConfigs(updatedConfigs);
}
};
const handleRemoveConfig = async (key: string) => {
const success = await removeConfig(key);
if (success) {
const updatedConfigs = await loadConfigs();
setConfigs(updatedConfigs);
}
};
return (
<div className="h-screen w-full">
<div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
<div className="flex flex-col pb-24">
<div className="px-8 pt-6 pb-4">
<BackButton onClick={() => navigate('/settings')} />
<h1 className="text-3xl font-medium text-textStandard mt-1">Configuration</h1>
</div>
<div className="flex-1 py-8 pt-[20px] px-8">
<div className="space-y-8 max-w-2xl">
{/* Add new config form */}
<Card className="p-6">
<h2 className="text-xl font-semibold mb-4">Add New Configuration</h2>
<div className="grid gap-4">
<div>
<Label htmlFor="configKey">Key</Label>
<Input
id="configKey"
value={newKey}
onChange={(e) => setNewKey(e.target.value)}
placeholder="Enter config key"
className="mt-1"
/>
</div>
<div>
<Label htmlFor="configValue">Value</Label>
<Input
id="configValue"
value={newValue}
onChange={(e) => setNewValue(e.target.value)}
placeholder="Enter config value (string or JSON)"
className="mt-1"
/>
</div>
<Button onClick={handleAddConfig} disabled={loading}>
{loading ? 'Adding...' : 'Add Configuration'}
</Button>
</div>
</Card>
{/* Error display */}
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{error.message}
</div>
)}
{/* Config list */}
<Card className="p-6">
<h2 className="text-xl font-semibold mb-4">Current Configurations</h2>
<div className="grid gap-4">
{loading ? (
<div className="text-center text-gray-500">Loading configurations...</div>
) : Object.keys(configs).length === 0 ? (
<div className="text-center text-gray-500">No configurations found</div>
) : (
Object.entries(configs).map(([key, value]) => (
<div
key={key}
className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded"
>
<div className="break-all">
<span className="font-medium">{key}:</span>{' '}
<span className="text-gray-600 dark:text-gray-300">
{typeof value === 'object'
? JSON.stringify(value, null, 2)
: String(value)}
</span>
</div>
<Button
variant="destructive"
onClick={() => handleRemoveConfig(key)}
size="sm"
className="ml-4 shrink-0"
disabled={loading}
>
{loading ? '...' : 'Remove'}
</Button>
</div>
))
)}
</div>
</Card>
</div>
</div>
</div>
</div>
);
}

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

@@ -3,8 +3,6 @@ import { useModel } from './settings/models/ModelContext';
import { useRecentModels } from './settings/models/RecentModels'; // Hook for recent models
import { Sliders } from 'lucide-react';
import { ModelRadioList } from './settings/models/ModelRadioList';
// Remove react-router-dom usage
// import { useNavigate } from 'react-router-dom';
import { Document, ChevronUp, ChevronDown } from './icons';
import type { View } from '../ChatWindow';
@@ -13,7 +11,7 @@ export default function BottomMenu({
setView,
}: {
hasMessages: boolean;
setView?: (view: View) => void;
setView: (view: View) => void;
}) {
const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
const { currentModel } = useModel();
@@ -133,8 +131,7 @@ export default function BottomMenu({
border-t border-borderSubtle mt-2"
onClick={() => {
setIsModelMenuOpen(false);
// Instead of navigate('/settings'), call setView('settings').
setView?.('settings');
setView('settings');
}}
>
<span className="text-sm">Tools and Settings</span>

11
ui/desktop/src/components/MoreMenu.tsx
View File

@@ -1,12 +1,6 @@
import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';
import React, { useEffect, useState } from 'react';
import { FaMoon, FaSun } from 'react-icons/fa';
import VertDots from './ui/VertDots';
// Removed react-router-dom import
// import { useNavigate } from 'react-router-dom';
import { More } from './icons';
import { Settings, Grid, MessageSquare } from 'lucide-react';
import { Button } from './ui/button';
import type { View } from '../../ChatWindow';
interface VersionInfo {
@@ -15,7 +9,7 @@ interface VersionInfo {
}
// Accept setView as a prop from the parent (e.g. ChatContent)
export default function MoreMenu({ setView }: { setView?: (view: View) => void }) {
export default function MoreMenu({ setView }: { setView: (view: View) => void }) {
const [open, setOpen] = useState(false);
const [versions, setVersions] = useState<VersionInfo | null>(null);
const [showVersions, setShowVersions] = useState(false);
@@ -231,8 +225,7 @@ export default function MoreMenu({ setView }: { setView?: (view: View) => void }
<button
onClick={() => {
setOpen(false);
// Instead of navigate('/settings'), call setView to switch.
setView?.('settings');
setView('settings');
}}
className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors"
>

162
ui/desktop/src/components/pages/ConfigPage.tsx
View File

@@ -1,162 +0,0 @@
import React, { useEffect, useState } from 'react';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Card } from '../ui/card';
import { useNavigate } from 'react-router-dom';
import BackButton from '../ui/BackButton';
import { useConfig } from '../../hooks/useConfig';
import type { View } from '@/src/ChatWindow';
interface ConfigItem {
key: string;
value: any;
}
export function ConfigPage({
onClose,
setView,
}: {
onClose: () => void;
setView?: (view: View) => void;
}) {
const [configs, setConfigs] = useState<Record<string, any>>({});
const [newKey, setNewKey] = useState('');
const [newValue, setNewValue] = useState('');
const navigate = useNavigate();
const { loading, error, loadConfigs, addConfig, removeConfig } = useConfig();
// Fetch all configs on component mount
useEffect(() => {
const fetchConfigs = async () => {
const result = await loadConfigs();
setConfigs(result);
};
fetchConfigs();
}, [loadConfigs]);
const handleAddConfig = async () => {
if (!newKey || !newValue) {
return;
}
let parsedValue = newValue;
// Try to parse as JSON if it looks like JSON
if (newValue.trim().startsWith('{') || newValue.trim().startsWith('[')) {
try {
parsedValue = JSON.parse(newValue);
} catch (e) {
// If parsing fails, use the original string value
console.log('Value is not valid JSON, using as string');
}
}
const success = await addConfig(newKey, parsedValue);
if (success) {
setNewKey('');
setNewValue('');
const updatedConfigs = await loadConfigs();
setConfigs(updatedConfigs);
}
};
const handleRemoveConfig = async (key: string) => {
const success = await removeConfig(key);
if (success) {
const updatedConfigs = await loadConfigs();
setConfigs(updatedConfigs);
}
};
return (
<div className="h-screen w-full">
<div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
<div className="flex flex-col pb-24">
<div className="px-8 pt-6 pb-4">
<BackButton onClick={() => navigate('/settings')} />
<h1 className="text-3xl font-medium text-textStandard mt-1">Configuration</h1>
</div>
<div className="flex-1 py-8 pt-[20px] px-8">
<div className="space-y-8 max-w-2xl">
{/* Add new config form */}
<Card className="p-6">
<h2 className="text-xl font-semibold mb-4">Add New Configuration</h2>
<div className="grid gap-4">
<div>
<Label htmlFor="configKey">Key</Label>
<Input
id="configKey"
value={newKey}
onChange={(e) => setNewKey(e.target.value)}
placeholder="Enter config key"
className="mt-1"
/>
</div>
<div>
<Label htmlFor="configValue">Value</Label>
<Input
id="configValue"
value={newValue}
onChange={(e) => setNewValue(e.target.value)}
placeholder="Enter config value (string or JSON)"
className="mt-1"
/>
</div>
<Button onClick={handleAddConfig} disabled={loading}>
{loading ? 'Adding...' : 'Add Configuration'}
</Button>
</div>
</Card>
{/* Error display */}
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{error.message}
</div>
)}
{/* Config list */}
<Card className="p-6">
<h2 className="text-xl font-semibold mb-4">Current Configurations</h2>
<div className="grid gap-4">
{loading ? (
<div className="text-center text-gray-500">Loading configurations...</div>
) : Object.keys(configs).length === 0 ? (
<div className="text-center text-gray-500">No configurations found</div>
) : (
Object.entries(configs).map(([key, value]) => (
<div
key={key}
className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded"
>
<div className="break-all">
<span className="font-medium">{key}:</span>{' '}
<span className="text-gray-600 dark:text-gray-300">
{typeof value === 'object'
? JSON.stringify(value, null, 2)
: String(value)}
</span>
</div>
<Button
variant="destructive"
onClick={() => handleRemoveConfig(key)}
size="sm"
className="ml-4 shrink-0"
disabled={loading}
>
{loading ? '...' : 'Remove'}
</Button>
</div>
))
)}
</div>
</Card>
</div>
</div>
</div>
</div>
);
}

32
ui/desktop/src/components/settings/Settings.tsx
View File

@@ -56,7 +56,6 @@ export default function Settings({
onClose: () => void;
setView: (view: View) => void;
}) {
// We'll read query params from window.location instead of react-router's useLocation
const [searchParams] = useState(() => new URLSearchParams(window.location.search));
const [settings, setSettings] = React.useState<SettingsType>(() => {
@@ -181,8 +180,6 @@ export default function Settings({
return BUILT_IN_EXTENSIONS.some((builtIn) => builtIn.id === extensionId);
};
function navigate(s: string) {}
return (
<div className="h-screen w-full">
<div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
@@ -190,12 +187,7 @@ export default function Settings({
<ScrollArea className="h-full w-full">
<div className="flex flex-col pb-24">
<div className="px-8 pt-6 pb-4">
<BackButton
onClick={() => {
// Instead of navigate('/chat/1', { replace: true });
onClose();
}}
/>
<BackButton onClick={() => onClose()} />
<h1 className="text-3xl font-medium text-textStandard mt-1">Settings</h1>
</div>
@@ -207,7 +199,6 @@ export default function Settings({
<h2 className="text-xl font-medium text-textStandard">Models</h2>
<button
onClick={() => {
// Instead of navigate('/settings/more-models'):
setView('moreModels');
}}
className="text-indigo-500 hover:text-indigo-600 text-sm"
@@ -261,27 +252,6 @@ export default function Settings({
)}
</div>
</section>
<section id="configuration">
<div className="flex justify-between items-center mb-6 border-b border-borderSubtle px-8">
<h2 className="text-xl font-semibold text-textStandard">Configuration</h2>
<div className="flex gap-4">
<button
onClick={() => navigate('/settings/config')}
className="text-indigo-500 hover:text-indigo-600 text-sm"
>
Manage
</button>
</div>
</div>
<div className="px-8">
<p className="text-sm text-textStandard mb-4">
Manage application configuration and settings. You can view, add, edit, and
remove configuration values.
</p>
</div>
</section>
</div>
</div>
</div>

3
ui/desktop/src/components/settings/models/MoreModels.tsx
View File

@@ -1,13 +1,10 @@
import React from 'react';
import { Button } from '../../ui/button';
import { RecentModels } from './RecentModels';
import { ProviderButtons } from './ProviderButtons';
import BackButton from '../../ui/BackButton';
import { SearchBar } from './Search';
import { useModel } from './ModelContext';
import { AddModelInline } from './AddModelInline';
// Removed react-router-dom usage
// import { useNavigate } from 'react-router-dom';
import { ScrollArea } from '../../ui/scroll-area';
import type { View } from '../../../ChatWindow';

3
ui/desktop/src/components/welcome_screen/ProviderGrid.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { Button } from '../ui/button';
import {
supported_providers,
required_keys,
@@ -15,7 +14,6 @@ import { initializeSystem } from '../../utils/providerUtils';
import { getApiUrl, getSecretKey } from '../../config';
import { toast } from 'react-toastify';
import { getActiveProviders, isSecretKey } from '../settings/api_keys/utils';
import { useNavigate } from 'react-router-dom';
import { BaseProviderGrid, getProviderDescription } from '../settings/providers/BaseProviderGrid';
interface ProviderGridProps {
@@ -28,7 +26,6 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
const [showSetupModal, setShowSetupModal] = React.useState(false);
const { switchModel } = useModel();
const { addRecentModel } = useRecentModels();
const navigate = useNavigate();
const providers = React.useMemo(() => {
return supported_providers.map((providerName) => {

3
ui/desktop/src/extensions.tsx
View File

@@ -1,5 +1,4 @@
import { getApiUrl, getSecretKey } from './config';
import { NavigateFunction } from 'react-router-dom';
import { toast } from 'react-toastify';
// ExtensionConfig type matching the Rust version
@@ -258,7 +257,7 @@ function handleError(message: string, shouldThrow = false): void {
}
}
export async function addExtensionFromDeepLink(url: string, navigate: NavigateFunction) {
export async function addExtensionFromDeepLink(url: string, navigate: any) {
if (!url.startsWith('goose://extension')) {
handleError(
'Failed to install extension: Invalid URL: URL must use the goose://extension scheme'

5
ui/desktop/src/renderer.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import App from './App';
// Error Boundary Component
@@ -72,9 +71,7 @@ window.addEventListener('error', (event) => {
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ErrorBoundary>
<Router>
<App />
</Router>
<App />
</ErrorBoundary>
</React.StrictMode>
);