layout mimics actual chatgpt ui

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="w-80 bg-slate-800"></div> */}
-      <div className="flex h-full w-full flex-col bg-gray-50 ">
+      <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>
   );

src/components/Conversation.jsx

@@ -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>
+  );
+}

src/components/Conversations.jsx

@@ -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>
+  );
+}

src/components/Messages.jsx

@@ -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) => (

src/components/MobileNav.jsx

@@ -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>
+  );
+}

src/components/Nav.jsx

@@ -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>
+  );
+}

src/components/NavLink.jsx

@@ -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>
+  );
+}

src/components/NavLinks.jsx

@@ -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"
+      />
+    </>
+  );
+}

src/components/NewChat.jsx

@@ -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>
+  );
+}

src/components/TextChat.jsx

@@ -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 (
-    <>
+    <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">
-      <textarea
+      <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">
-        className="m-10 h-16 p-4"
+        <div className="relative flex h-full flex-1 md:flex-col">
-        value={text}
+          <div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
-        onKeyUp={handleKeyPress}
+          <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">
-        onChange={(e) => setText(e.target.value)}
+            <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>
   );
 }

src/components/svg/DarkModeIcon.jsx

@@ -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>
+  );
+}

src/components/svg/LogOutIcon.jsx

@@ -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>
+  );
+}

src/components/svg/TrashIcon.jsx

@@ -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>
+  );
+}