feat(header):Add header component and cleanup (#45)

* feat(header):Add header component and cleanup

- Add optional header component with flexible content sections

- Move logo to dedicated assets directory for better organization

- Fix types import warning for better type safety

- Add Storybook documentation and examples

* Add Support for other options too

* Change name to AppBar and export Props

* rm header

* Change 3 part content to singular content, adjust theme

.storybook/theme.ts

@@ -1,5 +1,5 @@
 import { create } from '@storybook/theming/create';
-import ReachatLogo from './logo.svg';
+import ReachatLogo from '../src/assets/logo/logo.svg?react';
 
 export default create({
   base: 'dark',

package.json

@@ -27,9 +27,9 @@
   "source": "src/index.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.umd.cjs"
     },
     "./docs.json": "./dist/docs.json",
     "./index.css": "./dist/index.css"

src/AppBar/AppBar.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode, FC, useContext } from 'react';
+import { cn } from 'reablocks';
+import { ChatContext } from '../ChatContext';
+
+export interface AppBarProps {
+  /**
+   * Content to display in the header
+   */
+  content?: ReactNode;
+}
+
+export const AppBar: FC<AppBarProps> = ({ content }) => {
+  const { theme } = useContext(ChatContext);
+
+  return <div className={cn(theme?.header)}>{content}</div>;
+};

src/AppBar/index.ts

@@ -0,0 +1 @@
+export * from './AppBar';

src/index.ts

@@ -6,3 +6,4 @@ export * from './types';
 export * from './theme';
 export * from './Markdown';
 export * from './ChatContext';
+export * from './AppBar';

src/theme.ts

@@ -3,6 +3,7 @@ export interface ChatTheme {
   console: string;
   companion: string;
   empty: string;
+  header: string;
   sessions: {
     base: string;
     console: string;
@@ -89,6 +90,7 @@ export const chatTheme: ChatTheme = {
   console: 'flex w-full gap-4 h-full',
   companion: 'w-full h-full overflow-hidden',
   empty: 'text-center flex-1',
+  header: 'pb-10',
   sessions: {
     base: 'overflow-auto',
     console:
@@ -132,7 +134,10 @@ export const chatTheme: ChatTheme = {
         'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',
         'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'
       ].join(' '),
-      response: ['relative data-[compact=false]:px-4 text-gray-900', 'dark:text-gray-100'].join(' '),
+      response: [
+        'relative data-[compact=false]:px-4 text-gray-900',
+        'dark:text-gray-100'
+      ].join(' '),
       overlay: `overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200`,
       cursor: 'inline-block w-1 h-4 bg-current',
       expand: 'absolute bottom-1 right-1 z-10',
@@ -167,7 +172,8 @@ export const chatTheme: ChatTheme = {
         th: 'px-4 py-2 text-left font-bold border-b border-gray-500',
         td: 'px-4 py-2',
         code: 'm-2 rounded-b relative',
-        toolbar: 'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',
+        toolbar:
+          'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',
         li: 'mb-2 ml-6',
         ul: 'mb-4 list-disc',
         ol: 'mb-4 list-decimal'

stories/Chat.stories.tsx

@@ -5,7 +5,8 @@ import {
   ChatInput,
   SessionMessagePanel,
   SessionMessage,
-  Session
+  Session,
+  AppBar
 } from '../src';
 import {
   fakeSessions,
@@ -15,6 +16,10 @@ import {
 import { useState } from 'react';
 import Placeholder from '@/assets/placeholder.svg?react';
 import PlaceholderDark from '@/assets/placeholder-dark.svg?react';
+import ReachatLogo from '@/assets/logo/logo.svg?react';
+import IconSearch from '@/assets/search.svg?react';
+import IconClose from '@/assets/close-fill.svg?react';
+import { IconButton } from 'reablocks';
 
 export default {
   title: 'Demos/Chat',
@@ -185,3 +190,76 @@ export const Empty = () => {
     </div>
   );
 };
+
+export const WithAppBar = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>([
+    ...fakeSessions,
+    ...sessionsWithFiles,
+    ...sessionWithSources
+  ]);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        width: 800,
+        height: 600,
+        padding: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onNewSession={() => {
+          const newId = (sessions.length + 1).toLocaleString();
+          setSessions([
+            ...sessions,
+            {
+              id: newId,
+              title: `New Session #${newId}`,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: []
+            }
+          ]);
+          setActiveId(newId);
+        }}
+        onSelectSession={setActiveId}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <div className="flex flex-col h-full">
+          <AppBar 
+            content={
+              <div className="flex items-center justify-between w-full">
+                <div className="flex-shrink-0">
+                  <IconButton size="small" variant="outline" className='rounded-full p-3'>
+                    <IconSearch className='w-4 h-4' />
+                  </IconButton>
+                </div>
+                <div className="flex-grow flex justify-center items-center">
+                  <ReachatLogo className="h-6 w-auto" />
+                </div>
+                <div className="flex-shrink-0">
+                  <IconButton
+                    variant="text"
+                    size="small"
+                    className='rounded-full p-3'
+                  >
+                    <IconClose className='w-4 h-4' />
+                  </IconButton>
+                </div>
+              </div>
+            }
+          />
+          <SessionMessagePanel>
+            <SessionMessages />
+            <ChatInput />
+          </SessionMessagePanel>
+        </div>
+      </Chat>
+    </div>
+  );
+};

stories/Companion.stories.tsx

@@ -8,17 +8,22 @@ import {
   ChatInput,
   SessionMessagePanel,
   SessionMessagesHeader,
-  Session
+  Session,
+  AppBar
 } from '../src';
 import {
   fakeSessions,
   sessionWithSources,
   sessionsWithFiles
 } from './examples';
 import { useState } from 'react';
+import { IconButton } from 'reablocks';
 
 import Placeholder from '@/assets/placeholder.svg?react';
 import PlaceholderDark from '@/assets/placeholder-dark.svg?react';
+import ReachatLogo from '@/assets/logo/logo.svg?react';
+import IconSearch from '@/assets/search.svg?react';
+import IconClose from '@/assets/close-fill.svg?react';
 
 export default {
   title: 'Demos/Companion',
@@ -116,3 +121,78 @@ export const Empty = () => {
     </div>
   );
 };
+
+export const WithAppBar = () => {
+  const [activeId, setActiveId] = useState<string>();
+  const [sessions, setSessions] = useState<Session[]>([
+    ...fakeSessions,
+    ...sessionsWithFiles,
+    ...sessionWithSources
+  ]);
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        width: 350,
+        height: 500,
+        padding: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="companion"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onNewSession={() => {
+          const newId = (sessions.length + 1).toLocaleString();
+          setSessions([
+            ...sessions,
+            {
+              id: newId,
+              title: `New Session #${newId}`,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: []
+            }
+          ]);
+          setActiveId(newId);
+        }}
+        onSelectSession={setActiveId}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <AppBar 
+          content={
+            <div className="flex items-center justify-between w-full">
+              <div className="flex-shrink-0">
+                <IconButton size="small" variant="outline" className='rounded-full p-3'>
+                  <IconSearch className='w-4 h-4' />
+                </IconButton>
+              </div>
+              <div className="flex-grow flex justify-center items-center">
+                <ReachatLogo className="h-6 w-auto" />
+              </div>
+              <div className="flex-shrink-0">
+                <IconButton
+                  variant="text"
+                  size="small"
+                  className='rounded-full p-3'
+                >
+                  <IconClose className='w-4 h-4' />
+                </IconButton>
+              </div>
+            </div>
+          }
+        />
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};

stories/Console.stories.tsx

@@ -16,7 +16,7 @@ import {
   SessionMessagesHeader,
   ChatContext,
   SessionMessage,
-  Conversation
+  AppBar
 } from '../src';
 import {
   Card,
@@ -46,6 +46,9 @@ import {
   sessionsWithPartialConversation,
   sessionWithCSVFiles
 } from './examples';
+import ReachatLogo from '@/assets/logo/logo.svg?react';
+import IconSearch from '@/assets/search.svg?react';
+import IconClose from '@/assets/close-fill.svg?react';
 
 export default {
   title: 'Demos/Console',