xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-27 16:04:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: enhance layout and styling of ModelsDialog component for improved usability

Browse Source
This commit is contained in:
Junyan Qin
2026-01-05 17:58:01 +08:00
parent 1cd586634d
commit 9ea5b50802
1 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/components/models-dialog/ModelsDialog.tsx
+14 -18
View File
@@ -429,18 +429,16 @@ export default function ModelsDialog({
}} }}
> >
<DialogContent className="overflow-hidden p-0 h-[80vh] flex flex-col !max-w-[37rem]"> <DialogContent className="overflow-hidden p-0 h-[80vh] flex flex-col !max-w-[37rem]">
<DialogHeader className="px-6 pt-6 pb-0"> <DialogHeader className="px-6 pt-6 pb-0 flex-shrink-0">
<DialogTitle>{t('models.title')}</DialogTitle> <DialogTitle>{t('models.title')}</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="flex-1 flex flex-col overflow-hidden px-6 pb-6 mt-0"> <div className="flex-1 overflow-auto px-6 pb-6 mt-0">
{/* Fixed LangBot Models Card */} {/* LangBot Models Card */}
<div className="flex-shrink-0"> {langbotProvider && renderProviderCard(langbotProvider, true)}
{langbotProvider && renderProviderCard(langbotProvider, true)}
</div>
{/* Add Provider Button */} {/* Add Provider Button */}
<div className="flex-shrink-0 mb-3 flex justify-between items-center"> <div className="mb-3 flex justify-between items-center sticky top-0 bg-background py-2 z-10">
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
{otherProviders.length === 0 {otherProviders.length === 0
? t( ? t(
@@ -460,17 +458,15 @@ export default function ModelsDialog({
</Button> </Button>
</div> </div>
{/* Scrollable Provider List */} {/* Provider List */}
<div className="flex-1 overflow-auto"> {otherProviders.length === 0 ? (
{otherProviders.length === 0 ? ( <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
<div className="flex flex-col items-center justify-center h-full text-muted-foreground"> <Boxes className="h-12 w-12 mb-3 opacity-50" />
<Boxes className="h-12 w-12 mb-3 opacity-50" /> <p className="text-sm">{t('models.noProviders')}</p>
<p className="text-sm">{t('models.noProviders')}</p> </div>
</div> ) : (
) : ( otherProviders.map((p) => renderProviderCard(p))
otherProviders.map((p) => renderProviderCard(p)) )}
)}
</div>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>