Skip to content

Commit 38468c1

Browse files
raunakabraunakab
committed
Fix AgentsModal
1 parent 8550a9c commit 38468c1

File tree

8 files changed

+82
-75
lines changed

8 files changed

+82
-75
lines changed

‎web/src/app/chat/components/folders/FolderDropdown.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
191191
</div>
192192
) : (
193193
<div className="flex items-center">
194-
<Text text02 secondary>
194+
<Text text02 secondaryBody>
195195
{folder.folder_name}
196196
</Text>
197197
</div>
@@ -269,5 +269,4 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
269269
);
270270
}
271271
);
272-
273272
FolderDropdown.displayName = "FolderDropdown";

‎web/src/components-2/modals/Modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function Modal({
4242
>
4343
{/* Header with title */}
4444
<div className="flex items-center justify-between p-padding-block-end">
45-
<Text heading>{title}</Text>
45+
<Text headingH2>{title}</Text>
4646
<SvgX
4747
className="stroke-text-03 w-[1.5rem] h-[1.5rem]"
4848
onClick={() => toggleModal(id, false)}

‎web/src/icons/filter.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from "react";
2+
import type { SVGProps } from "react";
3+
const SvgFilter = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
viewBox="0 0 16 16"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
{...props}
9+
>
10+
<path
11+
d="M14.6667 3H1.33334L6.66668 9.30667V12.6667L9.33334 14V9.30667L14.6667 3Z"
12+
strokeOpacity={0.75}
13+
strokeWidth={1.5}
14+
strokeLinecap="round"
15+
strokeLinejoin="round"
16+
/>
17+
</svg>
18+
);
19+
export default SvgFilter;

‎web/src/icons/pin.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from "react";
2+
import type { SVGProps } from "react";
3+
const SvgPin = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
viewBox="0 0 16 16"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
{...props}
9+
>
10+
<path
11+
d="M6.70001 9.29581L2.20001 13.7958M6.70001 9.29581L9.99291 12.5887C10.6229 13.2187 11.7 12.7725 11.7 11.8816V10.5384C11.7 9.7428 12.0161 8.97974 12.5787 8.41713L13.4929 7.50292C13.8834 7.11239 13.8834 6.47923 13.4929 6.0887L9.90712 2.50292C9.51659 2.11239 8.88343 2.11239 8.49291 2.50292L7.57869 3.41713C7.01608 3.97974 6.25302 4.29581 5.45737 4.29581H4.11423C3.22332 4.29581 2.77715 5.37295 3.40712 6.00291L6.70001 9.29581Z"
12+
strokeOpacity={0.75}
13+
strokeWidth={1.5}
14+
strokeLinecap="round"
15+
strokeLinejoin="round"
16+
/>
17+
</svg>
18+
);
19+
export default SvgPin;

‎web/src/sections/AgentsModal/AgentCard.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,20 @@ import {
1818
TooltipProvider,
1919
TooltipTrigger,
2020
} from "@/components/ui/tooltip";
21-
import { IconProps, PinnedIcon } from "@/components/icons/icons";
2221
import { deletePersona } from "@/app/admin/assistants/lib";
23-
import { PencilIcon } from "lucide-react";
2422
import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled";
2523
import { usePopup } from "@/components/admin/connectors/Popup";
2624
import { Button } from "@/components/ui/button";
2725
import { useAgentsContext } from "@/components-2/context/AgentsContext";
2826
import Text from "@/components-2/Text";
2927
import Truncated from "@/components-2/Truncated";
28+
import SvgBubbleText from "@/icons/bubble-text";
29+
import SvgPin from "@/icons/pin";
30+
import { SvgProps } from "@/icons";
3031

