ui(chat): hoist width up to where the side bar is called

TODO.md

@@ -4,7 +4,7 @@
 [ ] use lsp handlers for chat (keys and config)
 [-] no need for logins it's passed when the lsp starts
 
-[ ] check cors issues with lsp
+[x] check cors issues with lsp
 [ ] clean events
 
 [?] How should it handle going offline?
@@ -24,6 +24,8 @@
 [?] user markdown input?
 [x] enable dark mode
 
+[ ] use grid layout for chat and sidebar?
+
 ### PRIORITY
 
 [?] set lsp url
@@ -34,11 +36,11 @@
 [x] disable inputs while streaming
 [x] stop stream button
 [ ] build the app (also think about how it'll be configured)
-[ ] content for when chat is empty
+[x] content for when chat is empty
 [x] fix the text area placement (empty chat content might help with this)
-[ ] make it look nice
+[x] make it look nice
 [x] handle being offline
-[ ] handle long requests
+[x] handle long requests
 
 [x] scroll lags a bit
 

src/App.tsx

@@ -12,7 +12,7 @@ function App() {
       <Flex>
         <HistorySideBar />
         {/* <PageWrapper> */}
-        <Chat />
+        <Chat style={{ maxWidth: "calc(100vw - 260px)" }} />
         {/* </PageWrapper> */}
       </Flex>
     </Theme>

src/features/Chat.tsx

@@ -4,7 +4,7 @@ import { useEventBusForChat } from "../hooks/useEventBusForChat";
 import { ChatContent } from "../components/ChatContent";
 import { Flex } from "@radix-ui/themes";
 
-export const Chat: React.FC = () => {
+export const Chat: React.FC<{ style?: React.CSSProperties }> = (props) => {
   const {
     state,
     askQuestion,
@@ -21,16 +21,11 @@ export const Chat: React.FC = () => {
       grow="1"
       p={{
         initial: "9",
-        // initial: "5",
-        //  xs: "6",
-        //  sm: "7",
-        //   md: "9"
       }}
       style={{
+        ...props.style,
         height: "100dvh",
-        maxWidth: "calc(100vw - 260px)", // TODO: host this  as the side bar won't always be there
       }}
-      // width="100%"
     >
       <ChatContent
         messages={state.chat.messages}