[Experiment] Routing

package.json

@@ -109,6 +109,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.10",
     "react-markdown": "^9.0.1",
+    "react-router": "^7.1.5",
     "react-syntax-highlighter": "^15.5.0",
     "redux-persist": "^6.0.0",
     "rehype-katex": "^7.0.0",

src/components/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { ChatForm, ChatFormProps } from "../ChatForm";
+import { ChatForm } from "../ChatForm";
 import { ChatContent } from "../ChatContent";
 import { Flex, Button, Text, Card } from "@radix-ui/themes";
 import {
@@ -36,14 +36,9 @@ export type ChatProps = {
   backFromChat: () => void;
   style?: React.CSSProperties;
   unCalledTools: boolean;
-  maybeSendToSidebar: ChatFormProps["onClose"];
 };
 
-export const Chat: React.FC<ChatProps> = ({
-  style,
-  unCalledTools,
-  maybeSendToSidebar,
-}) => {
+export const Chat: React.FC<ChatProps> = ({ style, unCalledTools }) => {
   const dispatch = useAppDispatch();
 
   const [isViewingRawJSON, setIsViewingRawJSON] = useState(false);
@@ -142,7 +137,6 @@ export const Chat: React.FC<ChatProps> = ({
         <ChatForm
           key={chatId} // TODO: think of how can we not trigger re-render on chatId change (checkboxes)
           onSubmit={handleSummit}
-          onClose={maybeSendToSidebar}
           unCalledTools={unCalledTools}
         />
 

src/components/ChatForm/ChatForm.tsx

@@ -3,11 +3,7 @@ import React, { useCallback, useEffect, useMemo } from "react";
 import { Flex, Card, Text } from "@radix-ui/themes";
 import styles from "./ChatForm.module.css";
 
-import {
-  PaperPlaneButton,
-  BackToSideBarButton,
-  AgentIntegrationsButton,
-} from "../Buttons/Buttons";
+import { PaperPlaneButton, AgentIntegrationsButton } from "../Buttons/Buttons";
 import { TextArea } from "../TextArea";
 import { Form } from "./Form";
 import {
@@ -57,14 +53,13 @@ import { AgentCapabilities } from "./AgentCapabilities";
 
 export type ChatFormProps = {
   onSubmit: (str: string) => void;
-  onClose?: () => void;
   className?: string;
   unCalledTools: boolean;
 };
 
 export const ChatForm: React.FC<ChatFormProps> = ({
   onSubmit,
-  onClose,
+
   className,
   unCalledTools,
 }) => {
@@ -362,14 +357,6 @@ export const ChatForm: React.FC<ChatFormProps> = ({
                 ref={(x) => refs.setSetupIntegrations(x)}
               />
             )}
-            {onClose && (
-              <BackToSideBarButton
-                disabled={isStreaming}
-                title="Return to sidebar"
-                size="1"
-                onClick={onClose}
-              />
-            )}
             {config.features?.images !== false &&
               isMultimodalitySupportedForCurrentModel && <AttachFileButton />}
             {/* TODO: Reserved space for microphone button coming later on */}

src/components/ChatHistory/ChatHistory.tsx

@@ -6,25 +6,26 @@ import {
   getHistory,
   type HistoryState,
 } from "../../features/History/historySlice";
-import type { ChatThread } from "../../features/Chat/Thread/types";
+// import type { ChatThread } from "../../features/Chat/Thread/types";
 
 export type ChatHistoryProps = {
   history: HistoryState;
-  onHistoryItemClick: (id: ChatThread) => void;
+  // onHistoryItemClick: (id: ChatThread) => void;
   onDeleteHistoryItem: (id: string) => void;
   onOpenChatInTab?: (id: string) => void;
   currentChatId?: string;
 };
-
+// TODO: history item should be a nav link
 export const ChatHistory = memo(
   ({
     history,
-    onHistoryItemClick,
+    // onHistoryItemClick,
     onDeleteHistoryItem,
     onOpenChatInTab,
     currentChatId,
   }: ChatHistoryProps) => {
     const sortedHistory = getHistory({ history });
+
     return (
       <Box
         style={{
@@ -43,7 +44,7 @@ export const ChatHistory = memo(
           >
             {sortedHistory.map((item) => (
               <HistoryItem
-                onClick={() => onHistoryItemClick(item)}
+                // onClick={() => onHistoryItemClick(item)}
                 onOpenInTab={onOpenChatInTab}
                 onDelete={onDeleteHistoryItem}
                 key={item.id}

src/components/ChatHistory/HistoryItem.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Card, Flex, Text, Box, Spinner } from "@radix-ui/themes";
 // import type { ChatHistoryItem } from "../../hooks/useChatHistory";
 import { ChatBubbleIcon, DotFilledIcon } from "@radix-ui/react-icons";
@@ -8,17 +8,34 @@ import { OpenInNewWindowIcon } from "@radix-ui/react-icons";
 import type { ChatHistoryItem } from "../../features/History/historySlice";
 import { isUserMessage } from "../../services/refact";
 import { useAppSelector } from "../../hooks";
+import { useNavigate } from "react-router";
 
 export const HistoryItem: React.FC<{
   historyItem: ChatHistoryItem;
-  onClick: () => void;
+  // onClick: () => void;
   onDelete: (id: string) => void;
   onOpenInTab?: (id: string) => void;
   disabled: boolean;
-}> = ({ historyItem, onClick, onDelete, onOpenInTab, disabled }) => {
+}> = ({
+  historyItem,
+  // onClick,
+  onDelete,
+  onOpenInTab,
+  disabled,
+}) => {
   const dateCreated = new Date(historyItem.createdAt);
   const dateTimeString = dateCreated.toLocaleString();
   const cache = useAppSelector((app) => app.chat.cache);
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      void navigate(`/chat/${historyItem.id}`);
+    },
+    [historyItem.id, navigate],
+  );
 
   const isStreaming = historyItem.id in cache;
   return (
@@ -34,14 +51,7 @@ export const HistoryItem: React.FC<{
         asChild
         role="button"
       >
-        <button
-          disabled={disabled}
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            onClick();
-          }}
-        >
+        <button disabled={disabled} onClick={handleClick}>
           <Flex gap="2px" align="center">
             {isStreaming && <Spinner style={{ minWidth: 16, minHeight: 16 }} />}
             {!isStreaming && historyItem.read === false && (

src/components/PageWrapper/PageWrapper.module.css → src/components/Layout/Layout.module.css

@@ -1,4 +1,4 @@
-.PageWrapper {
+.Layout {
   width: 100%;
   /* justify-content: center; */
   /* Fallback height for JB */
@@ -7,7 +7,7 @@
   height: 100%;
 }
 @media print {
-  .PageWrapper {
+  .Layout {
     max-height: unset;
   }
 }

src/components/PageWrapper/PageWrapper.tsx → src/components/Layout/Layout.tsx

@@ -1,22 +1,23 @@
 import React, { useMemo } from "react";
 import { Flex } from "@radix-ui/themes";
-import styles from "./PageWrapper.module.css";
+import styles from "./Layout.module.css";
 import classNames from "classnames";
-import type { Config } from "../../features/Config/configSlice";
+import { selectHost } from "../../features/Config/configSlice";
+import { useAppSelector } from "../../hooks";
+import { Outlet } from "react-router";
 
-type PageWrapperProps = {
-  children: React.ReactNode;
-  host: Config["host"];
+export type LayoutProps = {
+  children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
 };
 
-export const PageWrapper: React.FC<PageWrapperProps> = ({
+export const BasicLayout: React.FC<LayoutProps> = ({
   children,
   className,
-  host,
   style,
 }) => {
+  const host = useAppSelector(selectHost);
   const xPadding = useMemo(() => {
     if (host === "web") return { initial: "8", xl: "9" };
     return {
@@ -40,10 +41,18 @@ export const PageWrapper: React.FC<PageWrapperProps> = ({
       flexGrow="1"
       py={yPadding}
       px={xPadding}
-      className={classNames(styles.PageWrapper, className)}
+      className={classNames(styles.Layout, className)}
       style={style}
     >
       {children}
     </Flex>
   );
 };
+
+export const Layout: React.FC<LayoutProps> = (props) => {
+  return (
+    <BasicLayout {...props}>
+      <Outlet />
+    </BasicLayout>
+  );
+};

src/components/Layout/LayoutWithTopbar.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { BasicLayout, LayoutProps } from "./Layout";
+import { Toolbar } from "../Toolbar";
+import { Outlet } from "react-router";
+
+export const LayoutWithToolbar: React.FC<LayoutProps> = (props) => {
+  return (
+    <BasicLayout {...props}>
+      <Toolbar />
+      <Outlet />
+    </BasicLayout>
+  );
+};

src/components/Layout/index.tsx

@@ -0,0 +1,2 @@
+// TODO: delete this, it's done it's job
+export { Layout, type LayoutProps } from "./Layout";