Merge pull request #180 from OpenAssistantGPT/feat/post-message-on-parent-for-message

feat: update margin in messages

Author: marcolivierbouch

.changeset/kind-zebras-call.md

@@ -0,0 +1,5 @@
+---
+'@openassistantgpt/ui': patch
+---
+
+Update marging and padding issue

packages/ui/components/chat-message.tsx

@@ -61,13 +61,15 @@ export function ChatMessage({
               background: chatbot.userReplyBackgroundColor,
               fontSize, // Apply font size in pixels here
             }}
-            className="p-2 rounded-lg mr-3 whitespace-pre-wrap"
+            className={`p-2 rounded-lg whitespace-pre-wrap ${
+              withChatMessageIcon ? 'mr-4' : 'mr-3'
+            }`}
             dir={getDirection(chatbot.rightToLeftLanguage)} // Set text direction
           >
             <svg
               fill={chatbot.userReplyBackgroundColor}
               className={`absolute bottom-[0px] ${
-                chatbot.withChatMessageIcon ? 'right-14' : 'right-2'
+                chatbot.withChatMessageIcon ? 'right-11' : 'right-2'
               }`}
               height="14"
               width="13"
@@ -80,7 +82,7 @@ export function ChatMessage({
           {withChatMessageIcon && (
             <div
               className={cn(
-                'flex size-8 shrink-0 mr-4 select-none items-center justify-center rounded-md border shadow',
+                'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
                 'bg-background',
               )}
             >

packages/ui/components/chat.tsx

@@ -249,7 +249,7 @@ export function OpenAssistantGPTChat({
           <div
             ref={messagesContainerRef}
             className={cn(
-              'pb-[200px] overflow-auto max-h-max pl-2 pr-2 sm:pl-20 sm:pr-20 md:pb-[100px] pt-4 md:pt-10',
+              'pb-[200px] overflow-auto max-h-max pl-6 pr-6 sm:pl-20 sm:pr-20 md:pb-[100px] pt-4 md:pt-10',
               className,
             )}
           >