Update styles (#192)

* toggle navbar by thread-btn

* remove navbar padding on close

* moved assistant-selector to header

* add simple intro text if no thread is selected

* adjusted roundedness of corners

* added favicon

* added logo to header

* updated assistant-builder test since no longer contains Create Assistant btn

ui/src/app/[[...slug]]/page.tsx

@@ -12,7 +12,7 @@ export default function ConversationPage({
   if (!isValidParam(params.slug)) return notFound();
 
   return (
-    <div className="border-solid border-2 w-full gap-4 flex flex-col">
+    <div className="border-solid border-2 w-full gap-4 flex flex-col rounded">
       <ChatPanel />
     </div>
   );

ui/src/app/layout.tsx

@@ -12,6 +12,9 @@ const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "PersonaFlow",
   description: "Where AI meets individuality for unmatched personalization",
+  icons: {
+    icon: '/icon.ico'
+  }
 };
 
 export default function RootLayout({

ui/src/components/features/build-panel/components/__tests__/assistant-builder.spec.tsx

@@ -42,7 +42,6 @@ test("should render", () => {
 
   render(<AssistentBuilder />);
 
-  screen.getByRole("button", { name: "Create Assistant" });
   expect(screen.getByText("EditAssistant")).toBeInTheDocument();
   expect(screen.queryByText("CreateAssistant")).toBeNull();
 });

ui/src/components/features/build-panel/components/assistant-builder.tsx

@@ -1,29 +1,14 @@
 "use client";
 
-import { AssistantSelector } from "./assistant-selector";
-import { Button } from "@/components/ui/button";
-import { SquareIcon } from "@radix-ui/react-icons";
 import { EditAssistant } from "./edit-assistant";
 import { CreateAssistant } from "./create-assistant";
-import { useRouter } from "next/navigation";
 import { useSlugRoutes } from "@/hooks/useSlugParams";
 
 export function AssistentBuilder() {
   const {assistantId} = useSlugRoutes();
-  const router = useRouter()
 
   return (
     <>
-      <div className="flex gap-3">
-        <AssistantSelector />
-        <Button
-          className="flex gap-2"
-          onClick={() => router.push('/')}
-        >
-          <SquareIcon />
-          Create Assistant
-        </Button>
-      </div>
       {assistantId ? <EditAssistant /> : <CreateAssistant />}
     </>
   );

ui/src/components/features/build-panel/components/build-panel.tsx

@@ -12,7 +12,7 @@ export default function BuildPanel() {
   };
 
   return (
-    <div className="flex items-center border-solid border-2">
+    <div className="flex items-center border-solid border-2 rounded">
       <div className=" p-1">
         {isOpen ? (
           <ChevronRight

ui/src/components/features/chat-panel/chat-panel.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { MessageType, TStreamState } from "@/data-provider/types";
 import { useSlugRoutes } from "@/hooks/useSlugParams";
 import { useRouter } from "next/navigation";
+import { ThreadBtn } from "./components/thread-btn";
 
 export default function ChatPanel() {
   const [userMessage, setUserMessage] = useState("");
@@ -51,13 +52,16 @@ export default function ChatPanel() {
   return (
     <div className="h-full w-full gap-4 flex flex-col">
       <div className="h-full flex flex-col">
+        <ThreadBtn />
         {threadId || isNewThread ? (
           <MessagesContainer
             threadId={threadId as string}
             stream={stream as TStreamState}
           />
         ) : (
-          <h1>Welcome!</h1>
+            <div className="self-center h-full items-center flex">
+              <h1 className="border-2 p-4 rounded">{'<> Send a message to create a thread. </>'}</h1>
+            </div>
         )}
 
         <Composer

ui/src/components/features/chat-panel/components/thread-btn.tsx

@@ -0,0 +1,11 @@
+import { Button } from "@/components/ui/button"
+import { threadAtom } from "@/store"
+import { useAtom } from "jotai"
+
+export const ThreadBtn = () => {
+    const [_, setIsNavbarOpen] = useAtom(threadAtom)
+
+    const openNavbar = () => setIsNavbarOpen(isOpen => !isOpen);
+
+    return <Button variant="outline" className="w-1/4 m-2" onClick={openNavbar}>Threads</Button>
+}

ui/src/components/features/header/components/header.tsx

@@ -1,7 +1,29 @@
+'use client'
+import { Button } from "@/components/ui/button";
+import { AssistantSelector } from "../../build-panel/components/assistant-selector";
+import { useRouter } from "next/navigation";
+import { Plus } from "lucide-react";
+import PersonaFlowIcon from '../../../../../assets/PersonaFlowIcon-512.png'
+import Image from "next/image";
+
 export default function Header() {
+  const router = useRouter()
   return (
-    <div className="flex gap-2">
-      <h1>[ personaflow ]</h1>
+    <div className="flex gap-2 m-2 justify-between">
+      <div className="flex gap-4 items-center">
+      <Image className="rounded" src={PersonaFlowIcon} alt="PersonaFlow logo" width={40} height={40}/>
+        <h1>[ personaflow ]</h1>
+        </div>
+      <div className="flex gap-2">
+       <AssistantSelector />
+        <Button
+          className="flex gap-2"
+          onClick={() => router.push('/')}
+        >
+          <Plus />
+          Create Assistant
+        </Button>
+      </div>
     </div>
   );
 }

ui/src/components/features/navbar/components/navbar.tsx

@@ -9,13 +9,16 @@ import { TGroupedThreads } from "@/data-provider/types";
 import { useSlugRoutes } from "@/hooks/useSlugParams";
 import NewThreadBtn from "./new-thread-btn";
 import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { threadAtom } from "@/store";
 
 export default function Navbar() {
   const { data: threadsData, isLoading: threadsLoading } =
     useGetMyThreads(true);
 
   const [filteredThreads, setFilteredThreads] = useState(threadsData || {});
-  const [open, setOpen] = useState(false);
+  const [isNavbarOpen] = useAtom(threadAtom);
+  // const [open, setOpen] = useState(false);
 
   const router = useRouter()
 
@@ -48,21 +51,19 @@ export default function Navbar() {
     };
 
   return (
-    <div className="flex h-full border-2">
-      {/* Container */}
       <div
-        className={cn("flex flex-col m-3", open ? "w-72" : "w-0 collapse m-0")}
+        className={cn(isNavbarOpen ? "flex h-full border-2 flex-col items-center gap-y-2 p-4" : "w-0 collapse")}
       >
         {!threadsLoading && <NewThreadBtn handleClick={onNewThreadClick} disabled={!threadId} />}
         {!threadsLoading && Object.values(filteredThreads).every((value) => value.length === 0) && (
-          <div className="border border-2 flex flex-col items-center justify-center">
+          <div className="flex flex-col items-center justify-center w-64">
             <h1>No threads found.</h1>
           </div>
         )}
         <nav className="overflow-y-auto">
           {/* Threads loading */}
           {threadsLoading ? (
-            <div className="flex flex-col items-center justify-center h-full">
+            <div className="flex flex-col items-center justify-center h-full w-64">
               <Spinner />
               <p className="mt-3">Loading threads... </p>
             </div>
@@ -71,7 +72,7 @@ export default function Navbar() {
               // @ts-ignore
               if (threads && threads.length > 0) {
                 return (
-                  <div key={groupName}>
+                  <div key={groupName} className="w-64">
                     <h2 className="m-3 text-gray-400">{groupName}</h2>
                     {/* @ts-ignore */}
                     {threads?.map((thread) => (
@@ -85,15 +86,5 @@ export default function Navbar() {
           )}
         </nav>
       </div>
-
-      {/* Toggle Sidebar */}
-      <div className="self-center hover:cursor-pointer p-1">
-        {open ? (
-          <ChevronLeft onClick={() => setOpen(false)} color="#000" />
-        ) : (
-          <ChevronRight onClick={() => setOpen(true)} color="#000" />
-        )}
-      </div>
-    </div>
   );
 }

ui/src/components/features/navbar/components/new-thread-btn.tsx

@@ -8,7 +8,7 @@ type TNewThreadBtnProps = {
 
 export default function NewThreadBtn({ handleClick, disabled }: TNewThreadBtnProps) {
   return (
-    <Button onClick={handleClick} className="p-6 w-[calc(100%-20px)] mb-4" disabled={disabled}>
+    <Button onClick={handleClick} className="p-6 w-[calc(100%-20px)]" disabled={disabled}>
       <a className="flex gap-x-2 items-center">
         <PlusSquareIcon />
         <span>New thread</span>

ui/src/store.ts

@@ -1,4 +1,5 @@
 import { atom } from 'jotai'
 import { TMessage } from './data-provider/types'
 
-export const messagesAtom = atom<TMessage[]>([]);
+export const messagesAtom = atom<TMessage[]>([]);
+export const threadAtom = atom<boolean>(false);