Skip to content

Commit

Permalink
Add goose versions to the UI (#526)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zakiali
zakiali authored Jan 10, 2025
1 parent 9210de0 commit f8643cb
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 81 deletions.
2 changes: 1 addition & 1 deletion ui/desktop/src/LauncherWindow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useRef } from 'react';
import React, { useRef, useState } from 'react';

declare global {
interface Window {
Expand Down
2 changes: 1 addition & 1 deletion ui/desktop/src/components/BottomMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ export default function BottomMenu({hasMessages}) {
</span>
</div>
);
}
}
168 changes: 121 additions & 47 deletions ui/desktop/src/components/MoreMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
import React, {useState, useEffect} from 'react';
import {Popover, PopoverContent, PopoverTrigger} from './ui/popover';
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';
import {FaSun, FaMoon} from 'react-icons/fa';

interface VersionInfo {
current_version: string;
available_versions: string[];
}

export default function MoreMenu() {
const [open, setOpen] = useState(false);
const [versions, setVersions] = useState<VersionInfo | null>(null);
const [showVersions, setShowVersions] = useState(false);

const [useSystemTheme, setUseSystemTheme] = useState(() =>
localStorage.getItem('use_system_theme') === 'true'
Expand All @@ -20,6 +31,27 @@ export default function MoreMenu() {
return savedTheme ? savedTheme === 'dark' : systemPrefersDark;
});

useEffect(() => {
// Fetch available versions when the menu opens
const fetchVersions = async () => {
try {
const port = window.appConfig.get("GOOSE_SERVER__PORT");
const response = await fetch(`http://127.0.0.1:${port}/api/agent/versions`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setVersions(data);
} catch (error) {
console.error('Failed to fetch versions:', error);
}
};

if (open) {
fetchVersions();
}
}, [open]);

useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

Expand Down Expand Up @@ -76,6 +108,13 @@ export default function MoreMenu() {
// If disabling system theme, keep current theme state but don't update localStorage yet
};

const handleVersionSelect = (version: string) => {
setOpen(false);
setShowVersions(false);
// Create a new chat window with the selected version
window.electron.createChatWindow(undefined, undefined, version);
};

return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
Expand All @@ -84,52 +123,87 @@ export default function MoreMenu() {
<VertDots size={18}/>
</button>
</PopoverTrigger>
<PopoverContent className="w-48 rounded-md">
<div className="flex flex-col bg-black text-white dark:bg-gray-800 rounded-md">
<div className="flex items-center justify-between p-2">
<span className="text-sm">Use System Theme</span>
<input
type="checkbox"
checked={useSystemTheme}
onChange={toggleUseSystemTheme}
/>
</div>
{!useSystemTheme && (<div className="flex items-center justify-between p-2">
<span className="text-sm">{isDarkMode ? 'Dark Mode' : 'Light Mode'}</span>
<PopoverPortal>
<PopoverContent
className="z-[200] w-48 rounded-md bg-black text-white dark:bg-gray-800 shadow-lg"
align="end"
sideOffset={5}
>
<div className="flex flex-col rounded-md">
<div className="flex items-center justify-between p-2">
<span className="text-sm">Use System Theme</span>
<input
type="checkbox"
checked={useSystemTheme}
onChange={toggleUseSystemTheme}
/>
</div>
{!useSystemTheme && (<div className="flex items-center justify-between p-2">
<span className="text-sm">{isDarkMode ? 'Dark Mode' : 'Light Mode'}</span>
<button
className={`relative inline-flex items-center h-6 rounded-full w-11 focus:outline-none border-2 ${isDarkMode
? 'bg-gray-600 border-gray-600'
: 'bg-yellow-300 border-yellow-300'}`}
onClick={() => toggleTheme()}>
<span
className={`inline-block w-4 h-4 transform bg-white rounded-full transition-transform ${isDarkMode
? 'translate-x-6' : 'translate-x-1'}`}
>
{isDarkMode ? <FaMoon className="text-gray-200"/> : <FaSun
className="text-yellow-500"/>}
</span>
</button>
</div>)}

{/* Versions Menu */}
{versions && versions.available_versions.length > 0 && (
<>
<button
onClick={() => setShowVersions(!showVersions)}
className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700 flex justify-between items-center"
>
<span>Versions</span>
<span className="text-xs">{showVersions ? '▼' : '▶'}</span>
</button>
{showVersions && (
<div className="pl-2 bg-gray-900">
{versions.available_versions.map((version) => (
<button
key={version}
onClick={() => handleVersionSelect(version)}
className={`w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700 ${
version === versions.current_version ? 'text-green-400' : ''
}`}
>
{version} {version === versions.current_version && '(current)'}
</button>
))}
</div>
)}
</>
)}

<button
className={`relative inline-flex items-center h-6 rounded-full w-11 focus:outline-none border-2 ${isDarkMode
? 'bg-gray-600 border-gray-600'
: 'bg-yellow-300 border-yellow-300'}`}
onClick={() => toggleTheme()}>
<span
className={`inline-block w-4 h-4 transform bg-white rounded-full transition-transform ${isDarkMode
? 'translate-x-6' : 'translate-x-1'}`}
>
{isDarkMode ? <FaMoon className="text-gray-200"/> : <FaSun
className="text-yellow-500"/>}
</span>
onClick={() => {
setOpen(false);
window.electron.directoryChooser();
}}
className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700"
>
Open Directory (cmd+O)
</button>
</div>)}
<button
onClick={() => {
setOpen(false);
window.electron.directoryChooser();
}}
className="w-full text-left px-2 py-1.5 text-sm"
>
Open Directory (cmd+O)
</button>
<button
onClick={() => {
setOpen(false);
window.electron.createChatWindow();
}}
className="w-full text-left px-2 py-1.5 text-sm"
>
New Session (cmd+N)
</button>
</div>
</PopoverContent>
<button
onClick={() => {
setOpen(false);
window.electron.createChatWindow();
}}
className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700"
>
New Session (cmd+N)
</button>
</div>
</PopoverContent>
</PopoverPortal>
</Popover>
);
}
50 changes: 33 additions & 17 deletions ui/desktop/src/goosed.ts
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
import path from 'node:path';
import { execSync, spawn } from 'child_process';
import { spawn } from 'child_process';
import { createServer } from 'net';
import os from 'node:os';
import { getBinaryPath } from './utils/binaryPath';
import { existsSync } from 'fs';
import log from './utils/logger';
import os from 'node:os';
import { createServer } from 'net';
import { loadZshEnv } from './utils/loadEnv';


// Find an available port to start goosed on
export const findAvailablePort = (): Promise<number> => {
return new Promise((resolve, reject) => {
const server = createServer();


server.listen(0, '127.0.0.1', () => {
const { port } = server.address() as { port: number };
server.close(() => {
Expand All @@ -24,9 +19,24 @@ export const findAvailablePort = (): Promise<number> => {
});
};

// Function to fetch agent version from the server
const fetchAgentVersion = async (port: number): Promise<string> => {
try {
const response = await fetch(`http://127.0.0.1:${port}/api/agent/versions`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.current_version;
} catch (error) {
log.error('Failed to fetch agent version:', error);
return 'unknown';
}
};

// Goose process manager. Take in the app, port, and directory to start goosed in.
// Check if goosed server is ready by polling the status endpoint
const checkServerStatus = async (port: number, maxAttempts: number = 30, interval: number = 100): Promise<boolean> => {
const checkServerStatus = async (port: number, maxAttempts: number = 60, interval: number = 100): Promise<boolean> => {
const statusUrl = `http://127.0.0.1:${port}/status`;
log.info(`Checking server status at ${statusUrl}`);

Expand All @@ -48,7 +58,7 @@ const checkServerStatus = async (port: number, maxAttempts: number = 30, interva
return false;
};

export const startGoosed = async (app, dir=null): Promise<[number, string]> => {
export const startGoosed = async (app, dir=null, env={}): Promise<[number, string, string]> => {
// In will use this later to determine if we should start process
const isDev = process.env.NODE_ENV === 'development';

Expand All @@ -61,7 +71,7 @@ export const startGoosed = async (app, dir=null): Promise<[number, string]> => {
// Skip starting goosed if configured in dev mode
if (isDev && !app.isPackaged && process.env.VITE_START_EMBEDDED_SERVER === 'no') {
log.info('Skipping starting goosed in development mode');
return [3000, dir];
return [3000, dir, 'dev'];
}

// Get the goosed binary path using the shared utility
Expand All @@ -83,13 +93,16 @@ export const startGoosed = async (app, dir=null): Promise<[number, string]> => {
GOOSE_SERVER__PORT: String(port),

GOOSE_SERVER__SECRET_KEY: process.env.GOOSE_SERVER__SECRET_KEY,

// Add any additional environment variables passed in
...env
};

// Merge parent environment with additional environment variables
const env = { ...process.env, ...additionalEnv };
const processEnv = { ...process.env, ...additionalEnv };

// Spawn the goosed process with the user's home directory as cwd
const goosedProcess = spawn(goosedPath, ["agent"], { cwd: dir, env: env, stdio: ["ignore", "pipe", "pipe"] });
const goosedProcess = spawn(goosedPath, ["agent"], { cwd: dir, env: processEnv, stdio: ["ignore", "pipe", "pipe"] });

goosedProcess.stdout.on('data', (data) => {
log.info(`goosed stdout for port ${port} and dir ${dir}: ${data.toString()}`);
Expand All @@ -110,6 +123,7 @@ export const startGoosed = async (app, dir=null): Promise<[number, string]> => {

// Wait for the server to be ready
const isReady = await checkServerStatus(port);
log.info(`Goosed isReady ${isReady}`);
if (!isReady) {
log.error(`Goosed server failed to start on port ${port}`);
goosedProcess.kill();
Expand All @@ -123,8 +137,10 @@ export const startGoosed = async (app, dir=null): Promise<[number, string]> => {
goosedProcess.kill();
});

log.info(`Goosed server successfully started on port ${port}`);
return [port, dir];
};

// Wait for the server to start and fetch the agent version
await new Promise(resolve => setTimeout(resolve, 1000)); // Give the server time to start
const agentVersion = await fetchAgentVersion(port);

log.info(`Goosed server successfully started on port ${port}`);
return [port, dir, agentVersion];
};
Loading

0 comments on commit f8643cb

Please sign in to comment.