Merge branch 'main' into fe-fixed

frontend/src/conversation/Conversation.tsx

@@ -30,7 +30,7 @@ export default function Conversation() {
 
   return (
     <div className="flex justify-center p-6">
-      <div className="mt-20 w-10/12 transition-all md:w-1/2">
+      <div className="flex mt-20 w-10/12 flex-col transition-all md:w-1/2">
         {messages.map((message, index) => {
           return (
             <ConversationBubble
@@ -48,7 +48,16 @@ export default function Conversation() {
         <div
           ref={inputRef}
           contentEditable
-          className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
+          className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              if (inputRef.current?.textContent && status !== 'loading') {
+                handleQuestion(inputRef.current.textContent);
+                inputRef.current.textContent = '';
+              }
+            }
+          }}
         ></div>
         {status === 'loading' ? (
           <img

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'
             : ''
@@ -33,10 +35,12 @@ const ConversationBubble = forwardRef<
         {type === 'ERROR' && (
           <img src={Alert} alt="alert" className="mr-2 inline" />
         )}
-        <span>{message}</span>
+        <p className="whitespace-pre-wrap break-all">{message}</p>
       </div>
     </div>
   );
 });
 
 export default ConversationBubble;
+
+// TODO : split question and answer into two diff JSX