mirror of
https://github.com/danswer-ai/danswer.git
synced 2025-09-25 19:37:29 +02:00
k
This commit is contained in:
pablodanswer
committed by
Chris Weaver
Chris Weaver
parent
818225c60e
commit
da5c83a96d
@@ -116,9 +116,9 @@ export function AssistantModal({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={true} onOpenChange={(open) => !open && hideModal()}>
|
<div className="fixed inset-0 bg-neutral-950/80 bg-opacity-50 flex items-center justify-center z-50">
|
||||||
<DialogContent
|
<div
|
||||||
className="p-0 max-h-[80vh] max-w-none w-[95%] bg-background rounded-sm shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10 px-10 flex flex-col max-w-4xl"
|
className="p-0 max-w-4xl overflow-hidden max-h-[80vh] w-[95%] bg-background rounded-md shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10 px-10 overflow-hidden flex flex-col"
|
||||||
style={{
|
style={{
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
top: "10vh",
|
top: "10vh",
|
||||||
@@ -128,132 +128,136 @@ export function AssistantModal({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex overflow-hidden flex-col h-full">
|
<div className="flex overflow-hidden flex-col h-full">
|
||||||
<div className="flex flex-col sticky top-0 z-10">
|
<div className="flex overflow-hidden flex-col h-full">
|
||||||
<div className="flex px-2 justify-between items-center gap-x-2 mb-0">
|
<div className="flex flex-col sticky top-0 z-10">
|
||||||
<div className="h-12 w-full rounded-lg flex-col justify-center items-start gap-2.5 inline-flex">
|
<div className="flex px-2 justify-between items-center gap-x-2 mb-0">
|
||||||
<div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-background-300 flex items-center px-3">
|
<div className="h-12 w-full rounded-lg flex-col justify-center items-start gap-2.5 inline-flex">
|
||||||
{!isSearchFocused && (
|
<div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-background-300 flex items-center px-3">
|
||||||
<svg
|
{!isSearchFocused && (
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
className="h-5 w-5 text-text-400"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
className="h-5 w-5 text-text-400"
|
||||||
viewBox="0 0 24 24"
|
fill="none"
|
||||||
stroke="currentColor"
|
viewBox="0 0 24 24"
|
||||||
>
|
stroke="currentColor"
|
||||||
<path
|
>
|
||||||
strokeLinecap="round"
|
<path
|
||||||
strokeLinejoin="round"
|
strokeLinecap="round"
|
||||||
strokeWidth={2}
|
strokeLinejoin="round"
|
||||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
strokeWidth={2}
|
||||||
/>
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
</svg>
|
/>
|
||||||
)}
|
</svg>
|
||||||
<input
|
)}
|
||||||
value={searchQuery}
|
<input
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
value={searchQuery}
|
||||||
onFocus={() => setIsSearchFocused(true)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
onBlur={() => setIsSearchFocused(false)}
|
onFocus={() => setIsSearchFocused(true)}
|
||||||
type="text"
|
onBlur={() => setIsSearchFocused(false)}
|
||||||
className="w-full h-full bg-transparent outline-none text-black"
|
type="text"
|
||||||
/>
|
className="w-full h-full bg-transparent outline-none text-black"
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push("/assistants/new")}
|
|
||||||
className="h-10 cursor-pointer px-6 py-3 bg-background-800 hover:bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex"
|
|
||||||
>
|
|
||||||
<div className="text-text-50 text-lg font-normal leading-normal">
|
|
||||||
Create
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="px-2 flex py-4 items-center gap-x-2 flex-wrap">
|
|
||||||
<FilterIcon className="text-text-800" size={16} />
|
|
||||||
<AssistantBadgeSelector
|
|
||||||
text="Pinned"
|
|
||||||
selected={assistantFilters[AssistantFilter.Pinned]}
|
|
||||||
toggleFilter={() =>
|
|
||||||
toggleAssistantFilter(AssistantFilter.Pinned)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<AssistantBadgeSelector
|
|
||||||
text="Mine"
|
|
||||||
selected={assistantFilters[AssistantFilter.Mine]}
|
|
||||||
toggleFilter={() => toggleAssistantFilter(AssistantFilter.Mine)}
|
|
||||||
/>
|
|
||||||
<AssistantBadgeSelector
|
|
||||||
text="Private"
|
|
||||||
selected={assistantFilters[AssistantFilter.Private]}
|
|
||||||
toggleFilter={() =>
|
|
||||||
toggleAssistantFilter(AssistantFilter.Private)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<AssistantBadgeSelector
|
|
||||||
text="Public"
|
|
||||||
selected={assistantFilters[AssistantFilter.Public]}
|
|
||||||
toggleFilter={() =>
|
|
||||||
toggleAssistantFilter(AssistantFilter.Public)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-full border-t border-background-200" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-grow overflow-y-auto">
|
|
||||||
<h2 className="text-2xl font-semibold text-text-800 mb-2 px-4 py-2">
|
|
||||||
Featured Assistants
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="w-full px-2 pb-10 grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
|
|
||||||
{featuredAssistants.length > 0 ? (
|
|
||||||
featuredAssistants.map((assistant, index) => (
|
|
||||||
<div key={index}>
|
|
||||||
<AssistantCard
|
|
||||||
pinned={pinnedAssistants
|
|
||||||
.map((a) => a.id)
|
|
||||||
.includes(assistant.id)}
|
|
||||||
persona={assistant}
|
|
||||||
closeModal={hideModal}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="col-span-2 text-center text-text-500">
|
|
||||||
No featured assistants match filters
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
<button
|
||||||
|
onClick={() => router.push("/assistants/new")}
|
||||||
|
className="h-10 cursor-pointer px-6 py-3 bg-background-800 hover:bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex"
|
||||||
|
>
|
||||||
|
<div className="text-text-50 text-lg font-normal leading-normal">
|
||||||
|
Create
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="px-2 flex py-4 items-center gap-x-2 flex-wrap">
|
||||||
|
<FilterIcon className="text-text-800" size={16} />
|
||||||
|
<AssistantBadgeSelector
|
||||||
|
text="Pinned"
|
||||||
|
selected={assistantFilters[AssistantFilter.Pinned]}
|
||||||
|
toggleFilter={() =>
|
||||||
|
toggleAssistantFilter(AssistantFilter.Pinned)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AssistantBadgeSelector
|
||||||
|
text="Mine"
|
||||||
|
selected={assistantFilters[AssistantFilter.Mine]}
|
||||||
|
toggleFilter={() =>
|
||||||
|
toggleAssistantFilter(AssistantFilter.Mine)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<AssistantBadgeSelector
|
||||||
|
text="Private"
|
||||||
|
selected={assistantFilters[AssistantFilter.Private]}
|
||||||
|
toggleFilter={() =>
|
||||||
|
toggleAssistantFilter(AssistantFilter.Private)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<AssistantBadgeSelector
|
||||||
|
text="Public"
|
||||||
|
selected={assistantFilters[AssistantFilter.Public]}
|
||||||
|
toggleFilter={() =>
|
||||||
|
toggleAssistantFilter(AssistantFilter.Public)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="w-full border-t border-background-200" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{allAssistants && allAssistants.length > 0 && (
|
<div className="flex-grow overflow-y-auto">
|
||||||
<>
|
<h2 className="text-2xl font-semibold text-text-800 mb-2 px-4 py-2">
|
||||||
<h2 className="text-2xl font-semibold text-text-800 mt-4 mb-2 px-4 py-2">
|
Featured Assistants
|
||||||
All Assistants
|
</h2>
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="w-full mt-2 px-2 pb-2 grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
|
<div className="w-full px-2 pb-10 grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
|
||||||
{allAssistants
|
{featuredAssistants.length > 0 ? (
|
||||||
.sort((a, b) => b.id - a.id)
|
featuredAssistants.map((assistant, index) => (
|
||||||
.map((assistant, index) => (
|
<div key={index}>
|
||||||
<div key={index}>
|
<AssistantCard
|
||||||
<AssistantCard
|
pinned={pinnedAssistants
|
||||||
pinned={
|
.map((a) => a.id)
|
||||||
user?.preferences?.pinned_assistants?.includes(
|
.includes(assistant.id)}
|
||||||
assistant.id
|
persona={assistant}
|
||||||
) ?? false
|
closeModal={hideModal}
|
||||||
}
|
/>
|
||||||
persona={assistant}
|
</div>
|
||||||
closeModal={hideModal}
|
))
|
||||||
/>
|
) : (
|
||||||
</div>
|
<div className="col-span-2 text-center text-text-500">
|
||||||
))}
|
No featured assistants match filters
|
||||||
</div>
|
</div>
|
||||||
</>
|
)}
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
|
{allAssistants && allAssistants.length > 0 && (
|
||||||
|
<>
|
||||||
|
<h2 className="text-2xl font-semibold text-text-800 mt-4 mb-2 px-4 py-2">
|
||||||
|
All Assistants
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="w-full mt-2 px-2 pb-2 grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
|
||||||
|
{allAssistants
|
||||||
|
.sort((a, b) => b.id - a.id)
|
||||||
|
.map((assistant, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
<AssistantCard
|
||||||
|
pinned={
|
||||||
|
user?.preferences?.pinned_assistants?.includes(
|
||||||
|
assistant.id
|
||||||
|
) ?? false
|
||||||
|
}
|
||||||
|
persona={assistant}
|
||||||
|
closeModal={hideModal}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</div>
|
||||||
</Dialog>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
export default AssistantModal;
|
export default AssistantModal;
|
||||||
|
|||||||
Reference in New Issue
Block a user