3132
interface AgentActionButtonProps {
3233
title: string;
33-
icon: React.FunctionComponent<IconProps>;
34+
icon: React.FunctionComponent<SvgProps>;
3435
onClick: () => void;
3536
tooltip: string;
3637
}
@@ -47,12 +48,10 @@ function AgentActionButton({
4748
<TooltipTrigger asChild>
4849
<button
4950
onClick={onClick}
50-
className={
51-
"hover:bg-background-tint-03 p-spacing-interline gap-spacing-interline rounded-04 border flex items-center"
52-
}
51+
className="hover:bg-background-tint-03 p-spacing-interline gap-spacing-interline rounded-08 border flex items-center"
5352
>
54-
<Icon size={12} />
55-
<Text secondary>{title}</Text>
53+
<Icon className="w-[1rem] h-[1rem] stroke-text-05" />
54+
<Text secondaryBody>{title}</Text>
5655
</button>
5756
</TooltipTrigger>
5857
<TooltipContent>{tooltip}</TooltipContent>
@@ -115,7 +114,7 @@ export default function AssistantCard({
115114
<div className="flex-1 flex flex-col gap-padding-button">
116115
<div className="flex flex-row justify-between">
117116
<Truncated>
118-
<Text subheading text04>
117+
<Text headingH3 text04>
119118
{agent.name}
120119
</Text>
121120
</Truncated>
@@ -219,31 +218,31 @@ export default function AssistantCard({
219218
<div className="flex flex-row items-center gap-spacing-interline">
220219
<div className="max-w-[33%]">
221220
<Truncated>
222-
<Text secondary text02>
221+
<Text secondaryBody text02>
223222
By {agent.owner?.email || "Onyx"} asdf
224223
</Text>
225224
</Truncated>
226225
</div>
227-
<Text secondary text01>
226+
<Text secondaryBody text01>
228227
•
229228
</Text>
230-
<Text secondary text02>
229+
<Text secondaryBody text02>
231230
{agent.tools.length > 0
232231
? `${agent.tools.length} Action${agent.tools.length > 1 ? "s" : ""}`
233232
: "No Actions"}
234233
</Text>
235-
<Text secondary text01>
234+
<Text secondaryBody text01>
236235
•
237236
</Text>
238-
<Text secondary text02>
237+
<Text secondaryBody text02>
239238
{agent.is_public ? "Public" : "Private"}
240239
</Text>
241240
</div>
242241

243242
<div className="flex gap-2">
244243
<AgentActionButton
245244
title="Start Chat"
246-
icon={PencilIcon as React.FunctionComponent<IconProps>}
245+
icon={SvgBubbleText}
247246
onClick={() => {
248247
router.push(
249248
`/chat?${SEARCH_PARAM_NAMES.PERSONA_ID}=${agent.id}`
@@ -254,7 +253,7 @@ export default function AssistantCard({
254253
/>
255254
<AgentActionButton
256255
title={pinned ? "Unpin" : "Pin"}
257-
icon={PinnedIcon}
256+
icon={SvgPin}
258257
onClick={() => togglePinnedAgent(agent, !pinned)}
259258
tooltip={`${pinned ? "Remove from" : "Add to"} your pinned list`}
260259
/>

‎web/src/sections/AgentsModal/index.tsx‎

Lines changed: 22 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { useMemo, useState } from "react";
44
import { useRouter } from "next/navigation";
5-
import AssistantCard from "./AgentCard";
5+
import AgentCard from "@/sections/AgentsModal/AgentCard";
66
import { useUser } from "@/components/user/UserProvider";
77
import { FilterIcon } from "lucide-react";
88
import { checkUserOwnsAssistant as checkUserOwnsAgent } from "@/lib/assistants/checkOwnership";
@@ -11,6 +11,7 @@ import { MinimalPersonaSnapshot } from "@/app/admin/assistants/interfaces";
1111
import Text from "@/components-2/Text";
1212
import Modal from "@/components-2/modals/Modal";
1313
import { ModalIds, useModal } from "@/components-2/context/ModalContext";
14+
import SvgFilter from "@/icons/filter";
1415

1516
interface AgentsSectionProps {
1617
title: string;
@@ -26,14 +27,13 @@ function AgentsSection({ title, agents, pinnedAgents }: AgentsSectionProps) {
2627
}
2728

2829
return (
29-
<div className="p-padding-content flex flex-col gap-spacing-paragraph">
30-
<Text subheading>{title}</Text>
31-
30+
<div className="py-padding-content flex flex-col gap-spacing-paragraph">
31+
<Text headingH2>{title}</Text>
3232
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-spacing-paragraph">
3333
{agents
3434
.sort((a, b) => b.id - a.id)
3535
.map((agent, index) => (
36-
<AssistantCard
36+
<AgentCard
3737
key={index}
3838
pinned={pinnedAgents.map((a) => a.id).includes(agent.id)}
3939
agent={agent}
@@ -58,15 +58,10 @@ function AgentBadgeSelector({
5858
}: AgentBadgeSelectorProps) {
5959
return (
6060
<div
61-
className={`
62-
select-none ${
63-
selected
64-
? "bg-background-900 text-white"
65-
: "bg-transparent text-text-900"
66-
} w-12 h-5 text-center px-1 py-0.5 rounded-lg cursor-pointer text-[12px] font-normal leading-[10px] border border-black justify-center items-center gap-1 inline-flex`}
61+
className={`bg-background-tint-03 hover:bg-background-tint-02 ${selected && "bg-action-link-05 hover:bg-action-link-04"} border p-spacing-interline rounded-08`}
6762
onClick={toggleFilter}
6863
>
69-
{text}
64+
<Text secondaryBody>{text}</Text>
7065
</div>
7166
);
7267
}
@@ -147,48 +142,25 @@ export default function AgentsModal() {
147142
);
148143

149144
return (
150-
<Modal id={ModalIds.AgentsModal} title="Agents">
151-
<div className="flex flex-col sticky top-0 z-10">
152-
<div className="flex px-2 justify-between items-center gap-x-2 mb-0">
153-
<div className="h-12 w-full rounded-lg flex-col justify-center items-start gap-2.5 inline-flex">
154-
<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">
155-
{!isSearchFocused && (
156-
<svg
157-
xmlns="http://www.w3.org/2000/svg"
158-
className="h-5 w-5 text-text-400"
159-
fill="none"
160-
viewBox="0 0 24 24"
161-
stroke="currentColor"
162-
>
163-
<path
164-
strokeLinecap="round"
165-
strokeLinejoin="round"
166-
strokeWidth={2}
167-
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
168-
/>
169-
</svg>
170-
)}
171-
<input
172-
value={searchQuery}
173-
onChange={(e) => setSearchQuery(e.target.value)}
174-
onFocus={() => setIsSearchFocused(true)}
175-
onBlur={() => setIsSearchFocused(false)}
176-
type="text"
177-
className="w-full h-full bg-transparent outline-none text-black"
178-
/>
179-
</div>
180-
</div>
145+
<Modal id={ModalIds.AgentsModal} title="Agents" className="max-w-[60rem]">
146+
<div className="flex flex-col sticky top-0 z-10 bg-background-tint-01">
147+
<div className="flex flex-row items-center gap-spacing-interline">
148+
<input
149+
className="w-full h-[3rem] border bg-transparent rounded-08 p-padding-button"
150+
placeholder="Search..."
151+
value={searchQuery}
152+
onChange={(event) => setSearchQuery(event.target.value)}
153+
/>
181154
<button
182155
onClick={() => router.push("/assistants/new")}
183-
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"
156+
className="p-padding-button bg-background-tint-03 rounded-08 hover:bg-background-tint-02"
184157
>
185-
<div className="text-text-50 text-lg font-normal leading-normal">
186-
Create
187-
</div>
158+
<Text>Create</Text>
188159
</button>
189160
</div>
190-
<div className="px-2 flex py-4 items-center gap-x-2 flex-wrap">
191-
<FilterIcon className="text-text-800" size={16} />
161+
162+
<div className="py-padding-content flex items-center gap-spacing-interline flex-wrap">
163+
<SvgFilter className="w-[1.2rem] h-[1.2rem] stroke-text-05" />
192164
<AgentBadgeSelector
193165
text="Pinned"
194166
selected={agentFilters[AgentFilter.Pinned]}
@@ -211,13 +183,12 @@ export default function AgentsModal() {
211183
toggleFilter={() => toggleAgentFilter(AgentFilter.Public)}
212184
/>
213185
</div>
214-
<div className="w-full border-t border-background-200" />
215186
</div>
216187

217188
<div className="h-full w-full">
218189
{featuredAgents.length === 0 && allAgents.length === 0 ? (
219190
<Text
220-
callout
191+
mainBody
221192
className="w-full h-full flex flex-col items-center justify-center"
222193
>
223194
No Agents configured yet...

‎web/src/sections/AppSidebar/components.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import React, { Dispatch, SetStateAction, useState } from "react";
3+
import React, { Dispatch, SetStateAction } from "react";
44
import { IconProps } from "@/components/icons/icons";
55
import Text from "@/components-2/Text";
66
import Truncated from "@/components-2/Truncated";

‎web/src/sections/AppSidebar/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -376,15 +376,15 @@ function AppSidebarInner() {
376376
[router, searchParams]
377377
);
378378

379-
if (!combinedSettings) {
380-
return null;
381-
}
382-
383379
const isHistoryEmpty = useMemo(
384380
() => !chatSessions || chatSessions.length === 0,
385381
[chatSessions]
386382
);
387383

384+
if (!combinedSettings) {
385+
return null;
386+
}
387+
388388
return (
389389
<>
390390
<AgentsModal />

0 commit comments

Comments
 (0)