Merge pull request #98 from ajaythapliyal/feature/conversation-ui

frontend/src/App.tsx

@@ -1,31 +1,18 @@
 import { Routes, Route } from 'react-router-dom';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
-import APIKeyModal from './preferences/APIKeyModal';
 import About from './About';
 import { useState } from 'react';
 import { ActiveState } from './models/misc';
-import { selectApiKeyStatus } from './preferences/preferenceSlice';
-import { useSelector } from 'react-redux';
 
 export default function App() {
-  const isApiKeySet = useSelector(selectApiKeyStatus);
   const [navState, setNavState] = useState<ActiveState>('ACTIVE');
-  const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
-    isApiKeySet ? 'INACTIVE' : 'ACTIVE',
-  );
 
   return (
     <div className="min-h-full min-w-full transition-all">
-      <APIKeyModal
-        modalState={apiKeyModalState}
-        setModalState={setApiKeyModalState}
-        isCancellable={isApiKeySet}
-      />
       <Navigation
         navState={navState}
         setNavState={(val: ActiveState) => setNavState(val)}
-        setApiKeyModalState={setApiKeyModalState}
       />
       <div
         className={`${

frontend/src/Avatar.tsx

@@ -0,0 +1,9 @@
+export default function Avatar({
+  avatar,
+  size,
+}: {
+  avatar: string;
+  size?: 'SMALL' | 'MEDIUM' | 'LARGE';
+}) {
+  return <div>{avatar}</div>;
+}

frontend/src/Navigation.tsx

@@ -5,6 +5,10 @@ import Key from './assets/key.svg';
 import Info from './assets/info.svg';
 import Link from './assets/link.svg';
 import { ActiveState } from './models/misc';
+import APIKeyModal from './preferences/APIKeyModal';
+import { useSelector } from 'react-redux';
+import { selectApiKeyStatus } from './preferences/preferenceSlice';
+import { useState } from 'react';
 
 //TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
 //TODO - Need to add Discord and Github links
@@ -12,14 +16,16 @@ import { ActiveState } from './models/misc';
 export default function Navigation({
   navState,
   setNavState,
-  setApiKeyModalState,
 }: {
   navState: ActiveState;
   setNavState: (val: ActiveState) => void;
-  setApiKeyModalState: (val: ActiveState) => void;
 }) {
+  const isApiKeySet = useSelector(selectApiKeyStatus);
+  const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
+    isApiKeySet ? 'INACTIVE' : 'ACTIVE',
+  );
   const openNav = (
-    <div className="fixed h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
+    <div className="fixed z-10 h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
       <div className={'h-16 w-full border-b-2 border-gray-100'}>
         <button
           className="float-right mr-5 mt-5 h-5 w-5"
@@ -70,7 +76,7 @@ export default function Navigation({
 
   const closedNav = (
     <>
-      <div className="fixed hidden h-full w-16 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:flex">
+      <div className="fixed z-10 hidden h-full w-16 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:flex">
         <div className={'h-16 w-16 border-b-2 border-gray-100'}>
           <button
             className="float-right mr-5 mt-5 h-5 w-5"
@@ -93,5 +99,14 @@ export default function Navigation({
     </>
   );
 
-  return navState === 'ACTIVE' ? openNav : closedNav;
+  return (
+    <>
+      {navState === 'ACTIVE' ? openNav : closedNav}
+      <APIKeyModal
+        modalState={apiKeyModalState}
+        setModalState={setApiKeyModalState}
+        isCancellable={isApiKeySet}
+      />
+    </>
+  );
 }

frontend/src/assets/send.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/conversation/Conversation.tsx

@@ -1,7 +1,28 @@
+import ConversationBubble from './ConversationBubble';
+import ConversationInput from './ConversationInput';
+
 export default function Conversation() {
+  // uncomment below JSX to see the sample harcoded chat box
   return (
-    <div className="h-full w-full p-6 text-center transition-all">
-      Docs GPT Chat Placeholder
+    <div className="flex justify-center p-6">
+      {/* <div className="w-10/12 transition-all md:w-1/2">
+        {new Array(10).fill(1).map((item, index) => {
+          return (
+            <ConversationBubble
+              className="mt-5"
+              key={index}
+              user={index % 2 === 0 ? { avatar: '🦖' } : { avatar: '👤' }}
+              message={
+                index % 2 === 0
+                  ? 'A chatbot is a computer program that simulates human conversation through voice commands or text chats or both. It can be integrated with various messaging platforms like Facebook Messenger, WhatsApp, WeChat, etc.'
+                  : 'what is DocsGPT'
+              }
+              isCurrentUser={index % 2 === 0 ? false : true}
+            ></ConversationBubble>
+          );
+        })}
+      </div>
+      <ConversationInput className="fixed bottom-2 w-10/12 md:w-[50%]"></ConversationInput> */}
     </div>
   );
 }

frontend/src/conversation/ConversationBubble.tsx

@@ -0,0 +1,25 @@
+import Avatar from '../Avatar';
+import { User } from '../models/misc';
+
+export default function ConversationBubble({
+  user,
+  message,
+  isCurrentUser,
+  className,
+}: {
+  user: User;
+  message: string;
+  isCurrentUser: boolean;
+  className: string;
+}) {
+  return (
+    <div
+      className={`flex rounded-3xl ${
+        isCurrentUser ? '' : 'bg-gray-1000'
+      } py-7 px-5 ${className}`}
+    >
+      <Avatar avatar={user.avatar}></Avatar>
+      <p className="ml-5">{message}</p>
+    </div>
+  );
+}

frontend/src/conversation/ConversationInput.tsx

@@ -0,0 +1,21 @@
+import Send from './../assets/send.svg';
+
+export default function ConversationInput({
+  className,
+}: {
+  className?: string;
+}) {
+  return (
+    <div className={`${className} flex`}>
+      <div
+        contentEditable
+        className={`min-h-5 border-000000 overflow-x-hidden; max-h-24 w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
+      ></div>
+      <img
+        onClick={() => console.log('here')}
+        src={Send}
+        className="relative right-9"
+      ></img>
+    </div>
+  );
+}

frontend/src/models/misc.ts

@@ -1 +1,5 @@
 export type ActiveState = 'ACTIVE' | 'INACTIVE';
+
+export type User = {
+  avatar: string;
+};

frontend/tailwind.config.cjs

@@ -11,6 +11,7 @@ module.exports = {
         'eerie-black': '#212121',
         jet: '#343541',
         'gray-alpha': 'rgba(0,0,0, .1)',
+        'gray-1000': '#F6F6F6',
       },
     },
   },