Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♾️ style: Infinite Scroll Nav and Sort Convos by Date/Usage #1708

Merged
merged 25 commits into from
Feb 4, 2024
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
d68da0a
Style: Infinite Scroll and Group convos by date
walbercardoso Jan 24, 2024
9ce5356
Style: Infinite Scroll and Group convos by date- Redesign NavBar
walbercardoso Jan 24, 2024
13c581c
Style: Infinite Scroll and Group convos by date- Redesign NavBar - Cl…
walbercardoso Jan 24, 2024
2c50d92
Style: Infinite Scroll and Group convos by date- Redesign NavBar - Re…
walbercardoso Jan 25, 2024
ba30666
Style: Infinite Scroll and Group convos by date- Redesign NavBar - Re…
walbercardoso Jan 25, 2024
feed476
Style: Infinite Scroll and Group convos by date- Redesign NavBar - Re…
walbercardoso Jan 25, 2024
0cf9cd6
Including OpenRouter and Mistral icon
walbercardoso Jan 27, 2024
88e8734
Merge branch 'main' of https://github.com/walbercardoso/LibreChat int…
danny-avila Feb 2, 2024
4f725fb
refactor(Conversations): cleanup use of utility functions and typing
danny-avila Feb 2, 2024
8ca10d3
refactor(Nav/NewChat): use localStorage `lastConversationSetup` to de…
danny-avila Feb 2, 2024
eed8e9b
refactor: remove use of `isFirstToday`
danny-avila Feb 2, 2024
20dbba3
refactor(Nav): remove use of `endpointSelected`, consolidate scrollin…
danny-avila Feb 2, 2024
a58b009
refactor: Add spinner to bottom of list, throttle fetching, move quer…
danny-avila Feb 2, 2024
c65b83a
chore: sort by `updatedAt` field
danny-avila Feb 3, 2024
f77d491
refactor: optimize conversation infinite query, use optimistic update…
danny-avila Feb 3, 2024
18d8039
feat: gen_title route for generating the title for the conversation
danny-avila Feb 3, 2024
36ce64c
style(Convo): change hover bg-color
danny-avila Feb 3, 2024
7a9b25c
refactor: memoize groupedConversations and return as array of tuples,…
danny-avila Feb 3, 2024
ba150e9
style: rename Header NewChat Button -> HeaderNewChat, add NewChatIcon…
danny-avila Feb 3, 2024
b1f34f7
style(NewChat): add hover bg color
danny-avila Feb 3, 2024
044556a
style: cleanup comments, match ChatGPT nav styling, redesign search b…
danny-avila Feb 3, 2024
b712203
feat: add tests for conversation helpers and ensure no duplicate conv…
danny-avila Feb 4, 2024
9b8efd5
style: hover bg-color
danny-avila Feb 4, 2024
e6ce7f5
feat: alt-click on convo item to open conversation in new tab
danny-avila Feb 4, 2024
7bf11d7
chore: send error message when `gen_title` fails
danny-avila Feb 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
style: rename Header NewChat Button -> HeaderNewChat, add NewChatIcon…
…, closely match main Nav New Chat button to ChatGPT
danny-avila committed Feb 3, 2024
commit ba150e9b5f4c0be725cd91dd5a31d5220963cb6c
4 changes: 2 additions & 2 deletions client/src/components/Chat/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { useOutletContext } from 'react-router-dom';
import type { ContextType } from '~/common';
import { EndpointsMenu, PresetsMenu, NewChat } from './Menus';
import { EndpointsMenu, PresetsMenu, HeaderNewChat } from './Menus';
import HeaderOptions from './Input/HeaderOptions';

