About DocsGPT 🦖
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b0c6cb2..2cbe582 100644
--- a/frontend/src/App.tsx
+++ b/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('ACTIVE');
+ //TODO : below media query is disjoint from tailwind. Please wire it together.
+ const [navState, setNavState] = useState(
+ window.matchMedia('((min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
+ );
return (
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index ab9d9eb..99bd2db 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -30,7 +30,7 @@ export default function Conversation() {
return (
-
+
{messages.map((message, index) => {
return (
{
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 1283c79..9a1fd43 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/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}`}
>
)}
- {message}
+ {message}
);
});
export default ConversationBubble;
+
+// TODO : split question and answer into two diff JSX
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 23097d7..3c84dc5 100644
--- a/frontend/src/store.ts
+++ b/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
;
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
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 2eb37ff..edc43a8 100644
--- a/frontend/tailwind.config.cjs
+++ b/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'
},
},
},