scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-09-10 22:41:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): close model selector on outside click (#974)

Browse source 
Co-authored-by: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com>
This commit is contained in:
vorflux[bot] 2026-05-19 14:21:27 -07:00 • committed by GitHub
parent ac43fe157f
commit 100e3ad46f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 50 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
apps/web/components/chat/model-selector.tsx
View file

@ -1,6 +1,6 @@
"use client"
import { useState } from "react"
import { useEffect, useRef, useState } from "react"
import { cn } from "@lib/utils"
import { Button } from "@ui/components/button"
import { dmSansClassName } from "@/lib/fonts"
@ -23,6 +23,21 @@ export default function ChatModelSelector({
const [internalModel, setInternalModel] =
useState<ModelId>("claude-sonnet-4.6")
const [isOpen, setIsOpen] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!isOpen) return
const handleClickOutside = (e: MouseEvent) => {
if (
containerRef.current &&
!containerRef.current.contains(e.target as Node)
) {
setIsOpen(false)
}
}
document.addEventListener("mousedown", handleClickOutside)
return () => document.removeEventListener("mousedown", handleClickOutside)
}, [isOpen])
const selectedModel = selectedModelProp ?? internalModel
const currentModelData = modelNames[selectedModel]
@ -73,53 +88,44 @@ export default function ChatModelSelector({
)
return (
<div className="relative flex min-w-0 shrink items-center gap-2">
<div
ref={containerRef}
className="relative flex min-w-0 shrink items-center gap-2"
>
{trigger}
{isOpen && (
<>
<button
type="button"
className="fixed inset-0 z-40"
onClick={() => setIsOpen(false)}
onKeyDown={(e) => e.key === "Escape" && setIsOpen(false)}
aria-label="Close model selector"
/>
<div className="absolute bottom-full left-0 mb-2 w-64 bg-surface-card backdrop-blur-xl border border-surface-border rounded-lg shadow-xl z-50 overflow-hidden">
<div className="p-2 space-y-1">
{models.map((model) => {
const modelData = modelNames[model.id]
return (
<button
key={model.id}
type="button"
className={cn(
"flex flex-col items-start p-2 px-3 rounded-md transition-colors cursor-pointer w-full text-left",
selectedModel === model.id
? "bg-[#293952]/60"
: "hover:bg-[#293952]/40",
)}
onClick={() => handleModelSelect(model.id)}
onKeyDown={(e) =>
e.key === "Enter" && handleModelSelect(model.id)
}
>
<div className="text-sm font-medium text-white">
{modelData.name}{" "}
<span className="text-fg-subtle">
{modelData.version}
</span>
</div>
<div className="text-xs text-fg-muted truncate w-full">
{model.description}
</div>
</button>
)
})}
</div>
<div className="absolute bottom-full left-0 mb-2 w-64 bg-surface-card backdrop-blur-xl border border-surface-border rounded-lg shadow-xl z-50 overflow-hidden">
<div className="p-2 space-y-1">
{models.map((model) => {
const modelData = modelNames[model.id]
return (
<button
key={model.id}
type="button"
className={cn(
"flex flex-col items-start p-2 px-3 rounded-md transition-colors cursor-pointer w-full text-left",
selectedModel === model.id
? "bg-[#293952]/60"
: "hover:bg-[#293952]/40",
)}
onClick={() => handleModelSelect(model.id)}
onKeyDown={(e) =>
e.key === "Enter" && handleModelSelect(model.id)
}
>
<div className="text-sm font-medium text-white">
{modelData.name}{" "}
<span className="text-fg-subtle">{modelData.version}</span>
</div>
<div className="text-xs text-fg-muted truncate w-full">
{model.description}
</div>
</button>
)
})}
</div>
</>
</div>
)}
</div>
)