mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
layout mimics actual chatgpt ui
This commit is contained in:
Danny Avila
parent
254f9d7e26
commit
f2003da779
13 changed files with 410 additions and 11 deletions
16
src/App.jsx
16
src/App.jsx
|
|
@ -1,16 +1,26 @@
|
|||
import React, { useState } from 'react';
|
||||
import Messages from './components/Messages';
|
||||
import TextChat from './components/TextChat';
|
||||
import Nav from './components/Nav';
|
||||
import MobileNav from './components/MobileNav';
|
||||
|
||||
const App = () => {
|
||||
const [messages, setMessages] = useState([]);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
<div className="w-80 bg-slate-800"></div>
|
||||
<div className="flex h-full w-full flex-col bg-gray-50 ">
|
||||
{/* <div className="w-80 bg-slate-800"></div> */}
|
||||
<Nav />
|
||||
{/* <div className="flex h-full flex-1 flex-col md:pl-[260px]"> */}
|
||||
<div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
|
||||
<MobileNav />
|
||||
{/* <main className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1"> */}
|
||||
<Messages messages={messages} />
|
||||
<TextChat messages={messages} setMessages={setMessages}/>
|
||||
<TextChat
|
||||
messages={messages}
|
||||
setMessages={setMessages}
|
||||
/>
|
||||
{/* </main> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
73
src/components/Conversation.jsx
Normal file
73
src/components/Conversation.jsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function Conversation({ id, title = 'New conversation'}) {
|
||||
return (
|
||||
<a className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
|
||||
{title}
|
||||
</div>
|
||||
<div className="visible absolute right-1 z-10 flex text-gray-300">
|
||||
<button className="p-1 hover:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 20h9"></path>
|
||||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="p-1 hover:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
<line
|
||||
x1="10"
|
||||
y1="11"
|
||||
x2="10"
|
||||
y2="17"
|
||||
></line>
|
||||
<line
|
||||
x1="14"
|
||||
y1="11"
|
||||
x2="14"
|
||||
y2="17"
|
||||
></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
15
src/components/Conversations.jsx
Normal file
15
src/components/Conversations.jsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import Conversation from './Conversation';
|
||||
|
||||
export default function Conversations() {
|
||||
return (
|
||||
<div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
|
||||
<div className="flex flex-col gap-2 text-sm text-gray-100">
|
||||
<Conversation />
|
||||
<button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
|
||||
Show more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -12,7 +12,10 @@ export default function Messages({ messages }) {
|
|||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
// <div className="flex-1 overflow-hidden">
|
||||
// <div className="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800">
|
||||
// </div>
|
||||
// <div className="flex h-full text-sm dark:bg-gray-800"></div>;
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto ">
|
||||
{messages.map((message, i) => (
|
||||
|
|
|
|||
76
src/components/MobileNav.jsx
Normal file
76
src/components/MobileNav.jsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function MobileNav({ title = 'New Chat' }) {
|
||||
return (
|
||||
<div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
|
||||
>
|
||||
<span className="sr-only">Open sidebar</span>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-6 w-6"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="3"
|
||||
y1="12"
|
||||
x2="21"
|
||||
y2="12"
|
||||
/>
|
||||
<line
|
||||
x1="3"
|
||||
y1="6"
|
||||
x2="21"
|
||||
y2="6"
|
||||
/>
|
||||
<line
|
||||
x1="3"
|
||||
y1="18"
|
||||
x2="21"
|
||||
y2="18"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="flex-1 text-center text-base font-normal">{title}</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="px-3"
|
||||
>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-6 w-6"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="12"
|
||||
y1="5"
|
||||
x2="12"
|
||||
y2="19"
|
||||
/>
|
||||
<line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
src/components/Nav.jsx
Normal file
20
src/components/Nav.jsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react';
|
||||
import NewChat from './NewChat';
|
||||
import Conversations from './Conversations';
|
||||
import NavLinks from './NavLinks';
|
||||
|
||||
export default function Nav() {
|
||||
return (
|
||||
<div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
|
||||
<div className="flex h-full min-h-0 flex-col ">
|
||||
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
|
||||
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
|
||||
<NewChat />
|
||||
<Conversations />
|
||||
<NavLinks />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
src/components/NavLink.jsx
Normal file
10
src/components/NavLink.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function NavLink({ svg, text }) {
|
||||
return (
|
||||
<a className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
|
||||
{svg()}
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
24
src/components/NavLinks.jsx
Normal file
24
src/components/NavLinks.jsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react';
|
||||
import NavLink from './NavLink';
|
||||
import TrashIcon from './svg/TrashIcon';
|
||||
import DarkModeIcon from './svg/DarkModeIcon';
|
||||
import LogOutIcon from './svg/LogOutIcon';
|
||||
|
||||
export default function NavLinks() {
|
||||
return (
|
||||
<>
|
||||
<NavLink
|
||||
svg={TrashIcon}
|
||||
text="Clear conversations"
|
||||
/>
|
||||
<NavLink
|
||||
svg={DarkModeIcon}
|
||||
text="Dark mode"
|
||||
/>
|
||||
<NavLink
|
||||
svg={LogOutIcon}
|
||||
text="Log out"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
34
src/components/NewChat.jsx
Normal file
34
src/components/NewChat.jsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function NewChat() {
|
||||
return (
|
||||
<a className="mb-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="12"
|
||||
y1="5"
|
||||
x2="12"
|
||||
y2="19"
|
||||
/>
|
||||
<line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12"
|
||||
/>
|
||||
</svg>
|
||||
New chat
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useState } from 'react';
|
||||
import { SSE } from '../../app/sse';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
|
||||
const handleSubmit = (text, messageHandler, convo, convoHandler) => {
|
||||
let payload = { text };
|
||||
|
|
@ -70,14 +71,67 @@ export default function TextChat({ messages, setMessages, conversation = null })
|
|||
}
|
||||
};
|
||||
|
||||
// <>
|
||||
// <textarea
|
||||
// className="m-10 h-16 p-4"
|
||||
// value={text}
|
||||
// onKeyUp={handleKeyPress}
|
||||
// onChange={(e) => setText(e.target.value)}
|
||||
// />
|
||||
// </>
|
||||
return (
|
||||
<>
|
||||
<textarea
|
||||
className="m-10 h-16 p-4"
|
||||
value={text}
|
||||
onKeyUp={handleKeyPress}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
<div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
|
||||
<form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
|
||||
<div className="relative flex h-full flex-1 md:flex-col">
|
||||
<div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
|
||||
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
|
||||
<TextareaAutosize
|
||||
tabIndex="0"
|
||||
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
|
||||
rows="1"
|
||||
value={text}
|
||||
onKeyUp={handleKeyPress}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder=""
|
||||
className="m-0 h-auto resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
|
||||
/>
|
||||
<button className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="mr-1 h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="22"
|
||||
y1="2"
|
||||
x2="11"
|
||||
y2="13"
|
||||
/>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
|
||||
<a
|
||||
href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
ChatGPT Jan 30 Version
|
||||
</a>
|
||||
. Free Research Preview. Our goal is to make AI systems more natural and safe to
|
||||
interact with. Your feedback will help us improve.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
20
src/components/svg/DarkModeIcon.jsx
Normal file
20
src/components/svg/DarkModeIcon.jsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function DarkModeIcon() {
|
||||
return (
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
27
src/components/svg/LogOutIcon.jsx
Normal file
27
src/components/svg/LogOutIcon.jsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function LogOutIcon() {
|
||||
return (
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||||
<polyline points="16 17 21 12 16 7"></polyline>
|
||||
<line
|
||||
x1="21"
|
||||
y1="12"
|
||||
x2="9"
|
||||
y2="12"
|
||||
></line>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
33
src/components/svg/TrashIcon.jsx
Normal file
33
src/components/svg/TrashIcon.jsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function TrashIcon() {
|
||||
return (
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
<line
|
||||
x1="10"
|
||||
y1="11"
|
||||
x2="10"
|
||||
y2="17"
|
||||
></line>
|
||||
<line
|
||||
x1="14"
|
||||
y1="11"
|
||||
x2="14"
|
||||
y2="17"
|
||||
></line>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue