Skip to content

Commit 848a913

Browse files
sabaimransabaimran
committed
Move the create agent button to the bottom of the sidebar and fix experience when resetting settings
1 parent d0d30ac commit 848a913

File tree

2 files changed

+151
-135
lines changed

2 files changed

+151
-135
lines changed

‎src/interface/web/app/common/modelSelector.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,15 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
6767
const model = models.find(model => model.name === props.selectedModel);
6868
setSelectedModel(model);
6969
}
70+
else if (props.selectedModel === null && userConfig) {
71+
const selectedChatModelOption = userConfig.chat_model_options.find(model => model.id === userConfig.selected_chat_model_config);
72+
if (!selectedChatModelOption) {
73+
props.onSelect(userConfig.chat_model_options[0], false);
74+
return;
75+
} else {
76+
props.onSelect(selectedChatModelOption, false);
77+
}
78+
}
7079
}, [props.selectedModel, models]);
7180

7281
useEffect(() => {

‎src/interface/web/app/components/chatSidebar/chatSidebar.tsx

+142-135
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ function AgentCreationForm(props: IAgentCreationProps) {
145145
<Dialog>
146146
<DialogTrigger asChild>
147147
<Button
148-
className="p-1"
149-
variant="ghost"
148+
className="w-full"
149+
variant="secondary"
150150
>
151151
Create Agent
152152
</Button>
@@ -166,131 +166,131 @@ function AgentCreationForm(props: IAgentCreationProps) {
166166
}
167167
<DialogClose />
168168
</DialogHeader>
169-
<div className="py-4">
170-
{
171-
doneCreating && createdSlug ? (
172-
<div className="flex flex-col items-center justify-center gap-4 py-8">
173-
<motion.div
174-
initial={{ scale: 0 }}
175-
animate={{ scale: 1 }}
176-
transition={{
177-
type: "spring",
178-
stiffness: 260,
179-
damping: 20
180-
}}
181-
>
182-
<CheckCircle
183-
className="w-16 h-16 text-green-500"
184-
weight="fill"
185-
/>
186-
</motion.div>
187-
<motion.p
188-
initial={{ opacity: 0, y: 10 }}
189-
animate={{ opacity: 1, y: 0 }}
190-
transition={{ delay: 0.2 }}
191-
className="text-center text-lg font-medium text-accent-foreground"
192-
>
193-
Created successfully!
194-
</motion.p>
195-
<motion.div
196-
initial={{ opacity: 0, y: 10 }}
197-
animate={{ opacity: 1, y: 0 }}
198-
transition={{ delay: 0.4 }}
199-
>
200-
<Link href={`/agents?agent=${createdSlug}`}>
201-
<Button variant="secondary" className="mt-2">
202-
Manage Agent
203-
</Button>
204-
</Link>
205-
</motion.div>
206-
</div>
207-
) :
208-
<div className="flex flex-col gap-4">
209-
<div>
210-
<Label htmlFor="agent_name">Name</Label>
211-
<Input
212-
id="agent_name"
213-
className="w-full p-2 border mt-4 border-slate-500 rounded-lg"
214-
disabled={isCreating}
215-
value={customAgentName}
216-
onChange={(e) => setCustomAgentName(e.target.value)}
217-
/>
169+
<div className="py-4">
170+
{
171+
doneCreating && createdSlug ? (
172+
<div className="flex flex-col items-center justify-center gap-4 py-8">
173+
<motion.div
174+
initial={{ scale: 0 }}
175+
animate={{ scale: 1 }}
176+
transition={{
177+
type: "spring",
178+
stiffness: 260,
179+
damping: 20
180+
}}
181+
>
182+
<CheckCircle
183+
className="w-16 h-16 text-green-500"
184+
weight="fill"
185+
/>
186+
</motion.div>
187+
<motion.p
188+
initial={{ opacity: 0, y: 10 }}
189+
animate={{ opacity: 1, y: 0 }}
190+
transition={{ delay: 0.2 }}
191+
className="text-center text-lg font-medium text-accent-foreground"
192+
>
193+
Created successfully!
194+
</motion.p>
195+
<motion.div
196+
initial={{ opacity: 0, y: 10 }}
197+
animate={{ opacity: 1, y: 0 }}
198+
transition={{ delay: 0.4 }}
199+
>
200+
<Link href={`/agents?agent=${createdSlug}`}>
201+
<Button variant="secondary" className="mt-2">
202+
Manage Agent
203+
</Button>
204+
</Link>
205+
</motion.div>
218206
</div>
219-
<div className="flex gap-4">
220-
<div className="flex-1">
221-
<Select onValueChange={setCustomAgentColor} defaultValue={customAgentColor}>
222-
<SelectTrigger className="w-full dark:bg-muted" disabled={isCreating}>
223-
<SelectValue placeholder="Color" />
224-
</SelectTrigger>
225-
<SelectContent className="items-center space-y-1 inline-flex flex-col">
226-
{colorOptions.map((colorOption) => (
227-
<SelectItem key={colorOption} value={colorOption}>
228-
<div className="flex items-center space-x-2">
229-
<Circle
230-
className={`w-6 h-6 mr-2 ${convertColorToTextClass(colorOption)}`}
231-
weight="fill"
232-
/>
233-
{colorOption}
234-
</div>
235-
</SelectItem>
236-
))}
237-
</SelectContent>
238-
</Select>
207+
) :
208+
<div className="flex flex-col gap-4">
209+
<div>
210+
<Label htmlFor="agent_name">Name</Label>
211+
<Input
212+
id="agent_name"
213+
className="w-full p-2 border mt-4 border-slate-500 rounded-lg"
214+
disabled={isCreating}
215+
value={customAgentName}
216+
onChange={(e) => setCustomAgentName(e.target.value)}
217+
/>
239218
</div>
240-
<div className="flex-1">
241-
<Select onValueChange={setCustomAgentIcon} defaultValue={customAgentIcon}>
242-
<SelectTrigger className="w-full dark:bg-muted" disabled={isCreating}>
243-
<SelectValue placeholder="Icon" />
244-
</SelectTrigger>
245-
<SelectContent className="items-center space-y-1 inline-flex flex-col">
246-
{iconOptions.map((iconOption) => (
247-
<SelectItem key={iconOption} value={iconOption}>
248-
<div className="flex items-center space-x-2">
249-
{getIconFromIconName(
250-
iconOption,
251-
customAgentColor ?? "gray",
252-
"w-6",
253-
"h-6",
254-
)}
255-
{iconOption}
256-
</div>
257-
</SelectItem>
258-
))}
259-
</SelectContent>
260-
</Select>
219+
<div className="flex gap-4">
220+
<div className="flex-1">
221+
<Select onValueChange={setCustomAgentColor} defaultValue={customAgentColor}>
222+
<SelectTrigger className="w-full dark:bg-muted" disabled={isCreating}>
223+
<SelectValue placeholder="Color" />
224+
</SelectTrigger>
225+
<SelectContent className="items-center space-y-1 inline-flex flex-col">
226+
{colorOptions.map((colorOption) => (
227+
<SelectItem key={colorOption} value={colorOption}>
228+
<div className="flex items-center space-x-2">
229+
<Circle
230+
className={`w-6 h-6 mr-2 ${convertColorToTextClass(colorOption)}`}
231+
weight="fill"
232+
/>
233+
{colorOption}
234+
</div>
235+
</SelectItem>
236+
))}
237+
</SelectContent>
238+
</Select>
239+
</div>
240+
<div className="flex-1">
241+
<Select onValueChange={setCustomAgentIcon} defaultValue={customAgentIcon}>
242+
<SelectTrigger className="w-full dark:bg-muted" disabled={isCreating}>
243+
<SelectValue placeholder="Icon" />
244+
</SelectTrigger>
245+
<SelectContent className="items-center space-y-1 inline-flex flex-col">
246+
{iconOptions.map((iconOption) => (
247+
<SelectItem key={iconOption} value={iconOption}>
248+
<div className="flex items-center space-x-2">
249+
{getIconFromIconName(
250+
iconOption,
251+
customAgentColor ?? "gray",
252+
"w-6",
253+
"h-6",
254+
)}
255+
{iconOption}
256+
</div>
257+
</SelectItem>
258+
))}
259+
</SelectContent>
260+
</Select>
261+
</div>
261262
</div>
262263
</div>
263-
</div>
264-
}
265-
</div>
266-
<DialogFooter>
267-
{
268-
error && (
269-
<div className="text-red-500 text-sm">
270-
{error}
271-
</div>
272-
)
273-
}
274-
{
275-
!doneCreating && (
276-
<Button
277-
type="submit"
278-
onClick={() => createAgent()}
279-
disabled={isCreating || !isValid}
280-
>
281-
{
282-
isCreating ?
283-
<CircleNotch className="animate-spin" />
284-
:
285-
<PersonSimpleTaiChi />
286-
}
287-
Create
288-
</Button>
289-
)
290-
}
291-
<DialogClose />
292-
</DialogFooter>
293-
</DialogContent>
264+
}
265+
</div>
266+
<DialogFooter>
267+
{
268+
error && (
269+
<div className="text-red-500 text-sm">
270+
{error}
271+
</div>
272+
)
273+
}
274+
{
275+
!doneCreating && (
276+
<Button
277+
type="submit"
278+
onClick={() => createAgent()}
279+
disabled={isCreating || !isValid}
280+
>
281+
{
282+
isCreating ?
283+
<CircleNotch className="animate-spin" />
284+
:
285+
<PersonSimpleTaiChi />
286+
}
287+
Create
288+
</Button>
289+
)
290+
}
291+
<DialogClose />
292+
</DialogFooter>
293+
</DialogContent>
294294
</Dialog >
295295

296296
)
@@ -317,6 +317,8 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
317317

318318
const [isSaving, setIsSaving] = useState<boolean>(false);
319319

320+
const isSubscribed = authenticatedData?.is_active ?? false;
321+
320322
function setupAgentData() {
321323
if (agentData) {
322324
setInputTools(agentData.input_tools);
@@ -456,16 +458,6 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
456458
<p>
457459
Chat Options
458460
</p>
459-
{
460-
isEditable && customPrompt && !isDefaultAgent && selectedModel && (
461-
<AgentCreationForm
462-
customPrompt={customPrompt}
463-
selectedModel={selectedModel}
464-
inputTools={inputTools ?? []}
465-
outputModes={outputModes ?? []}
466-
/>
467-
)
468-
}
469461
</div>
470462
)
471463
}
@@ -508,7 +500,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
508500
<SidebarGroupLabel>
509501
Model
510502
{
511-
!authenticatedData?.is_active && (
503+
!isSubscribed && (
512504
<a href="/settings" className="hover:font-bold text-accent-foreground m-2 bg-accent bg-opacity-10 p-1 rounded-lg">
513505
Upgrade
514506
</a>
@@ -518,7 +510,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
518510
<SidebarMenu className="p-0 m-0">
519511
<SidebarMenuItem key={"model"} className="list-none">
520512
<ModelSelector
521-
disabled={!isEditable || !authenticatedData?.is_active}
513+
disabled={!isEditable || !isSubscribed}
522514
onSelect={(model, userModification) => handleModelSelect(model.name, userModification)}
523515
initialModel={isDefaultAgent ? undefined : agentData?.chat_model}
524516
selectedModel={selectedModel}
@@ -647,6 +639,20 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
647639
</SidebarMenuItem>
648640
) :
649641
<>
642+
{
643+
!hasModified && isEditable && customPrompt && !isDefaultAgent && selectedModel && (
644+
<SidebarMenuItem>
645+
<SidebarMenuButton asChild>
646+
<AgentCreationForm
647+
customPrompt={customPrompt}
648+
selectedModel={selectedModel}
649+
inputTools={inputTools ?? []}
650+
outputModes={outputModes ?? []}
651+
/>
652+
</SidebarMenuButton>
653+
</SidebarMenuItem>
654+
)
655+
}
650656
<SidebarMenuItem>
651657
<SidebarMenuButton asChild>
652658
<Button
@@ -679,6 +685,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
679685
</Button>
680686
</SidebarMenuButton>
681687
</SidebarMenuItem>
688+
682689
</>
683690
}
684691
</SidebarMenu>

0 commit comments

Comments
 (0)