tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore: move things around (#1662)

Browse Source
This commit is contained in:
Lily Delalande
2025-03-14 09:17:30 -07:00
committed by GitHub
parent 3059fc2771
commit 92a9ee2026
11 changed files with 67 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/App.tsx
+13 -10
View File
@@ -38,7 +38,7 @@ export type View =
| 'moreModels'
| 'configureProviders'
| 'configPage'
| 'alphaConfigureProviders'
| 'ConfigureProviders'
| 'settingsV2'
| 'sessions';
@@ -274,13 +274,16 @@ export default function App() {
<div className="relative w-screen h-screen overflow-hidden bg-bgApp flex flex-col">
<div className="titlebar-drag-region" />
<div>
{view === 'welcome' && (
<WelcomeView
onSubmit={() => {
setView('chat');
}}
/>
)}
{view === 'welcome' &&
(process.env.ALPHA ? (
<ProviderSettings onClose={() => setView('chat')} isOnboarding={true} />
) : (
<WelcomeView
onSubmit={() => {
setView('chat');
}}
/>
))}
{view === 'settings' &&
(process.env.ALPHA ? (
<SettingsViewV2
@@ -314,8 +317,8 @@ export default function App() {
}}
/>
)}
{view === 'alphaConfigureProviders' && (
<ProviderSettings onClose={() => setView('chat')} />
{view === 'ConfigureProviders' && (
<ProviderSettings onClose={() => setView('chat')} isOnboarding={false} />
)}
{view === 'chat' && !isLoadingSession && (
<ChatView
ui/desktop/src/components/settings_v2/SettingsView.tsx
+8 -4
View File
@@ -4,8 +4,7 @@ import BackButton from '../ui/BackButton';
import type { View } from '../../App';
import { useConfig } from '../ConfigContext';
import { Button } from '../ui/button';
import { Plus } from 'lucide-react';
import { Gear } from '../icons/Gear';
import { Plus, Sliders } from 'lucide-react';
import ExtensionsSection from './extensions/ExtensionsSection';
interface ModelOption {
@@ -106,8 +105,13 @@ export default function SettingsView({
<Plus className="h-4 w-4" />
Add Model
</Button>
<Button className="flex items-center gap-2 flex-1 justify-center text-textSubtle border-standard bg-grey-60 hover:bg-subtle">
<Gear className="h-4 w-4" />
<Button
className="flex items-center gap-2 flex-1 justify-center text-textSubtle border-standard bg-grey-60 hover:bg-subtle"
onClick={() => {
setView('ConfigureProviders');
}}
>
<Sliders className="h-4 w-4 rotate-90" />
Configure Providers
</Button>
</div>
ui/desktop/src/components/settings_v2/providers/ProviderGrid.tsx
+10 -7
View File
@@ -1,6 +1,5 @@
import React, { memo, useMemo, useCallback } from 'react';
import { ProviderCard } from './subcomponents/ProviderCard';
import OnRefresh from './callbacks/RefreshActiveProviders';
import { ProviderModalProvider, useProviderModal } from './modal/ProviderModalProvider';
import ProviderConfigurationModal from './modal/ProviderConfiguationModal';
import { ProviderDetails } from '../../../api';
@@ -18,10 +17,12 @@ const ProviderCards = memo(function ProviderCards({
providers,
isOnboarding,
refreshProviders,
onProviderLaunch,
}: {
providers: ProviderDetails[];
isOnboarding: boolean;
refreshProviders?: () => void;
onProviderLaunch: (provider: ProviderDetails) => void;
}) {
const { openModal } = useProviderModal();
@@ -41,9 +42,8 @@ const ProviderCards = memo(function ProviderCards({
[openModal, refreshProviders]
);
const handleLaunch = useCallback(() => {
OnRefresh();
}, []);
// We don't need an intermediate function here
// Just pass the onProviderLaunch directly
// Use useMemo to memoize the cards array
const providerCards = useMemo(() => {
@@ -52,11 +52,11 @@ const ProviderCards = memo(function ProviderCards({
key={provider.name}
provider={provider}
onConfigure={() => configureProviderViaModal(provider)}
onLaunch={handleLaunch}
onLaunch={() => onProviderLaunch(provider)}
isOnboarding={isOnboarding}
/>
));
}, [providers, isOnboarding, configureProviderViaModal, handleLaunch]);
}, [providers, isOnboarding, configureProviderViaModal, onProviderLaunch]);
return <>{providerCards}</>;
});
@@ -65,10 +65,12 @@ export default memo(function ProviderGrid({
providers,
isOnboarding,
refreshProviders,
onProviderLaunch,
}: {
providers: ProviderDetails[];
isOnboarding: boolean;
refreshProviders?: () => void;
onProviderLaunch?: (provider: ProviderDetails) => void;
}) {
// Memoize the modal provider and its children to avoid recreating on every render
const modalProviderContent = useMemo(
@@ -78,11 +80,12 @@ export default memo(function ProviderGrid({
providers={providers}
isOnboarding={isOnboarding}
refreshProviders={refreshProviders}
onProviderLaunch={onProviderLaunch}
/>
<ProviderConfigurationModal />
</ProviderModalProvider>
),
[providers, isOnboarding, refreshProviders]
[providers, isOnboarding, refreshProviders, onProviderLaunch]
);
return <GridLayout>{modalProviderContent}</GridLayout>;
ui/desktop/src/components/settings_v2/providers/ProviderSettingsPage.tsx
+36 -5
View File
@@ -5,8 +5,13 @@ import ProviderGrid from './ProviderGrid';
import { useConfig } from '../../ConfigContext';
import { ProviderDetails } from '../../../api/types.gen';
export default function ProviderSettings({ onClose }: { onClose: () => void }) {
const { getProviders } = useConfig();
interface ProviderSettingsProps {
onClose: () => void;
isOnboarding: boolean;
}
export default function ProviderSettings({ onClose, isOnboarding }: ProviderSettingsProps) {
const { getProviders, upsert } = useConfig();
const [loading, setLoading] = useState(true);
const [providers, setProviders] = useState<ProviderDetails[]>([]);
const initialLoadDone = useRef(false);
@@ -43,14 +48,39 @@ export default function ProviderSettings({ onClose }: { onClose: () => void }) {
}
}, [getProviders]);
// Handler for when a provider is launched if this component is used as part of onboarding page
const handleProviderLaunch = useCallback(
(provider: ProviderDetails) => {
console.log(`Launching with provider: ${provider.name}`);
try {
// set GOOSE_PROVIDER in the config file
// @lily-de: leaving as test for now to avoid messing with my config directly
upsert('GOOSE_PROVIDER_TEST', provider.name, false).then((_) =>
console.log('Setting GOOSE_PROVIDER to', provider.name)
);
// set GOOSE_MODEL in the config file
upsert('GOOSE_MODEL_TEST', provider.metadata.default_model, false).then((_) =>
console.log('Setting GOOSE_MODEL to', provider.metadata.default_model)
);
} catch (error) {
console.error(`Failed to initialize with provider ${provider.name}:`, error);
}
onClose();
},
[onClose, upsert]
);
return (
<div className="h-screen w-full">
<div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
<ScrollArea className="h-full w-full">
<div className="px-8 pt-6 pb-4">
<BackButton onClick={onClose} />
<h1 className="text-3xl font-medium text-textStandard mt-1">Configure</h1>
{/* Only show back button if not in onboarding mode */}
{!isOnboarding && <BackButton onClick={onClose} />}
<h1 className="text-3xl font-medium text-textStandard mt-1">
{isOnboarding ? 'Select a Provider' : 'Configure'}
</h1>
</div>
<div className="py-8 pt-[20px]">
@@ -66,7 +96,8 @@ export default function ProviderSettings({ onClose }: { onClose: () => void }) {
) : (
<ProviderGrid
providers={providers}
isOnboarding={false}
isOnboarding={isOnboarding}
onProviderLaunch={handleProviderLaunch}
refreshProviders={refreshProviders}
/>
)}
ui/desktop/src/components/settings_v2/providers/callbacks/AddProviderParameters.tsx
-5
View File
@@ -1,5 +0,0 @@
import { toast } from 'react-toastify';
export default function OnAdd() {
toast.success('adding worked!');
}
ui/desktop/src/components/settings_v2/providers/callbacks/CallbackRegistry.tsx
-45
View File
@@ -1,45 +0,0 @@
// First define the default handlers separately
import OnAdd from './AddProviderParameters';
import OnDelete from './DeleteProviderParameters';
const DEFAULT_HANDLERS = {
onAdd: (providerId: string, config: any) => {
OnAdd();
},
onDelete: (providerId: string) => {
OnDelete();
},
onShowSettings: (providerId: string) => {
/* default settings behavior */
},
};
// Then use them in the registry
export const CALLBACK_REGISTRY = {
default: DEFAULT_HANDLERS,
anthropic: {
onAdd: (providerId: string, config: any) => {
/* Anthropic-specific add */
},
// Fall back to default handlers
onDelete: DEFAULT_HANDLERS.onDelete,
onShowSettings: DEFAULT_HANDLERS.onShowSettings,
},
ollama: {
onAdd: (providerId: string, config: any) => {
/* Ollama-specific add */
},
onDelete: (providerId: string) => {
/* Ollama-specific delete */
},
onRefresh: (providerId: string) => {
/* Ollama-specific refresh */
},
},
} as const;
// Type for the handlers
export type ActionHandler = typeof DEFAULT_HANDLERS;
export type ProviderId = keyof typeof CALLBACK_REGISTRY;
ui/desktop/src/components/settings_v2/providers/callbacks/DeleteProviderParameters.tsx
-5
View File
@@ -1,5 +0,0 @@
import { toast } from 'react-toastify';
export default function OnDelete() {
toast.success('deleting worked!');
}
ui/desktop/src/components/settings_v2/providers/callbacks/RefreshActiveProviders.tsx
-5
View File
@@ -1,5 +0,0 @@
import { toast } from 'react-toastify';
export default function OnRefresh() {
toast.success('refreshing worked!');
}
ui/desktop/src/components/settings_v2/providers/callbacks/ShowModal.tsx
-5
View File
@@ -1,5 +0,0 @@
import { toast } from 'react-toastify';
export default function OnShowModal() {
toast.success('here is the modal yay!');
}
ui/desktop/src/components/settings_v2/providers/callbacks/UpdateProviderParameters.tsx
-5
View File
@@ -1,5 +0,0 @@
import { toast } from 'react-toastify';
export default function OnShowSettings() {
toast.success('settings update worked!');
}
ui/desktop/src/components/settings_v2/providers/subcomponents/buttons/CardButtons.tsx
-16
View File
@@ -94,10 +94,6 @@ export function GreenCheckButton({
);
}
export function ExclamationButton({ tooltip, className, ...props }: ActionButtonProps) {
return <ActionButton icon={CircleHelp} tooltip={tooltip} onClick={() => {}} {...props} />;
}
export function ConfigureSettingsButton({ tooltip, className, ...props }: ActionButtonProps) {
return (
<ActionButton
@@ -111,18 +107,6 @@ export function ConfigureSettingsButton({ tooltip, className, ...props }: Action
);
}
export function AddButton({ tooltip, className, ...props }: ActionButtonProps) {
return <ActionButton icon={Plus} tooltip={tooltip} className={className} {...props} />;
}
export function DeleteButton({ tooltip, className, ...props }: ActionButtonProps) {
return <ActionButton icon={X} tooltip={tooltip} className={className} {...props} />;
}
export function RefreshButton({ tooltip, className, ...props }: ActionButtonProps) {
return <ActionButton icon={RefreshCw} tooltip={tooltip} className={className} {...props} />;
}
export function RocketButton({ tooltip, className, ...props }: ActionButtonProps) {
return (
<ActionButton