Update Theme

src/ChatInput.tsx

@@ -92,43 +92,46 @@ export const ChatInput: FC<ChatInputProps> = ({
         placeholder={placeholder}
         disabled={isLoading || disabled}
       />
-      {allowedFiles?.length > 0 && (
-        <>
-          <input
-            type="file"
-            ref={fileInputRef}
-            className="hidden"
-            accept={allowedFiles.join(',')}
-            onChange={handleFileUpload}
-          />
+      <div className={cn(theme.input.actions.base)}>
+        {allowedFiles?.length > 0 && (
+          <>
+            <input
+              type="file"
+              ref={fileInputRef}
+              className="hidden"
+              accept={allowedFiles.join(',')}
+              onChange={handleFileUpload}
+            />
+            <Button
+              title="Upload"
+              variant="text"
+              disabled={isLoading || disabled}
+              className={cn(theme.input.upload)}
+              onClick={() => fileInputRef.current?.click()}
+            >
+              {attachIcon}
+            </Button>
+          </>
+        )}
+        {isLoading && (
           <Button
-            title="Upload"
-            disabled={isLoading || disabled}
-            className={cn(theme.input.upload)}
-            onClick={() => fileInputRef.current?.click()}
+            title="Stop"
+            className={cn(theme.input.actions.stop)}
+            onClick={stopMessage}
+            disabled={disabled}
           >
-            {attachIcon}
+            {stopIcon}
           </Button>
-        </>
-      )}
-      {isLoading && (
+        )}
         <Button
-          title="Stop"
-          className={cn(theme.input.stop)}
-          onClick={stopMessage}
-          disabled={disabled}
+          title="Send"
+          className={cn(theme.input.actions.send)}
+          onClick={handleSendMessage}
+          disabled={isLoading || disabled}
         >
-          {stopIcon}
+          {sendIcon}
         </Button>
-      )}
-      <Button
-        title="Send"
-        className={cn(theme.input.send)}
-        onClick={handleSendMessage}
-        disabled={isLoading || disabled}
-      >
-        {sendIcon}
-      </Button>
+      </div>
     </div>
   );
 };

src/SessionMessages/SessionMessage/SessionMessage.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren, useContext } from 'react';
 import { ChatContext } from '@/ChatContext';
-import { Card, cn } from 'reablocks';
+import { Card, cn, Divider } from 'reablocks';
 import CopyIcon from '@/assets/copy.svg?react';
 import ThumbsDownIcon from '@/assets/thumbs-down.svg?react';
 import ThumbUpIcon from '@/assets/thumbs-up.svg?react';
@@ -69,6 +69,7 @@ export const SessionMessage: FC<SessionMessageProps> = ({
           </>
         )}
       </Card>
+      <Divider />
     </motion.div>
   );
 };

src/SessionsList/NewSessionButton.tsx

@@ -1,32 +1,44 @@
-import { Button, cn } from 'reablocks';
+import { Button, cn, Divider } from 'reablocks';
 import { FC, PropsWithChildren, ReactNode, useContext } from 'react';
 import { ChatContext } from '@/ChatContext';
 import { Slot } from '@radix-ui/react-slot';
 
+import PlusIcon from '@/assets/plus.svg?react';
+
 interface NewSessionButtonProps extends PropsWithChildren {
   /**
    * Text for the new session button.
    */
   newSessionText?: string | ReactNode;
+
+  /**
+   * Divider to render between the new session button and SessionsGroup.
+   */
+  divider?: ReactNode;
 }
 
 export const NewSessionButton: FC<NewSessionButtonProps> = ({
   children,
-  newSessionText = 'New Session'
+  newSessionText = 'New Session',
+  divider = <Divider variant="secondary" />
 }) => {
   const { theme, createSession, disabled } = useContext(ChatContext);
   const Comp = children ? Slot : Button;
 
   return (
-    <Comp
-      fullWidth
-      disableMargins
-      color="primary"
-      className={cn(theme.sessions.create)}
-      disabled={disabled}
-      onClick={createSession}
-    >
-      {children || newSessionText}
-    </Comp>
+    <>
+      <Comp
+        fullWidth
+        disableMargins
+        color="primary"
+        startAdornment={<PlusIcon />}
+        className={cn(theme.sessions.create)}
+        disabled={disabled}
+        onClick={createSession}
+      >
+        {children || newSessionText}
+      </Comp>
+      {divider}
+    </>
   );
 };

src/SessionsList/SessionListItem.tsx

