Skip to content

Commit 64de7ee

Browse files
WevesWeves
committed
Small projects UX tweaks
1 parent 7eeab8f commit 64de7ee

File tree

7 files changed

+139
-98
lines changed

7 files changed

+139
-98
lines changed

‎web/src/app/chat/components/files/FilePicker.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,24 @@ export default function FilePicker({
6565
onChange={handleUploadChange}
6666
accept={"*/*"}
6767
/>
68-
<Menubar className="bg-transparent dark:bg-transparent p-0 border-0">
68+
<Menubar className="bg-transparent dark:bg-transparent p-0 border-0 h-8">
6969
<MenubarMenu>
70-
<MenubarTrigger className="relative cursor-pointer flex items-center group rounded-lg text-input-text py-1.5 px-0 h-8">
70+
<MenubarTrigger className="relative cursor-pointer flex items-center group rounded-lg text-input-text px-0 h-8">
7171
{showTriggerLabel ? (
7272
<div
7373
className={cn(
74-
"flex flex-row gap-2 items-center justify-center p-2 rounded-md bg-background-dark/75 hover:dark:bg-neutral-800/75 hover:bg-accent-background-hovered transition-all duration-150",
74+
"flex",
75+
"flex-row",
76+
"gap-2",
77+
"items-center",
78+
"justify-center",
79+
"p-2",
80+
"rounded-md",
81+
"bg-background-dark/75",
82+
"hover:dark:bg-neutral-800/75",
83+
"hover:bg-accent-background-hovered",
84+
"transition-all",
85+
"duration-150",
7586
triggerClassName
7687
)}
7788
>
@@ -166,7 +177,7 @@ export default function FilePicker({
166177
>
167178
<Row>
168179
<Paperclip size={16} />
169-
<div className="flex flex-col">
180+
<div className="flex flex-col cursor-pointer">
170181
<span className="font-semibold">Upload Files</span>
171182
<span className="text-xs font-description text-text-400 dark:text-neutral-400">
172183
Upload a file from your device

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, ReactNode, forwardRef } from "react";
22
import { Folder } from "./interfaces";
33
import { ChatSession } from "@/app/chat/interfaces";
44
import { Caret } from "@/components/icons/icons";
5+
import { cn } from "@/lib/utils";
56

67
interface FolderDropdownProps {
78
folder: Folder;
@@ -24,7 +25,19 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
2425
>
2526
<div
2627
ref={ref}
27-
className="flex overflow-visible items-center w-full text-text-darker rounded-md p-1 bg-background-sidebar dark:bg-[#000] sticky top-0"
28+
className={cn(
29+
"flex",
30+
"overflow-visible",
31+
"items-center",
32+
"w-full",
33+
"text-text-darker",
34+
"rounded-md",
35+
"p-1",
36+
"bg-background-sidebar",
37+
"dark:bg-[#000]",
38+
"sticky",
39+
"top-0"
40+
)}
2841
style={{ zIndex: 10 - index }}
2942
>
3043
<button

‎web/src/app/chat/components/input/ChatInputOption.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,23 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
3838
<div
3939
ref={componentRef}
4040
className={`
41-
relative
42-
cursor-pointer
43-
flex
44-
items-center
41+
relative
42+
cursor-pointer
43+
flex
44+
items-center
4545
${name ? "space-x-1" : ""}
4646
group
4747
rounded-lg
4848
text-input-text
49-
group-hover:text-neutral-900
50-
dark:group-hover:text-neutral-50
49+
hover:text-neutral-900
50+
hover:bg-background-chat-hover
51+
dark:hover:text-neutral-50
52+
transition-all
53+
duration-300
54+
ease-in-out
5155
py-1.5
5256
px-2
57+
h-8
5358
${
5459
flexPriority === "shrink" &&
5560
"flex-shrink-100 flex-grow-0 flex-basis-auto min-w-[30px] whitespace-nowrap overflow-hidden"

‎web/src/components/sidebar/ChatSessionDisplay.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,8 @@ export function ChatSessionDisplay({
109109
)}
110110

111111
<div
112-
className="bg-transparent animate-in fade-in slide-in-from-left-2 duration-300"
112+
// remove animation for now: "bg-transparent animate-in fade-in slide-in-from-left-2 duration-300"
113+
className="bg-transparent"
113114
ref={chatSessionRef}
114115
>
115116
<Link

‎web/src/components/sidebar/HistorySidebar.tsx‎

Lines changed: 82 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -316,89 +316,93 @@ export const HistorySidebar = React.memo(
316316
)}
317317
</div>
318318
)}
319-
<Projects />
320-
<div className="h-full relative overflow-x-hidden overflow-y-auto">
321-
<div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-text-500/80 dark:text-[#D4D4D4] items-center font-normal leading-normal">
322-
Assistants
323-
</div>
324-
<DndContext
325-
sensors={sensors}
326-
collisionDetection={closestCenter}
327-
onDragEnd={handleDragEnd}
328-
modifiers={[restrictToVerticalAxis]}
329-
>
330-
<SortableContext
331-
items={pinnedAssistants.map((a) =>
332-
a.id === 0 ? "assistant-0" : a.id
333-
)}
334-
strategy={verticalListSortingStrategy}
319+
320+
<div className="h-full relative overflow-x-hidden overflow-y-auto flex flex-col gap-y-2">
321+
<div>
322+
<div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-text-500/80 dark:text-[#D4D4D4] items-center font-normal leading-normal">
323+
Assistants
324+
</div>
325+
<DndContext
326+
sensors={sensors}
327+
collisionDetection={closestCenter}
328+
onDragEnd={handleDragEnd}
329+
modifiers={[restrictToVerticalAxis]}
335330
>
336-
<div className="flex px-0 mr-4 flex-col gap-y-1 mt-1">
337-
{pinnedAssistants.map(
338-
(assistant: MinimalPersonaSnapshot) => (
339-
<SortableAssistant
340-
key={
341-
assistant.id === 0 ? "assistant-0" : assistant.id
342-
}
343-
assistant={assistant}
344-
active={assistant.id === liveAssistant?.id}
345-
onClick={() => {
346-
router.push(
347-
buildChatUrl(searchParams, null, assistant.id)
348-
);
349-
}}
350-
onPinAction={async (e: React.MouseEvent) => {
351-
e.stopPropagation();
352-
await toggleAssistantPinnedStatus(
353-
pinnedAssistants.map((a) => a.id),
354-
assistant.id,
355-
false
356-
);
357-
await refreshAssistants();
358-
}}
359-
/>
360-
)
331+
<SortableContext
332+
items={pinnedAssistants.map((a) =>
333+
a.id === 0 ? "assistant-0" : a.id
361334
)}
362-
</div>
363-
</SortableContext>
364-
</DndContext>
365-
{!pinnedAssistants.some((a) => a.id === liveAssistant?.id) &&
366-
liveAssistant &&
367-
// filter out the default assistant
368-
liveAssistant.id !== 0 && (
369-
<div className="w-full mt-1 pr-4">
370-
<SortableAssistant
371-
pinned={false}
372-
assistant={liveAssistant}
373-
active={liveAssistant.id === liveAssistant?.id}
374-
onClick={() => {
375-
router.push(
376-
buildChatUrl(searchParams, null, liveAssistant.id)
377-
);
378-
}}
379-
onPinAction={async (e: React.MouseEvent) => {
380-
e.stopPropagation();
381-
await toggleAssistantPinnedStatus(
382-
[...pinnedAssistants.map((a) => a.id)],
383-
liveAssistant.id,
384-
true
385-
);
386-
await refreshAssistants();
387-
}}
388-
/>
389-
</div>
390-
)}
335+
strategy={verticalListSortingStrategy}
336+
>
337+
<div className="flex px-0 mr-4 flex-col gap-y-1 mt-1">
338+
{pinnedAssistants.map(
339+
(assistant: MinimalPersonaSnapshot) => (
340+
<SortableAssistant
341+
key={
342+
assistant.id === 0 ? "assistant-0" : assistant.id
343+
}
344+
assistant={assistant}
345+
active={assistant.id === liveAssistant?.id}
346+
onClick={() => {
347+
router.push(
348+
buildChatUrl(searchParams, null, assistant.id)
349+
);
350+
}}
351+
onPinAction={async (e: React.MouseEvent) => {
352+
e.stopPropagation();
353+
await toggleAssistantPinnedStatus(
354+
pinnedAssistants.map((a) => a.id),
355+
assistant.id,
356+
false
357+
);
358+
await refreshAssistants();
359+
}}
360+
/>
361+
)
362+
)}
363+
</div>
364+
</SortableContext>
365+
</DndContext>
366+
{!pinnedAssistants.some((a) => a.id === liveAssistant?.id) &&
367+
liveAssistant &&
368+
// filter out the default assistant
369+
liveAssistant.id !== 0 && (
370+
<div className="w-full mt-1 pr-4">
371+
<SortableAssistant
372+
pinned={false}
373+
assistant={liveAssistant}
374+
active={liveAssistant.id === liveAssistant?.id}
375+
onClick={() => {
376+
router.push(
377+
buildChatUrl(searchParams, null, liveAssistant.id)
378+
);
379+
}}
380+
onPinAction={async (e: React.MouseEvent) => {
381+
e.stopPropagation();
382+
await toggleAssistantPinnedStatus(
383+
[...pinnedAssistants.map((a) => a.id)],
384+
liveAssistant.id,
385+
true
386+
);
387+
await refreshAssistants();
388+
}}
389+
/>
390+
</div>
391+
)}
391392

392-
<div className="w-full px-4">
393-
<button
394-
aria-label="Explore Assistants"
395-
onClick={() => setShowAssistantsModal(true)}
396-
className="w-full cursor-pointer text-base text-black dark:text-[#D4D4D4] hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
397-
>
398-
Explore Assistants
399-
</button>
393+
<div className="w-full px-4">
394+
<button
395+
aria-label="Explore Assistants"
396+
onClick={() => setShowAssistantsModal(true)}
397+
className="w-full cursor-pointer text-base text-black dark:text-[#D4D4D4] hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
398+
>
399+
Explore Assistants
400+
</button>
401+
</div>
400402
</div>
401403

404+
<Projects />
405+
402406
<PagesTab
403407
toggleChatSessionSearchModal={toggleChatSessionSearchModal}
404408
showDeleteModal={showDeleteModal}

‎web/src/components/sidebar/PagesTab.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ export function PagesTab({
2929
showShareModal?: (chatSession: ChatSession) => void;
3030
showDeleteModal?: (chatSession: ChatSession) => void;
3131
}) {
32-
const { setPopup, popup } = usePopup();
33-
const router = useRouter();
3432
const groupedChatSesssions = groupSessionsByDateRange(existingChats || []);
3533
const isHistoryEmpty = !existingChats || existingChats.length === 0;
3634

@@ -54,9 +52,8 @@ export function PagesTab({
5452

5553
return (
5654
<div className="flex flex-col gap-y-2 flex-grow">
57-
{popup}
58-
<div className="px-4 mt-2 group mr-2 bg-background-sidebar dark:bg-transparent z-20">
59-
<div className="flex group justify-between text-sm text-text-300/80 items-center font-normal leading-normal">
55+
<div className="px-4 group mr-2 bg-background-sidebar dark:bg-transparent z-20">
56+
<div className="flex group justify-between text-sm text-text-300/80 items-center font-normal leading-normal -mb-3">
6057
<p>Chats</p>
6158

6259
<TooltipProvider>
@@ -80,7 +77,7 @@ export function PagesTab({
8077
</div>
8178
</div>
8279

83-
<div className="pl-2 pr-3">
80+
<div className="pl-4 pr-3">
8481
{!isHistoryEmpty && (
8582
<>
8683
{Object.entries(groupedChatSesssions)

‎web/src/components/sidebar/Projects.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
TooltipTrigger,
2525
TooltipContent,
2626
} from "@/components/ui/tooltip";
27+
import { cn } from "@/lib/utils";
2728

2829
interface ProjectsProps {
2930
onOpenProject?: (projectId: string) => void;
@@ -247,7 +248,16 @@ export default function Projects({ onOpenProject }: ProjectsProps) {
247248
type="button"
248249
aria-label="Create project"
249250
onClick={() => setIsCreateProjectOpen(true)}
250-
className="p-1.5 group-hover:opacity-100 opacity-0 transition duration-200 cursor-pointer hover:bg-accent-background-hovered rounded-md"
251+
className={cn(
252+
"p-1.5",
253+
"group-hover:opacity-100",
254+
"opacity-0",
255+
"transition",
256+
"duration-200",
257+
"cursor-pointer",
258+
"hover:bg-accent-background-hovered",
259+
"rounded-md"
260+
)}
251261
>
252262
<FolderPlus size={18} />
253263
</button>
@@ -257,7 +267,7 @@ export default function Projects({ onOpenProject }: ProjectsProps) {
257267
</TooltipProvider>
258268
</div>
259269

260-
<div className="px-2 gap-y-1 flex flex-col text-text-history-sidebar-button items-center">
270+
<div className="ml-2 px-2 gap-y-1 flex flex-col text-text-history-sidebar-button items-center">
261271
{projects.map((p) => (
262272
<CollapsibleFolder
263273
key={p.id}

0 commit comments

Comments
 (0)