Merge branch 'main' into fe-fixed

docker-compose.yaml

@@ -0,0 +1,12 @@
+version: "3.9"
+
+services:
+  frontend:
+    build: ./frontend
+    ports:
+      - "5173:5173"
+
+  backend:
+    build: ./application
+    ports:
+      - "5001:5000"

frontend/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:18-alpine3.14
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+
+EXPOSE 5173
+
+CMD [ "npm", "run", "dev", "--" , "--host"]

frontend/src/About.tsx

@@ -4,49 +4,78 @@
 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-6 grid min-h-screen">
+    <div className="mx-5 grid min-h-screen md:mx-36">
-      <article className=" mx-auto my-auto flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
+      <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 font-semibold">About DocsGPT 🦖</p>
+        <p className="text-3xl">About DocsGPT 🦖</p>
-        <p className="mt-4 text-xl font-bold">
+        <p className="mt-4">
           Find the information in your documentation through AI-powered
-          open-source chatbot. Powered by GPT-3, Faiss and LangChain.
+          <a
+            className="text-blue-500"
+            href="https://github.com/arc53/DocsGPT"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {' '}
+            open-source{' '}
+          </a>
+          chatbot. Powered by GPT-3, Faiss and LangChain.
         </p>
 
         <div>
-          <p className="text-lg">
+          <p>
             If you want to add your own documentation, please follow the
             instruction below:
           </p>
-          <p className="mt-4 text-lg">
+          <p className="mt-4 ml-2">
             1. Navigate to{' '}
             <span className="bg-gray-200 italic"> /application</span> folder
           </p>
-          <p className="mt-4 text-lg">
+          <p className="mt-4 ml-2">
             2. Install dependencies from{' '}
             <span className="bg-gray-200 italic">
               pip install -r requirements.txt
             </span>
           </p>
-          <p className="mt-4 text-lg">
+          <p className="mt-4 ml-2">
             3. Prepare a <span className="bg-gray-200 italic">.env</span> file.
             Copy <span className="bg-gray-200 italic">.env_sample</span> and
             create <span className="bg-gray-200 italic">.env</span> with your
             OpenAI API token
           </p>
-          <p className="mt-4 text-lg">
+          <p className="mt-4 ml-2">
             4. Run the app with{' '}
             <span className="bg-gray-200 italic">python app.py</span>
           </p>
         </div>
 
-        <p className="text-lg">
+        <p>
           Currently It uses python pandas documentation, so it will respond to
           information relevant to pandas. If you want to train it on different
-          documentation - please follow this guide.
+          documentation - please follow
+          <a
+            className="text-blue-500"
+            href="https://github.com/arc53/DocsGPT/wiki/How-to-train-on-other-documentation"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {' '}
+            this guide
+          </a>
+          .
         </p>
 
-        <p className="mt-4 text-lg">
+        <p className="mt-4 text-left">
-          If you want to launch it on your own server - follow this guide.
+          If you want to launch it on your own server - follow
+          <a
+            className="text-blue-500"
+            href="https://github.com/arc53/DocsGPT/wiki/Hosting-the-app"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {' '}
+            this guide
+          </a>
+          .
         </p>
       </article>
     </div>

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/Hero.tsx

@@ -4,15 +4,15 @@ export default function Hero({ className = '' }: { className?: string }) {
       <p className="mb-10 text-center text-4xl font-semibold">
         DocsGPT <span className="text-3xl">🦖</span>
       </p>
-      <p className="mb-3 text-center">
+      <p className="mb-3 text-center text-gray-2000">
         Welcome to DocsGPT, your technical documentation assistant!
       </p>
-      <p className="mb-3 text-center">
+      <p className="mb-3 text-center text-gray-2000">
         Enter a query related to the information in the documentation you
         selected to receive and we will provide you with the most relevant
         answers.
       </p>
-      <p className="text-center">
+      <p className="text-center text-gray-2000">
         Start by entering your query in the input field below and we will do the
         rest!
       </p>

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

frontend/src/store.ts

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