export default function Header() {
const { navVisible } = useOutletContext<ContextType>();
return (
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white/95 p-2 font-semibold dark:bg-gray-800/90 dark:text-white ">
<div className="hide-scrollbar flex items-center gap-2 overflow-x-auto">
{!navVisible && <NewChat />}
{!navVisible && <HeaderNewChat />}
<EndpointsMenu />
<HeaderOptions />
<PresetsMenu />
23 changes: 23 additions & 0 deletions client/src/components/Chat/Menus/HeaderNewChat.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { NewChatIcon } from '~/components/svg';
import { useChatContext } from '~/Providers';
import { useMediaQuery } from '~/hooks';

export default function HeaderNewChat() {
const { newConversation } = useChatContext();
const isSmallScreen = useMediaQuery('(max-width: 768px)');
if (isSmallScreen) {
return null;
}
return (
<button
data-testid="wide-header-new-chat-button"
type="button"
className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
onClick={() => newConversation()}
>
<div className="flex w-full items-center justify-center gap-2">
<NewChatIcon />
</div>
</button>
);
}
36 changes: 0 additions & 36 deletions client/src/components/Chat/Menus/NewChat.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion client/src/components/Chat/Menus/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export { default as EndpointsMenu } from './EndpointsMenu';
export { default as PresetsMenu } from './PresetsMenu';
export { default as NewChat } from './NewChat';
export { default as HeaderNewChat } from './HeaderNewChat';
6 changes: 1 addition & 5 deletions client/src/components/Nav/Nav.tsx
Original file line number Diff line number Diff line change
@@ -149,9 +149,7 @@ export default function Nav({ navVisible, setNavVisible }) {
)}
>
<nav className="flex h-full w-full flex-col px-3 pb-3.5">
<div className="mb-1 flex h-11 flex-row">
<NewChat toggleNav={itemToggleNav} />
</div>
<NewChat toggleNav={itemToggleNav} />
{isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
<div
className={`-mr-2 flex-1 flex-col overflow-y-auto pr-2 transition-opacity duration-500 ${
@@ -161,8 +159,6 @@ export default function Nav({ navVisible, setNavVisible }) {
onMouseLeave={() => setIsHovering(false)}
ref={containerRef}
>
<div className="my-1 ml-1 h-px w-7 bg-white/20"></div>

<div className={containerClasses}>
<Conversations
conversations={conversations}
69 changes: 33 additions & 36 deletions client/src/components/Nav/NewChat.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import {
useLocalStorage,
} from '~/hooks';
import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
import { NewChatIcon } from '~/components/svg';
import { getEndpointField } from '~/utils';

export default function NewChat({ toggleNav }: { toggleNav: () => void }) {
@@ -35,43 +36,39 @@ export default function NewChat({ toggleNav }: { toggleNav: () => void }) {
};

return (
<a
href="/"
data-testid="nav-new-chat-button"
onClick={clickHandler}
className="flex h-11 w-full items-center justify-between rounded-md px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-900/40"
>
<div className="flex items-center gap-2">
<div className="h-7 w-7 flex-shrink-0">
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
{endpoint &&
Icon &&
Icon({
size: 41,
context: 'nav',
className: 'h-2/3 w-2/3',
endpoint: endpoint,
iconURL: iconURL,
})}
<div className="sticky left-0 right-0 top-0 z-20 bg-black pt-3.5">
<div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}>
<a
href="/"
data-testid="nav-new-chat-button"
onClick={clickHandler}
className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium"
>
<div className="h-7 w-7 flex-shrink-0">
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
{endpoint &&
Icon &&
Icon({
size: 41,
context: 'nav',
className: 'h-2/3 w-2/3',
endpoint: endpoint,
iconURL: iconURL,
})}
</div>
</div>
</div>
<span>{localize('com_ui_new_chat')}</span>
<div className="text-token-text-primary grow overflow-hidden text-ellipsis whitespace-nowrap text-sm">
{localize('com_ui_new_chat')}
</div>
<div className="flex gap-3">
<span className="flex items-center" data-state="closed">
<button type="button" className="text-token-text-primary">
<NewChatIcon className="h-[18px] w-[18px]" />
</button>
</span>
</div>
</a>
</div>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="icon-md"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.7929 2.79289C18.0118 1.57394 19.9882 1.57394 21.2071 2.79289C22.4261 4.01184 22.4261 5.98815 21.2071 7.20711L12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16H9C8.44772 16 8 15.5523 8 15V12C8 11.7348 8.10536 11.4804 8.29289 11.2929L16.7929 2.79289ZM19.7929 4.20711C19.355 3.7692 18.645 3.7692 18.2071 4.2071L10 12.4142V14H11.5858L19.7929 5.79289C20.2308 5.35499 20.2308 4.64501 19.7929 4.20711ZM6 5C5.44772 5 5 5.44771 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34314 4.34315 3 6 3H10C10.5523 3 11 3.44771 11 4C11 4.55228 10.5523 5 10 5H6Z"
fill="currentColor"
></path>
</svg>
</a>
</div>
);
}
20 changes: 20 additions & 0 deletions client/src/components/svg/NewChatIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { cn } from '~/utils';
export default function NewChatIcon({ className = '' }: { className?: string }) {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cn('text-black dark:text-white', className)}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.7929 2.79289C18.0118 1.57394 19.9882 1.57394 21.2071 2.79289C22.4261 4.01184 22.4261 5.98815 21.2071 7.20711L12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16H9C8.44772 16 8 15.5523 8 15V12C8 11.7348 8.10536 11.4804 8.29289 11.2929L16.7929 2.79289ZM19.7929 4.20711C19.355 3.7692 18.645 3.7692 18.2071 4.2071L10 12.4142V14H11.5858L19.7929 5.79289C20.2308 5.35499 20.2308 4.64501 19.7929 4.20711ZM6 5C5.44772 5 5 5.44771 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34314 4.34315 3 6 3H10C10.5523 3 11 3.44771 11 4C11 4.55228 10.5523 5 10 5H6Z"
fill="currentColor"
/>
</svg>
);
}
1 change: 1 addition & 0 deletions client/src/components/svg/index.ts
Original file line number Diff line number Diff line change
@@ -42,5 +42,6 @@ export { default as GoogleMinimalIcon } from './GoogleMinimalIcon';
export { default as AnthropicMinimalIcon } from './AnthropicMinimalIcon';
export { default as SendMessageIcon } from './SendMessageIcon';
export { default as UserIcon } from './UserIcon';
export { default as NewChatIcon } from './NewChatIcon';
export { default as ExperimentIcon } from './ExperimentIcon';
export { default as GoogleIconChat } from './GoogleIconChat';