Merge branch 'main' into newBranch2

frontend/src/About.tsx

@@ -4,7 +4,7 @@
 export default function About() {
   return (
     <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-3xl bg-gray-100 p-6 pt-14 pb-14 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-3xl bg-gray-100 p-6 mt-20 text-jet lg:p-10 xl:p-16">
         <div className="flex items-center">
           <p className="mr-2 text-3xl">About DocsGPT</p>
           <p className="text-[21px]">🦖</p>
@@ -51,8 +51,8 @@ export default function About() {
         </div>
 
         <p>
-          Currently It uses DocsGPT documentation, so it will respond to
-          information relevant to DocsGPT. If you want to train it on different
+          Currently It uses <span className= "text-blue-950 font-medium">DocsGPT</span> documentation, so it will respond to 
+          information relevant to <span className= "text-blue-950 font-medium">DocsGPT</span> . If you want to train it on different
           documentation - please follow
           <a
             className="text-blue-500"

frontend/src/Hero.tsx

@@ -1,22 +1,71 @@
 export default function Hero({ className = '' }: { className?: string }) {
   return (
-    <div className={`flex flex-col ${className}`}>
-      <div className="mb-10 flex items-center justify-center">
+    <div className={`mt-14 mb-12 flex flex-col `}>
+      <div className="mb-10 flex items-center justify-center ">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
         <p className="text-[27px]">🦖</p>
       </div>
-      <p className="mb-3 text-center leading-6 text-black-1000">
+      <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000">
         Welcome to DocsGPT, your technical documentation assistant!
       </p>
-      <p className="mb-3 text-center leading-6 text-black-1000">
+      <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
         Enter a query related to the information in the documentation you
-        selected to receive
-        <br /> and we will provide you with the most relevant answers.
+        selected to receive and we will provide you with the most relevant
+        answers.
       </p>
-      <p className="mb-3 text-center leading-6 text-black-1000">
+      <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
         Start by entering your query in the input field below and we will do the
         rest!
       </p>
+      <div className="sections mt-7 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0  ">
+        <div className=" rounded-[28px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tr-none md:rounded-br-none">
+          <div className="h-full rounded-[25px] bg-white p-6 md:rounded-tr-none md:rounded-br-none">
+            <img src="/message-text.svg" alt="lock" className="h-7 w-7" />
+            <h2 className="mt-2 mb-5 text-base font-normal leading-6">
+              Chat with Your Data
+            </h2>
+            <p className="w-[300px] text-sm font-normal leading-6 text-black-1000">
+              DocsGPT will use your data to answer questions. Whether its
+              documentation, source code, or Microsoft files, DocsGPT allows you
+              to have interactive conversations and find answers based on the
+              provided data.
+            </p>
+          </div>
+        </div>
+
+        <div className=" rounded-[28px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none  md:py-1 md:px-0">
+          <div className="rounded-[25px] bg-white px-6 py-6 md:rounded-none">
+            <img src="/lock.svg" alt="lock" className="h-7 w-7" />
+            <h2 className="mt-2 mb-5 text-base font-normal leading-6">
+              Secure Data Storage
+            </h2>
+            <p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
+              The security of your data is our top priority. DocsGPT ensures the
+              utmost protection for your sensitive information. With secure data
+              storage and privacy measures in place, you can trust that your
+              data is kept safe and confidential.
+            </p>
+          </div>
+        </div>
+        <div className=" rounded-[28px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tl-none md:rounded-bl-none">
+          <div className="rounded-[25px] bg-white p-6 px-6 lg:rounded-tl-none lg:rounded-bl-none">
+            <img
+              src="/message-programming.svg"
+              alt="lock"
+              className="h-7 w-7"
+            />
+            <h2 className="mt-2 mb-5 text-base font-normal leading-6">
+              Open Source Code
+            </h2>
+            <p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
+              DocsGPT is built on open source principles, promoting transparency
+              and collaboration. The source code is freely available, enabling
+              developers to contribute, enhance, and customize the app to meet
+              their specific needs.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/Navigation.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
 import Arrow2 from './assets/dropdown-arrow.svg';
 import Exit from './assets/exit.svg';
@@ -64,6 +64,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const embeddingsName =
     import.meta.env.VITE_EMBEDDINGS_NAME || 'openai_text-embedding-ada-002';
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (!conversations) {
       getConversations()
@@ -115,6 +117,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     })
       .then((response) => response.json())
       .then((data) => {
+        navigate('/');
         dispatch(setConversation(data));
         dispatch(
           updateConversationId({
@@ -221,7 +224,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                     <div className="flex gap-4">
                       <img src={Message} className="ml-2 w-5"></img>
                       <p className="my-auto text-eerie-black">
-                        {conversation.name}
+                        {conversation.name.length > 45
+                          ? conversation.name.substring(0, 45) + '...'
+                          : conversation.name}
                       </p>
                     </div>
 
@@ -247,11 +252,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         <div className="flex flex-col-reverse border-b-2">
           <div className="relative my-4 flex gap-2 px-2">
             <div
-              className="flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
+              className="flex h-12 min-w-[85%] cursor-pointer justify-between rounded-3xl rounded-md border-2 bg-white"
               onClick={() => setIsDocsListOpen(!isDocsListOpen)}
             >
               {selectedDocs && (
-                <p className="my-3 mx-4">
+                <p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
                   {selectedDocs.name} {selectedDocs.version}
                 </p>
               )}
@@ -345,7 +350,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <img src={Link} alt="link" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">Documentation</p>
           </a>
-
           <a
             href="https://discord.gg/WHJdfbQDR4"
             target="_blank"
@@ -353,7 +357,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Discord} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Discord</p>
+            <p className="my-auto text-eerie-black">Visit our Discord</p>
           </a>
 
           <a
@@ -363,7 +367,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Github} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Github</p>
+            <p className="my-auto text-eerie-black">Visit our Github</p>
           </a>
         </div>
       </div>

frontend/src/assets/github.svg

@@ -2,4 +2,4 @@
   <title>github</title>
   <rect width="24" height="24" fill="none"/>
   <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="black" fill-opacity="0.54"/>
-</svg>
+</svg>

frontend/src/conversation/Conversation.tsx

@@ -113,7 +113,7 @@ export default function Conversation() {
   };
 
   return (
-    <div className="flex justify-center p-4">
+    <div className="flex flex-col justify-center p-4 md:flex-row">
       {queries.length > 0 && !hasScrolledToLast ? (
         <button
           onClick={scrollIntoView}
@@ -146,9 +146,11 @@ export default function Conversation() {
           })}
         </div>
       )}
-      {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
-      <div className="fixed bottom-0 flex w-10/12 flex-col items-end self-center md:w-[50%]">
-        <div className="flex w-full">
+      {queries.length === 0 && (
+        <Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
+      )}
+      <div className="relative bottom-0 flex w-10/12 flex-col items-end self-center md:fixed md:w-[50%]">
+        <div className="flex h-full w-full">
           <div
             ref={inputRef}
             placeholder="Type your message here..."

frontend/src/conversation/ConversationBubble.tsx

@@ -42,7 +42,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="mr-2 ml-10 flex items-center rounded-3xl bg-blue-1000 p-3.5 text-white">
+        <div className="mr-2 ml-10 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
           <ReactMarkdown className="whitespace-pre-wrap break-all">
             {message}
           </ReactMarkdown>
@@ -131,7 +131,7 @@ const ConversationBubble = forwardRef<
                               : 'text-[#007DFF]'
                           }`}
                         >
-                          {index + 1}. {source.title}
+                          {index + 1}. {source.title.substring(0, 45)}
                         </p>
                       </div>
                     ))}
@@ -148,7 +148,7 @@ const ConversationBubble = forwardRef<
             <Like
               className={`cursor-pointer ${
                 feedback === 'LIKE'
-                  ? 'fill-blue-1000 stroke-blue-1000'
+                  ? 'fill-purple-30 stroke-purple-30'
                   : 'fill-none  stroke-gray-4000 hover:fill-gray-4000'
               }`}
               onClick={() => handleFeedback?.('LIKE')}
@@ -173,15 +173,13 @@ const ConversationBubble = forwardRef<
         </div>
 
         {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-8 mt-2 w-3/4 rounded-xl bg-blue-200 p-2">
-            <p className="w-3/4 truncate text-xs text-gray-500">
+          <div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 p-2">
+            <p className="m-1 w-3/4 truncate text-xs text-gray-500">
               Source: {sources[openSource].title}
             </p>
 
-            <div className="rounded-xl border-2 border-gray-200 bg-white p-2">
-              <p className="text-xs text-gray-500 ">
-                {sources[openSource].text}
-              </p>
+            <div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2">
+              <p className="text-black">{sources[openSource].text}</p>
             </div>
           </div>
         )}

frontend/src/conversation/conversationSlice.ts

@@ -142,14 +142,14 @@ export const conversationSlice = createSlice({
       state,
       action: PayloadAction<{ index: number; query: Partial<Query> }>,
     ) {
-      const index = action.payload.index;
-      if (action.payload.query.response) {
+      const { index, query } = action.payload;
+      if (query.response) {
         state.queries[index].response =
-          (state.queries[index].response || '') + action.payload.query.response;
+          (state.queries[index].response || '') + query.response;
       } else {
         state.queries[index] = {
           ...state.queries[index],
-          ...action.payload.query,
+          ...query,
         };
       }
     },
@@ -163,21 +163,21 @@ export const conversationSlice = createSlice({
       state,
       action: PayloadAction<{ index: number; query: Partial<Query> }>,
     ) {
-      const index = action.payload.index;
+      const { index, query } = action.payload;
       if (!state.queries[index].sources) {
-        state.queries[index].sources = [action.payload.query.sources![0]];
+        state.queries[index].sources = [query.sources![0]];
       } else {
-        state.queries[index].sources!.push(action.payload.query.sources![0]);
+        state.queries[index].sources!.push(query.sources![0]);
       }
     },
     updateQuery(
       state,
       action: PayloadAction<{ index: number; query: Partial<Query> }>,
     ) {
-      const index = action.payload.index;
+      const { index, query } = action.payload;
       state.queries[index] = {
         ...state.queries[index],
-        ...action.payload.query,
+        ...query,
       };
     },
     setStatus(state, action: PayloadAction<Status>) {

frontend/src/upload/Upload.tsx

@@ -41,9 +41,9 @@ export default function Upload({
         <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p>
 
         <div className="mb-10 w-[50%]">
-          <div className="h-1 w-[100%] bg-blue-4000"></div>
+          <div className="h-1 w-[100%] bg-purple-30"></div>
           <div
-            className={`relative bottom-1 h-1 bg-blue-5000 transition-all`}
+            className={`relative bottom-1 h-1 bg-purple-30 transition-all`}
             style={{ width: `${progress?.percentage || 0}%` }}
           ></div>
         </div>
@@ -55,7 +55,7 @@ export default function Upload({
             setProgress(undefined);
             setModalState('INACTIVE');
           }}
-          className={`rounded-3xl bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${
+          className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${
             isCancellable ? '' : 'hidden'
           }`}
         >
@@ -189,7 +189,7 @@ export default function Upload({
           <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
         </div>
         <div {...getRootProps()}>
-          <span className="rounded-3xl border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
+          <span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer">
             <input type="button" {...getInputProps()} />
             Choose Files
           </span>
@@ -206,7 +206,7 @@ export default function Upload({
         <div className="flex flex-row-reverse">
           <button
             onClick={uploadFile}
-            className="ml-6 rounded-3xl bg-blue-3000 py-2 px-6 text-white"
+            className="ml-6 rounded-3xl bg-purple-30 py-2 px-6 text-white"
           >
             Train
           </button>