fix: ui width in collaboration with sidebar in chatbot layout

components/chat/ChatConversation.tsx

@@ -1,8 +1,10 @@
 import { Schema } from "@/amplify/data/resource";
 import { useAIConversation, useGeneralChat } from "@/api/useGeneralChat";
+import { cn } from "@/lib/utils";
 import { SendMessage } from "@aws-amplify/ui-react-ai";
 import { find, flow, get, identity, last } from "lodash/fp";
 import { FC, useEffect, useState } from "react";
+import { useSidebar } from "../ui/sidebar";
 import ConversationName from "./ConversationName";
 import Errors from "./Errors";
 import MessageInput from "./MessageInput";
@@ -25,6 +27,7 @@ const ChatConversation: FC<ChatConversationProps> = ({ chatId }) => {
   ] = useAIConversation("generalChat", { id: chatId });
   const { conversations, setConversationName } = useGeneralChat();
   const [conversation, setConversation] = useState<Conversation | undefined>();
+  const { open } = useSidebar();
 
   const getInputFieldKey = () =>
     `${get("id")(conversation) ?? "NA"}-${flow(identity<typeof messages>, last, get("id"))(messages)}`;
@@ -49,7 +52,11 @@ const ChatConversation: FC<ChatConversationProps> = ({ chatId }) => {
     <div className="space-y-4">
       <ConversationName
         name={conversation?.name}
-        className="sticky md:static top-[5.25rem] bg-bgTransparent pb-2 z-30"
+        className={cn(
+          "sticky top-[5.25rem] bg-bgTransparent pb-2 z-30",
+          open && "md:static",
+          !open && "md:top-[6.25rem]"
+        )}
       />
 
       <Messages {...{ messages }} />

components/chat/Message.tsx

@@ -10,15 +10,25 @@ interface MessageProps {
 }
 
 const Message: FC<MessageProps> = ({ message, user }) => (
-  <div key={message.id} className="space-y-4 w-full">
+  <div key={message.id} className="space-y-4">
     <MessageAvatar
       messageDate={message.createdAt}
       role={message.role}
       user={user}
     />
 
     {message.content.map((content, index) => (
-      <ReactMarkdown key={index} className="w-full overflow-x-auto">
+      <ReactMarkdown
+        key={index}
+        components={{
+          pre: ({ node: _n, ...props }) => (
+            <pre
+              className="bg-muted text-sm text-muted-foreground rounded-sm border-solid border border-slate-300 px-2 overflow-x-auto"
+              {...props}
+            />
+          ),
+        }}
+      >
         {content.text}
       </ReactMarkdown>
     ))}

components/chat/MessageInput.tsx

@@ -60,7 +60,7 @@ const MessageInput: FC<MessageInputProps> = ({ id, onSend, className }) => {
 
   return (
     <div className={cn(className)}>
-      <div className="w-full h-8 bg-gradient-to-t from-background/95 via-background/80 to-background/0" />
+      <div className="h-8 bg-gradient-to-t from-background/95 via-background/80 to-background/0" />
 
       <div className="relative bg-white/95">
         <InboxEditor

components/layouts/ChatLayout.tsx

@@ -10,8 +10,9 @@ import { FC, ReactNode, useEffect, useState } from "react";
 import Header from "../header/Header";
 import CreateInboxItemDialog from "../inbox/CreateInboxItemDialog";
 import NavigationMenu from "../navigation-menu/NavigationMenu";
-import { SidebarProvider, SidebarTrigger } from "../ui/sidebar";
+import { SidebarProvider } from "../ui/sidebar";
 import { Toaster } from "../ui/toaster";
+import ConversationsPageContent from "./misc/ConversationsPageContent";
 import ConversationsSidebar from "./misc/ConversationsSidebar";
 
 export type ChatLayoutProps = {
@@ -40,15 +41,10 @@ const ChatLayoutInner: FC<ChatLayoutProps> = ({ children }) => {
         <Header context={context} />
         <NavigationMenu />
         <main className="w-full">
-          <div className="flex flex-col px-2 lg:pr-4 mb-4 md:mb-8">
+          <div className="flex flex-col px-2 mb-4 md:mb-8">
             <SidebarProvider>
               <ConversationsSidebar />
-              <div className="w-full px-0 mx-0">
-                <header className="sticky top-12 md:top-16 py-1 z-40 bg-bgTransparent">
-                  <SidebarTrigger />
-                </header>
-                <div>{children}</div>
-              </div>
+              <ConversationsPageContent>{children}</ConversationsPageContent>
             </SidebarProvider>
           </div>
           <Toaster />

components/layouts/misc/ConversationsPageContent.tsx

@@ -0,0 +1,30 @@
+import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { FC, ReactNode } from "react";
+
+interface ConversationsPageContentProps {
+  children?: ReactNode;
+}
+
+const ConversationsPageContent: FC<ConversationsPageContentProps> = ({
+  children,
+}) => {
+  const { isMobile, open } = useSidebar();
+
+  return (
+    <div
+      className={cn(
+        "px-0 mx-0 flex flex-col items-center",
+        isMobile || !open ? "w-full" : "w-[calc(100%-var(--sidebar-width))]"
+      )}
+    >
+      <div className="w-full">
+        <header className="sticky left-2 top-12 md:top-16 py-1 z-40 bg-bgTransparent">
+          <SidebarTrigger />
+        </header>
+        <div>{children}</div>
+      </div>
+    </div>
+  );
+};
+export default ConversationsPageContent;