Move the create agent button to the bottom of the sidebar and fix experience when resetting settings

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

@@ -67,6 +67,15 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
             const model = models.find(model => model.name === props.selectedModel);
             setSelectedModel(model);
         }
+        else if (props.selectedModel === null && userConfig) {
+            const selectedChatModelOption = userConfig.chat_model_options.find(model => model.id === userConfig.selected_chat_model_config);
+            if (!selectedChatModelOption) {
+                props.onSelect(userConfig.chat_model_options[0], false);
+                return;
+            } else {
+                props.onSelect(selectedChatModelOption, false);
+            }
+        }
     }, [props.selectedModel, models]);
 
     useEffect(() => {

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

@@ -145,8 +145,8 @@ function AgentCreationForm(props: IAgentCreationProps) {
         <Dialog>
             <DialogTrigger asChild>
                 <Button
-                    className="p-1"
+                    className="w-full"
-                    variant="ghost"
+                    variant="secondary"
                 >
                     Create Agent
                 </Button>
@@ -317,6 +317,8 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
 
     const [isSaving, setIsSaving] = useState<boolean>(false);
 
+    const isSubscribed = authenticatedData?.is_active ?? false;
+
     function setupAgentData() {
         if (agentData) {
             setInputTools(agentData.input_tools);
@@ -456,16 +458,6 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                                 <p>
                                     Chat Options
                                 </p>
-                                {
-                                    isEditable && customPrompt && !isDefaultAgent && selectedModel && (
-                                        <AgentCreationForm
-                                            customPrompt={customPrompt}
-                                            selectedModel={selectedModel}
-                                            inputTools={inputTools ?? []}
-                                            outputModes={outputModes ?? []}
-                                        />
-                                    )
-                                }
                             </div>
                         )
                     }
@@ -508,7 +500,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                                 <SidebarGroupLabel>
                                     Model
                                     {
-                                        !authenticatedData?.is_active && (
+                                        !isSubscribed && (
                                             <a href="/settings" className="hover:font-bold text-accent-foreground m-2 bg-accent bg-opacity-10 p-1 rounded-lg">
                                                 Upgrade
                                             </a>
@@ -518,7 +510,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                                 <SidebarMenu className="p-0 m-0">
                                     <SidebarMenuItem key={"model"} className="list-none">
                                         <ModelSelector
-                                            disabled={!isEditable || !authenticatedData?.is_active}
+                                            disabled={!isEditable || !isSubscribed}
                                             onSelect={(model, userModification) => handleModelSelect(model.name, userModification)}
                                             initialModel={isDefaultAgent ? undefined : agentData?.chat_model}
                                             selectedModel={selectedModel}
@@ -647,6 +639,20 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                                     </SidebarMenuItem>
                                 ) :
                                     <>
+                                        {
+                                            !hasModified && isEditable && customPrompt && !isDefaultAgent && selectedModel && (
+                                                <SidebarMenuItem>
+                                                    <SidebarMenuButton asChild>
+                                                        <AgentCreationForm
+                                                            customPrompt={customPrompt}
+                                                            selectedModel={selectedModel}
+                                                            inputTools={inputTools ?? []}
+                                                            outputModes={outputModes ?? []}
+                                                        />
+                                                    </SidebarMenuButton>
+                                                </SidebarMenuItem>
+                                            )
+                                        }
                                         <SidebarMenuItem>
                                             <SidebarMenuButton asChild>
                                                 <Button
@@ -679,6 +685,7 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                                                 </Button>
                                             </SidebarMenuButton>
                                         </SidebarMenuItem>
+
                                     </>
                             }
                         </SidebarMenu>