companion almost

src/SessionMessages/MessageFiles.tsx

@@ -1,7 +1,7 @@
 import { ChatContext } from '@/ChatContext';
 import { ConversationFile } from '@/types';
 import { cn } from 'reablocks';
-import { FC, PropsWithChildren, ReactNode, useContext } from 'react';
+import { FC, PropsWithChildren, useContext } from 'react';
 import { MessageFile } from './MessageFile';
 import { Slot } from '@radix-ui/react-slot';
 

src/SessionMessages/MessageQuestion.tsx

@@ -1,7 +1,7 @@
 import { ChatContext } from '@/ChatContext';
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from 'reablocks';
-import { FC, PropsWithChildren, ReactNode, useContext } from 'react';
+import { FC, PropsWithChildren, useContext } from 'react';
 import { Markdown } from '@/Markdown';
 import { PluggableList } from 'react-markdown/lib';
 import remarkGfm from 'remark-gfm';

src/SessionMessages/SessionMessage.tsx

@@ -22,7 +22,7 @@ const messageVariants = {
     opacity: 1,
     y: 0,
     transition: {
-      duration: 0.4
+      duration: 0.3
     }
   }
 };

src/SessionMessages/SessionMessagePanel.tsx

@@ -2,6 +2,7 @@ import { FC, PropsWithChildren, useContext } from 'react';
 import { Button, cn } from 'reablocks';
 import { ChatContext } from '@/ChatContext';
 import { motion } from 'framer-motion';
+import BackIcon from '@/assets/back.svg?react';
 
 export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
   const { activeSessionId, theme, isCompact, selectSession } =
@@ -12,7 +13,15 @@ export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
     (!isCompact || isVisible) && (
       <motion.div
         initial={{ translateX: '200%' }}
-        animate={{ translateX: '0%' }}
+        animate={{
+          translateX: '0%',
+          transition: {
+            type: 'tween',
+            ease: 'linear',
+            duration: 0.2,
+            when: 'beforeChildren'
+          }
+        }}
         exit={{ translateX: '200%' }}
         className={cn(theme.messages.base, {
           [theme.messages.companion]: isCompact,
@@ -27,7 +36,8 @@ export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
               onClick={() => selectSession(null)}
               className={cn(theme.messages.back)}
             >
-              Back
+              <BackIcon />
+               Back
             </Button>
           )}
           {children}

src/SessionMessages/SessionMessages.tsx

@@ -16,7 +16,8 @@ const containerVariants = {
   hidden: {},
   visible: {
     transition: {
-      staggerChildren: 0.07
+      staggerChildren: 0.07,
+      when: 'beforeChildren'
     }
   }
 };

src/SessionsList/SessionsList.tsx

@@ -11,7 +11,15 @@ export const SessionsList: FC<PropsWithChildren> = ({ children }) => {
     (!isCompact || isVisible) && (
       <motion.div
         initial={{ translateX: '-100%' }}
-        animate={{ translateX: '0%' }}
+        animate={{
+          translateX: '0%',
+          transition: {
+            type: 'tween',
+            ease: 'linear',
+            duration: 0.2,
+            when: 'beforeChildren'
+          }
+        }}
         exit={{ translateX: '-100%' }}
         className={cn(theme.sessions.base, {
           [theme.sessions.companion]: isCompact,

stories/Demos.stories.tsx

@@ -154,10 +154,11 @@ export const Companion = () => {
   return (
     <div
       style={{
-        border: '1px solid blue',
         width: 350,
         height: 500,
-        padding: 16
+        padding: 20,
+        background: '#02020F',
+        borderRadius: 5
       }}
     >
       <Chat