@@ -21,6 +21,11 @@ export interface SessionListItemProps extends PropsWithChildren {
    */
   deleteIcon?: ReactElement;
 
+  /**
+   * Icon to show for chat.
+   */
+  chatIcon?: ReactElement;
+
   /**
    * Limit for the ellipsis.
    */
@@ -32,7 +37,8 @@ export const SessionListItem: FC<SessionListItemProps> = ({
   session,
   deletable = true,
   limit = 100,
-  deleteIcon = <TrashIcon />
+  deleteIcon = <TrashIcon />,
+  chatIcon
 }) => {
   const { activeSessionId, selectSession, deleteSession, theme } =
     useContext(ChatContext);
@@ -47,6 +53,7 @@ export const SessionListItem: FC<SessionListItemProps> = ({
         [theme.sessions.session.active]: session.id === activeSessionId
       })}
       onClick={() => selectSession?.(session.id)}
+      start={chatIcon}
       end={
         <>
           {deletable && (

src/SessionsList/SessionsGroup.tsx

@@ -1,17 +1,23 @@
 import { FC, PropsWithChildren, ReactNode, useContext } from 'react';
 import { ChatContext } from '@/ChatContext';
-import { ListItem, cn } from 'reablocks';
+import { Divider, ListItem, cn } from 'reablocks';
 
 interface SessionsGroupProps extends PropsWithChildren {
   /**
    * Heading for the session group.
    */
   heading?: string | ReactNode;
+
+  /**
+   * Divider to render between the children.
+   */
+  divider?: ReactNode;
 }
 
 export const SessionsGroup: FC<SessionsGroupProps> = ({
   heading,
-  children
+  children,
+  divider = <Divider variant="secondary" />
 }) => {
   const { theme } = useContext(ChatContext);
   return (
@@ -26,6 +32,7 @@ export const SessionsGroup: FC<SessionsGroupProps> = ({
         </ListItem>
       )}
       {children}
+      {divider}
     </>
   );
 };

src/theme.ts

@@ -72,8 +72,11 @@ export interface ChatTheme {
     base: string;
     upload: string;
     input: string;
-    send: string;
-    stop: string;
+    actions: {
+      base: string;
+      send: string;
+      stop: string;
+    };
   };
 }
 
@@ -84,13 +87,14 @@ export const chatTheme: ChatTheme = {
   empty: 'text-center flex-1',
   sessions: {
     base: 'overflow-auto',
-    console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded',
+    console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl',
     companion: 'w-full h-full',
-    group: 'text-xs text-gray-400 mt-4',
-    create: 'mb-4',
+    group: 'text-xs text-gray-400 mt-4 hover:bg-transparent mb-1',
+    create: 'mb-4 rounded-[10px]',
     session: {
-      base: '',
-      active: ' text-primary',
+      base: 'my-1 rounded-[10px] p-2 text-typography hover:bg-gray-800/50 border border-transparent hover:border-gray-700/50',
+      active:
+        'bg-gray-800/70 border border-gray-700/70 hover:bg-gray-800/50 border-gray-700/50 text-white',
       delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-50'
     }
   },
@@ -106,8 +110,9 @@ export const chatTheme: ChatTheme = {
     header: 'flex justify-between items-start gap-2',
     showMore: 'mb-4',
     message: {
-      base: 'mb-6 flex flex-col p-5 rounded',
-      question: 'font-semibold text-gray-400 mb-1',
+      base: 'mt-4 mb-4 flex flex-col p-0 rounded border-none',
+      question:
+        'font-semibold text-gray-400 mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography bg-gray-900/60 border border-gray-700/50',
       response: '',
       cursor: 'inline-block w-1 h-4 bg-current',
       files: {
@@ -139,19 +144,26 @@ export const chatTheme: ChatTheme = {
         ol: 'mb-4 list-decimal'
       },
       footer: {
-        base: 'mt-3 flex gap-3',
-        copy: '[&>svg]:w-4 [&>svg]:h-4 opacity-50',
-        upvote: '[&>svg]:w-4 [&>svg]:h-4 opacity-50',
-        downvote: '[&>svg]:w-4 [&>svg]:h-4 opacity-50',
-        refresh: '[&>svg]:w-4 [&>svg]:h-4 opacity-50'
+        base: 'mt-3 flex gap-1.5',
+        copy: 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white',
+        upvote:
+          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white',
+        downvote:
+          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white',
+        refresh:
+          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white'
       }
     }
   },
   input: {
-    base: 'flex mt-4',
-    upload: 'px-4 py-2 text-white',
-    input: 'w-full',
-    send: 'px-4 py-2 text-white',
-    stop: 'px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700'
+    base: 'flex mt-4 relative',
+    upload: 'px-5 py-2 text-white size-10',
+    input:
+      'w-full text-typography border border-gray-700/70 rounded-3xl px-3 py-2 pr-16 after:!mx-10',
+    actions: {
+      base: 'absolute flex gap-2 items-center right-5 top-[50%] -translate-y-1/2 z-10',
+      send: 'px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ',
+      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '
+    }
   }
 };