Merge pull request #124 from ajaythapliyal/feature/final-ui-changes

Nicks Feedback : 12,13 & cleanup

frontend/src/About.tsx

@@ -4,7 +4,7 @@
 export default function About() {
   return (
     //Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
-    <div className="mx-36 grid min-h-screen">
+    <div className="mx-5 grid min-h-screen md:mx-36">
       <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
         <p className="text-3xl">About DocsGPT 🦖</p>
         <p className="mt-4">

frontend/src/App.tsx

@@ -6,7 +6,10 @@ import { useState } from 'react';
 import { ActiveState } from './models/misc';
 
 export default function App() {
-  const [navState, setNavState] = useState<ActiveState>('ACTIVE');
+  //TODO : below media query is disjoint from tailwind. Please wire it together.
+  const [navState, setNavState] = useState<ActiveState>(
+    window.matchMedia('((min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
+  );
 
   return (
     <div className="min-h-full min-w-full">

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
@@ -48,7 +48,7 @@ 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();

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

frontend/src/store.ts

@@ -20,12 +20,14 @@ const store = configureStore({
     preference: prefSlice.reducer,
     conversation: conversationSlice.reducer,
   },
-  middleware: (getDefaultMiddleware) => [
-    ...getDefaultMiddleware(),
-    prefListenerMiddleware.middleware,
-  ],
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(prefListenerMiddleware.middleware),
 });
 
 export type RootState = ReturnType<typeof store.getState>;
 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'
       },
     },
   },