incorporates 13 from Nicks list

frontend/src/conversation/Conversation.tsx

@@ -30,7 +30,7 @@ export default function Conversation() {
 
   return (
     <div className="flex justify-center p-6">
-      <div className="w-10/12 transition-all md:w-1/2">
+      <div className="flex w-10/12 flex-col transition-all md:w-1/2">
         {messages.map((message, index) => {
           return (
             <ConversationBubble

frontend/src/conversation/ConversationBubble.tsx

@@ -16,15 +16,17 @@ const ConversationBubble = forwardRef<
       ref={ref}
       className={`flex rounded-3xl ${
         type === 'ANSWER'
-          ? 'bg-gray-1000'
+          ? 'self-start bg-gray-1000'
           : type === 'ERROR'
-          ? 'bg-red-1000'
-          : ''
+          ? 'self-start bg-red-1000'
+          : 'flex-row-reverse self-end bg-blue-1000 text-white'
       } py-7 px-5 ${className}`}
     >
       <Avatar avatar={type === 'QUESTION' ? '👤' : '🦖'}></Avatar>
       <div
-        className={`ml-5 flex items-center ${
+        className={`${
+          type === 'QUESTION' ? 'mr-5' : 'ml-5'
+        } flex items-center ${
           type === 'ERROR'
             ? 'rounded-lg border border-red-2000 p-2 text-red-3000'
             : ''
@@ -40,3 +42,5 @@ const ConversationBubble = forwardRef<
 });
 
 export default ConversationBubble;
+
+// TODO : split question and answer into two diff JSX

frontend/src/store.ts

@@ -29,3 +29,5 @@ export type AppDispatch = typeof store.dispatch;
 export default store;
 
 // TODO : use https://redux-toolkit.js.org/tutorials/typescript#define-typed-hooks everywere instead of direct useDispatch
+
+// TODO : streamline async state management

frontend/tailwind.config.cjs

@@ -17,6 +17,7 @@ module.exports = {
         'red-1000': 'rgb(254, 202, 202)',
         'red-2000': '#F44336',
         'red-3000': '#621B16',
+        'blue-1000': '#7D54D1'
       },
     },
   },