update style rules for message bubbles

robertjdominguez · Oct 12, 2023 · 8f67906 · 8f67906
1 parent 83c450a
commit 8f67906
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/client/src/components/bot.jsx b/client/src/components/bot.jsx
@@ -84,7 +84,7 @@ const Bot = () => {
             <MessageHistory conversation={conversation} />
           </div>
           {gptResponse.length > 0 && (
-            <div className="bg-green-200 text-green-800 mr-auto p-2 rounded mb-2 w-2/3 text-start">
+            <div className="bg-green-200 text-green-800 mr-auto p-2 rounded mb-2 w-2/3 text-start rounded-bl-[0.9rem] rounded-tr-[0.9rem] rounded-br-[0.9rem]">
               <p>{gptResponse}</p>
             </div>
           )}

diff --git a/client/src/components/messageHy.jsx b/client/src/components/messageHy.jsx
@@ -13,7 +13,19 @@ export const MessageHistory = ({ conversation }) => {
                   : message.role === 'assistant'
                   ? 'bg-green-200 text-green-800 mr-auto text-start'
                   : ''
-              } p-4 rounded mb-4 w-2/3`}>
+              }
+              p-4
+              mb-4
+              w-2/3
+              rounded
+              shadow-sm
+              ${
+                message.role === 'user'
+                  ? 'rounded-tl-[0.9rem] rounded-bl-[0.9rem] rounded-br-[0.9rem]'
+                  : message.role === 'assistant'
+                  ? 'rounded-bl-[0.9rem] rounded-tr-[0.9rem] rounded-br-[0.9rem]'
+                  : ''
+              }`}>
               <p>{message.content}</p>
             </div>
           ))