Companion mode

package.json

@@ -44,10 +44,15 @@
     "reablocks": "^8.4.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
+    "react-use": "^17.5.1",
     "reakeys": "^2.0.3",
     "remark-gfm": "^4.0.0",
     "remark-youtube": "^1.3.2"
   },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "devDependencies": {
     "@storybook/addon-docs": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.6",
@@ -82,9 +87,7 @@
     "postcss-nested": "^6.0.1",
     "postcss-preset-env": "^9.5.2",
     "prettier": "^3.2.5",
-    "react": "^18.0.0",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.0.0",
     "react-hook-form": "^7.51.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "storybook": "^8.2.6",

src/Chat.tsx

@@ -13,6 +13,8 @@ import { Session } from './types';
 import { ChatTheme, chatTheme } from './theme';
 import { ChatContext } from './ChatContext';
 import { PluggableList } from 'react-markdown/lib';
+import { useMeasure } from 'react-use';
+import { AnimatePresence } from 'framer-motion';
 
 export interface ChatProps extends PropsWithChildren {
   /**
@@ -97,6 +99,11 @@ export const Chat: FC<ChatProps> = ({
   const [internalActiveSessionID, setInternalActiveSessionID] = useState<
     string | undefined
   >(activeSessionId);
+  const [ref, { width }] = useMeasure();
+  const isCompact = useMemo(
+    () => viewType === 'companion' || (width && width < 767),
+    [viewType, width]
+  );
 
   useEffect(() => {
     setInternalActiveSessionID(activeSessionId);
@@ -148,13 +155,15 @@ export const Chat: FC<ChatProps> = ({
       theme,
       disabled,
       isLoading,
+      isCompact,
       activeSessionId: internalActiveSessionID,
       selectSession: handleSelectSession,
       deleteSession: handleDeleteSession,
       createSession: handleCreateNewSession
     }),
     [
       isLoading,
+      isCompact,
       disabled,
       theme,
       remarkPlugins,
@@ -169,15 +178,18 @@ export const Chat: FC<ChatProps> = ({
 
   return (
     <ChatContext.Provider value={contextValue}>
-      <div
-        className={cn(className, theme.base, {
-          [theme.companion]: viewType === 'companion',
-          [theme.console]: viewType === 'console'
-        })}
-        style={style}
-      >
-        {children}
-      </div>
+      <AnimatePresence initial={false}>
+        <div
+          ref={ref}
+          className={cn(className, theme.base, {
+            [theme.companion]: isCompact,
+            [theme.console]: !isCompact
+          })}
+          style={style}
+        >
+          {children}
+        </div>
+      </AnimatePresence>
     </ChatContext.Provider>
   );
 };

src/ChatContext.ts

@@ -9,6 +9,7 @@ export interface ChatContextProps {
   activeSessionId: string | null;
   theme?: ChatTheme;
   isLoading?: boolean;
+  isCompact?: boolean;
   activeSession?: Session | null;
   remarkPlugins?: PluggableList[];
   selectSession?: (sessionId: string) => void;

src/SessionMessages/SessionMessagePanel.tsx

@@ -1,13 +1,38 @@
 import { FC, PropsWithChildren, useContext } from 'react';
-import { cn } from 'reablocks';
+import { Button, cn } from 'reablocks';
 import { ChatContext } from '@/ChatContext';
+import { motion } from 'framer-motion';
 
 export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
-  const { theme } = useContext(ChatContext);
+  const { activeSessionId, theme, isCompact, selectSession } =
+    useContext(ChatContext);
+  const isVisible = isCompact && activeSessionId;
 
   return (
-    <div className={cn(theme.messages.base)}>
-      <div className="flex-1 h-full flex flex-col">{children}</div>
-    </div>
+    (!isCompact || isVisible) && (
+      <motion.div
+        initial={{ translateX: '200%' }}
+        animate={{ translateX: '0%' }}
+        exit={{ translateX: '200%' }}
+        className={cn(theme.messages.base, {
+          [theme.messages.companion]: isCompact,
+          [theme.messages.console]: !isCompact
+        })}
+      >
+        <div className={cn(theme.messages.inner)}>
+          {isCompact && (
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => selectSession(null)}
+              className={cn(theme.messages.back)}
+            >
+              Back
+            </Button>
+          )}
+          {children}
+        </div>
+      </motion.div>
+    )
   );
 };

src/SessionMessages/SessionMessages.tsx

@@ -49,7 +49,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
   limit = 10,
   showMoreText = 'Show more'
 }) => {
-  const { activeSession, theme, isLoading } = useContext(ChatContext);
+  const { activeSession, theme } = useContext(ChatContext);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const [isAnimating, setIsAnimating] = useState(true);
 

src/SessionsList/SessionsList.tsx

@@ -1,9 +1,25 @@
 import { FC, PropsWithChildren, useContext } from 'react';
 import { List, cn } from 'reablocks';
 import { ChatContext } from '@/ChatContext';
+import { motion } from 'framer-motion';
 
 export const SessionsList: FC<PropsWithChildren> = ({ children }) => {
-  const { theme } = useContext(ChatContext);
+  const { theme, isCompact, activeSessionId } = useContext(ChatContext);
+  const isVisible = isCompact && !activeSessionId;
 
-  return <List className={cn(theme.sessions.base)}>{children}</List>;
+  return (
+    (!isCompact || isVisible) && (
+      <motion.div
+        initial={{ translateX: '-100%' }}
+        animate={{ translateX: '0%' }}
+        exit={{ translateX: '-100%' }}
+        className={cn(theme.sessions.base, {
+          [theme.sessions.companion]: isCompact,
+          [theme.sessions.console]: !isCompact
+        })}
+      >
+        <List>{children}</List>
+      </motion.div>
+    )
+  );
 };

src/theme.ts

@@ -5,6 +5,8 @@ export interface ChatTheme {
   empty: string;
   sessions: {
     base: string;
+    console: string;
+    companion: string;
     create: string;
     group: string;
     session: {
@@ -15,6 +17,10 @@ export interface ChatTheme {
   };
   messages: {
     base: string;
+    console: string;
+    companion: string;
+    back: string;
+    inner: string;
     title: string;
     date: string;
     content: string;
@@ -74,10 +80,12 @@ export interface ChatTheme {
 export const chatTheme: ChatTheme = {
   base: 'text-white',
   console: 'flex w-full gap-5 h-full',
-  companion: 'p-4',
+  companion: 'w-full h-full overflow-hidden',
   empty: 'text-center flex-1',
   sessions: {
-    base: 'overflow-auto min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded',
+    base: 'overflow-auto',
+    console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded',
+    companion: 'w-full h-full',
     group: 'text-xs text-gray-400 mt-4',
     create: 'mb-4',
     session: {
@@ -87,7 +95,11 @@ export const chatTheme: ChatTheme = {
     }
   },
   messages: {
-    base: 'flex flex-col flex-1 overflow-hidden',
+    base: '',
+    console: 'flex flex-col flex-1 overflow-hidden',
+    companion: 'flex w-full h-full',
+    back: 'self-start p-0 my-2',
+    inner: 'flex-1 h-full flex flex-col',
     title: 'text-2xl font-bold',
     date: 'text-sm whitespace-nowrap pt-2',
     content: 'mt-2 flex-1 overflow-auto',
@@ -99,14 +111,14 @@ export const chatTheme: ChatTheme = {
       response: '',
       cursor: 'inline-block w-1 h-4 bg-current',
       files: {
-        base: 'mb-2 flex gap-3',
+        base: 'mb-2 flex flex-wrap gap-3 ',
         file: {
-          base: 'flex gap-2 border border-gray-700 p-2 rounded cursor-pointer',
+          base: 'flex items-center gap-2 border border-gray-700 p-2 rounded cursor-pointer',
           name: 'text-sm'
         }
       },
       sources: {
-        base: 'my-4 flex gap-3',
+        base: 'my-4 flex flex-wrap gap-3',
         source: {
           base: 'flex gap-2 border border-gray-700 p-2 rounded cursor-pointer',
           image: 'w-6 h-6 rounded-md',