feat(chat history): export a method to render just the chat history

src/components/ChatHistory/ChatHistory.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex } from "@radix-ui/themes";
+import { Flex, Button } from "@radix-ui/themes";
 import { ScrollArea } from "../ScrollArea";
 import { HistoryItem } from "./HistoryItem";
 import type { ChatHistoryItem } from "../../hooks/useChatHistory";
@@ -8,25 +8,37 @@ export type ChatHistoryProps = {
   history: ChatHistoryItem[];
   onHistoryItemClick: (id: string) => void;
   onDeleteHistoryItem: (id: string) => void;
+  onOpenChatInTab?: (id: string) => void;
+  onCreateNewChat: () => void;
 };
 
 export const ChatHistory: React.FC<ChatHistoryProps> = ({
   history,
   onHistoryItemClick,
   onDeleteHistoryItem,
+  onOpenChatInTab,
+  onCreateNewChat,
 }) => {
   return (
-    <ScrollArea scrollbars="vertical">
-      <Flex justify="center" align="center" pb="2" mr="1" direction="column">
-        {history.map((chat) => (
-          <HistoryItem
-            onClick={onHistoryItemClick}
-            onDelete={onDeleteHistoryItem}
-            key={chat.id}
-            chat={chat}
-          />
-        ))}
+    <>
+      <Flex mt="4" mb="4">
+        <Button variant="outline" ml="auto" mr="auto" onClick={onCreateNewChat}>
+          Start a new chat
+        </Button>
       </Flex>
-    </ScrollArea>
+      <ScrollArea scrollbars="vertical">
+        <Flex justify="center" align="center" pb="2" mr="1" direction="column">
+          {history.map((chat) => (
+            <HistoryItem
+              onClick={onHistoryItemClick}
+              onOpenInTab={onOpenChatInTab}
+              onDelete={onDeleteHistoryItem}
+              key={chat.id}
+              chat={chat}
+            />
+          ))}
+        </Flex>
+      </ScrollArea>
+    </>
   );
 };

src/components/ChatHistory/HistoryItem.tsx

@@ -3,18 +3,21 @@ import { Card, Flex, Text, Box } from "@radix-ui/themes";
 import type { ChatHistoryItem } from "../../hooks/useChatHistory";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
 import { CloseButton } from "../Buttons/Buttons";
+import { IconButton } from "@radix-ui/themes";
+import { OpenInNewWindowIcon } from "@radix-ui/react-icons";
 
 export const HistoryItem: React.FC<{
   chat: ChatHistoryItem;
   onClick: (id: string) => void;
   onDelete: (id: string) => void;
-}> = ({ chat, onClick, onDelete }) => {
+  onOpenInTab?: (id: string) => void;
+}> = ({ chat, onClick, onDelete, onOpenInTab }) => {
   const dateCreated = new Date(chat.createdAt);
   const dateTimeString = dateCreated.toLocaleString();
   return (
-    <Box style={{ position: "relative" }}>
+    <Box style={{ position: "relative", width: "100%" }}>
       <Card
-        style={{ width: "240px", marginBottom: "2px" }}
+        style={{ width: "100%", marginBottom: "2px" }}
         variant="surface"
         className="rt-Button"
         asChild
@@ -56,22 +59,46 @@ export const HistoryItem: React.FC<{
       </Card>
 
       {/**TODO: open in tab button */}
-      <CloseButton
-        size="1"
-        // needs to be smaller
+      <Flex
         style={{
           position: "absolute",
           right: "6px",
           top: "6px",
         }}
-        onClick={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          onDelete(chat.id);
-        }}
-        iconSize={10}
-        title="delete chat"
-      />
+        gap="1"
+        justify="end"
+        align="center"
+        // justify to flex end
+      >
+        {/**TODO: open in tab button */}
+        {onOpenInTab && (
+          <IconButton
+            size="1"
+            title="open in tab"
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onOpenInTab(chat.id);
+            }}
+            variant="ghost"
+          >
+            <OpenInNewWindowIcon width="10" height="10" />
+          </IconButton>
+        )}
+
+        <CloseButton
+          size="1"
+          // needs to be smaller
+
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onDelete(chat.id);
+          }}
+          iconSize={10}
+          title="delete chat"
+        />
+      </Flex>
     </Box>
   );
 };

src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, Button } from "@radix-ui/themes";
+import { Box, Flex } from "@radix-ui/themes";
 import styles from "./sidebar.module.css";
 import { ChatHistory, type ChatHistoryProps } from "../ChatHistory";
 
@@ -16,22 +16,20 @@ export const Sidebar: React.FC<
         left="0"
         bottom="0"
         top="0"
+        pr="2"
+        pl="2"
         style={{
+          // TODO: copy this to vscode
           zIndex: 1,
           overflowX: "hidden",
           width: "inherit",
         }}
       >
-        <Box ml="auto" mr="auto" mt="4" mb="4">
-          <Button variant="soft" onClick={onCreateNewChat}>
-            Start a new chat
-          </Button>
-        </Box>
-
         <ChatHistory
           history={history}
           onHistoryItemClick={onHistoryItemClick}
           onDeleteHistoryItem={onDeleteHistoryItem}
+          onCreateNewChat={onCreateNewChat}
         />
       </Flex>
     </Box>

src/features/HistoryList.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ChatHistory } from "../components/ChatHistory";
+import { useEventBusForSidebar } from "../hooks";
+
+export const HistoryList: React.FC = () => {
+  const {
+    history,
+    onDeleteHistoryItem,
+    onOpenChatInSIdeBar,
+    onOpenChatInTab,
+    onCreateNewChat,
+  } = useEventBusForSidebar();
+
+  return (
+    <ChatHistory
+      history={history}
+      onDeleteHistoryItem={onDeleteHistoryItem}
+      onHistoryItemClick={onOpenChatInSIdeBar}
+      onOpenChatInTab={onOpenChatInTab}
+      onCreateNewChat={onCreateNewChat}
+    />
+  );
+};

src/lib/index.ts

@@ -1,2 +1,2 @@
 export * from "../events";
-export { render } from "./render";
+export { render, renderHistoryList } from "./render";

src/lib/render/RenderHistoryList.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { ConfigProvider, type Config } from "../../contexts/config-context.tsx";
+import { HistoryList } from "../../features/HistoryList.tsx";
+import ReactDOM from "react-dom/client";
+import { Theme } from "../../components/Theme";
+
+export function renderHistoryList(element: HTMLElement, config: Config) {
+  const List: React.FC<Config> = (config) => {
+    return (
+      <ConfigProvider config={config}>
+        <Theme>
+          <HistoryList />
+        </Theme>
+      </ConfigProvider>
+    );
+  };
+  ReactDOM.createRoot(element).render(<List {...config} />);
+}

src/lib/render/index.tsx

@@ -5,6 +5,8 @@ import ReactDOM from "react-dom/client";
 import type { Config } from "../../contexts/config-context";
 import { Chat } from "./Chat";
 
+export { renderHistoryList } from "./RenderHistoryList";
+
 export function render(element: HTMLElement, config: Config) {
   ReactDOM.createRoot(element).render(<Chat {...config} />);
 }