mirror of
https://github.com/block/goose.git
synced 2026-07-17 12:56:20 +02:00
feat: make settings pages visible (#690)
This commit is contained in:
lily-de
@@ -64,70 +64,68 @@ export default function BottomMenu({ hasMessages }) {
|
||||
</span>
|
||||
|
||||
{/* Model Selector Dropdown - Only in development */}
|
||||
{process.env.NODE_ENV === "development" && (
|
||||
<div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>
|
||||
<div
|
||||
className="flex items-center cursor-pointer"
|
||||
onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
|
||||
>
|
||||
<span>{currentModel?.name || "Select Model"}</span>
|
||||
{isModelMenuOpen ? (
|
||||
<ChevronUp className="w-4 h-4 ml-1" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 ml-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isModelMenuOpen && (
|
||||
<div className="absolute bottom-[30px] right-0 w-[300px] bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg">
|
||||
<div className="p-2">
|
||||
<ModelRadioList
|
||||
className="divide-y divide-gray-100 dark:divide-gray-700"
|
||||
renderItem={({ model, isSelected, onSelect }) => (
|
||||
<label key={model.name} className="block cursor-pointer">
|
||||
<div className="flex items-center justify-between p-3 transition-colors
|
||||
hover:text-gray-900 dark:hover:text-white"
|
||||
onClick={onSelect}>
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{model.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{model.provider}</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="radio"
|
||||
name="recentModels"
|
||||
value={model.name}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<div className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
|
||||
peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
|
||||
peer-checked:bg-white dark:peer-checked:bg-black
|
||||
transition-all duration-200 ease-in-out">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
|
||||
border-t-2 border-gray-200 dark:border-gray-600"
|
||||
onClick={() => {
|
||||
setIsModelMenuOpen(false);
|
||||
navigate("/settings");
|
||||
}}
|
||||
>
|
||||
<span className="text-sm">Tools and Settings</span>
|
||||
<Sliders className="w-5 h-5 ml-2 rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>
|
||||
<div
|
||||
className="flex items-center cursor-pointer"
|
||||
onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
|
||||
>
|
||||
<span>{currentModel?.name || "Select Model"}</span>
|
||||
{isModelMenuOpen ? (
|
||||
<ChevronUp className="w-4 h-4 ml-1" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 ml-1" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isModelMenuOpen && (
|
||||
<div className="absolute bottom-[30px] right-0 w-[300px] bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg">
|
||||
<div className="p-2">
|
||||
<ModelRadioList
|
||||
className="divide-y divide-gray-100 dark:divide-gray-700"
|
||||
renderItem={({ model, isSelected, onSelect }) => (
|
||||
<label key={model.name} className="block cursor-pointer">
|
||||
<div className="flex items-center justify-between p-3 transition-colors
|
||||
hover:text-gray-900 dark:hover:text-white"
|
||||
onClick={onSelect}>
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{model.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{model.provider}</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="radio"
|
||||
name="recentModels"
|
||||
value={model.name}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<div className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
|
||||
peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
|
||||
peer-checked:bg-white dark:peer-checked:bg-black
|
||||
transition-all duration-200 ease-in-out">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
|
||||
border-t-2 border-gray-200 dark:border-gray-600"
|
||||
onClick={() => {
|
||||
setIsModelMenuOpen(false);
|
||||
navigate("/settings");
|
||||
}}
|
||||
>
|
||||
<span className="text-sm">Tools and Settings</span>
|
||||
<Sliders className="w-5 h-5 ml-2 rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -206,17 +206,16 @@ export default function MoreMenu() {
|
||||
)}
|
||||
|
||||
{/* Settings Menu */}
|
||||
{process.env.NODE_ENV === "development" && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
navigate("/settings");
|
||||
}}
|
||||
className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700"
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
navigate("/settings");
|
||||
}}
|
||||
className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700"
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
|
||||
Reference in New Issue
Block a user