Update exports in react-core and enhance styles in react-ui components [TH-1501]

js/packages/react-core/src/index.ts

@@ -7,7 +7,7 @@ export { useThreadListState } from "./hooks/useThreadListState";
 export { useThreadManagerSelector } from "./hooks/useThreadManagerSelector";
 export { useThreadState } from "./hooks/useThreadState";
 export { processStreamedMessage } from "./stream/processStreamedMessage";
-export { UseThreadListManagerParams, useThreadListManager } from "./useThreadListManager";
-export { UseThreadManagerParams, useThreadManager } from "./useThreadManager";
+export { useThreadListManager, type UseThreadListManagerParams } from "./useThreadListManager";
+export { useThreadManager, type UseThreadManagerParams } from "./useThreadManager";
 
 export * from "./types";

js/packages/react-ui/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@crayonai/react-ui",
   "license": "MIT",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "Component library for Generative UI SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

js/packages/react-ui/src/components/BottomTray/Container.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import { LayoutContextProvider } from "../../context/LayoutContext";
+import { ShellStoreProvider } from "../Shell/store";
+
+interface ContainerProps {
+  children?: React.ReactNode;
+  logoUrl: string;
+  agentName: string;
+  className?: string;
+  /** Control the open state of the tray */
+  isOpen?: boolean;
+}
+
+export const Container = ({
+  children,
+  logoUrl,
+  agentName,
+  className,
+  isOpen = false,
+}: ContainerProps) => {
+  return (
+    <ShellStoreProvider logoUrl={logoUrl} agentName={agentName}>
+      <LayoutContextProvider layout="tray">
+        <div
+          className={clsx(
+            "crayon-bottom-tray-container",
+            {
+              "crayon-bottom-tray-container--open": isOpen,
+              "crayon-bottom-tray-container--closed": !isOpen,
+            },
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </LayoutContextProvider>
+    </ShellStoreProvider>
+  );
+};

js/packages/react-ui/src/components/BottomTray/Header.tsx

@@ -0,0 +1,72 @@
+import { useThreadListActions } from "@crayonai/react-core";
+import clsx from "clsx";
+import { SquarePen, X } from "lucide-react";
+import { ReactNode } from "react";
+import { IconButton } from "../IconButton";
+import { useShellStore } from "../Shell/store";
+import { ThreadListContainer } from "./ThreadListContainer";
+
+export const BottomTrayNewChatButton = () => {
+  const { switchToNewThread } = useThreadListActions();
+
+  return (
+    <IconButton
+      icon={<SquarePen size="1em" />}
+      onClick={switchToNewThread}
+      variant="tertiary"
+      aria-label="New chat"
+      className="crayon-bottom-tray-header-new-chat-button"
+    />
+  );
+};
+
+interface HeaderProps {
+  className?: string;
+  /** Custom content to render on the rightmost side of the logo container */
+  rightChildren?: ReactNode;
+  /** Callback when minimize button is clicked */
+  onMinimize?: () => void;
+  /** Hide the minimize button */
+  hideMinimizeButton?: boolean;
+  /** Custom new chat button */
+  hideNewChatButton?: boolean;
+  /** Hide the thread list container */
+  hideThreadListContainer?: boolean;
+}
+
+export const Header = ({
+  className,
+  rightChildren,
+  onMinimize,
+  hideMinimizeButton = false,
+  hideNewChatButton = false,
+  hideThreadListContainer = false,
+}: HeaderProps) => {
+  const { logoUrl, agentName } = useShellStore((state) => ({
+    logoUrl: state.logoUrl,
+    agentName: state.agentName,
+  }));
+
+  return (
+    <div className={clsx("crayon-bottom-tray-header", className)}>
+      <div className="crayon-bottom-tray-header-logo-container">
+        <img className="crayon-bottom-tray-header-logo" src={logoUrl} alt="Logo" />
+        <span className="crayon-bottom-tray-header-agent-name">{agentName}</span>
+      </div>
+      <div className="crayon-bottom-tray-header-actions">
+        {rightChildren}
+        {!hideThreadListContainer && <ThreadListContainer />}
+        {!hideNewChatButton && <BottomTrayNewChatButton />}
+        {!hideMinimizeButton && onMinimize && (
+          <IconButton
+            icon={<X size="1em" />}
+            onClick={onMinimize}
+            variant="tertiary"
+            aria-label="Minimize chat"
+            className="crayon-bottom-tray-header-minimize"
+          />
+        )}
+      </div>
+    </div>
+  );
+};