Merge pull request #6 from balureddy003/codex/add-chat-navigation-option

Add chat navigation option

Author: balureddy003

src/frontend/src/App.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import './App.css';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { HomePage, PlanPage } from './pages';
+import { HomePage, PlanPage, ChatPage } from './pages';
 
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/plan/:planId" element={<PlanPage />} />
+        <Route path="/chat" element={<ChatPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </Router>
   );
 }
 
-export default App;
+export default App;

src/frontend/src/components/content/PlanPanelLeft.tsx

@@ -2,18 +2,15 @@ import PanelLeft from "@/coral/components/Panels/PanelLeft";
 import PanelLeftToolbar from "@/coral/components/Panels/PanelLeftToolbar";
 import {
   Body1Strong,
-  Button,
-  Subtitle1,
-  Subtitle2,
   Toast,
   ToastBody,
   ToastTitle,
   Tooltip,
   useToastController,
 } from "@fluentui/react-components";
 import {
-  Add20Regular,
   ChatAdd20Regular,
+  Chat20Regular,
   ErrorCircle20Regular,
 } from "@fluentui/react-icons";
 import TaskList from "./TaskList";
@@ -142,6 +139,25 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ reloadTasks,restReload })
           <Body1Strong>New task</Body1Strong>
         </div>
 
+        <br />
+        <div
+          className="tab tab-chat"
+          onClick={() => navigate("/chat")}
+          tabIndex={0}
+          role="button"
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              navigate("/chat");
+            }
+          }}
+        >
+          <div className="tab tab-chat-icon">
+            <Chat20Regular />
+          </div>
+          <Body1Strong>Chat</Body1Strong>
+        </div>
+
         <br />
         <TaskList
           inProgressTasks={inProgressTasks}

src/frontend/src/pages/ChatPage.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import Chat from "@/components/Chat";
+
+const ChatPage: React.FC = () => {
+  return <Chat />;
+};
+
+export default ChatPage;

src/frontend/src/pages/index.tsx

@@ -1,2 +1,3 @@
 export { default as HomePage } from './HomePage';
-export { default as PlanPage } from './PlanPage';
+export { default as PlanPage } from './PlanPage';
+export { default as ChatPage } from './ChatPage';

src/frontend/src/styles/PlanPanelLeft.css

@@ -39,6 +39,21 @@ background: radial-gradient(circle, rgba(238, 174, 221, 1) 0%, rgba(117, 121, 23
 color: #2F2F4A; */
 }
 
+.tab.tab-chat {
+  margin: 0px 8px;
+}
+
+.tab.tab-chat-icon {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  background-color: var(--colorNeutralBackground1);
+  justify-content: center;
+  align-items: center;
+  border-radius: 16px;
+  box-sizing: border-box;
+}
+
 /* TASKLIST */
 
 .task-tab {