Merge branch 'main' into newBranch2

frontend/public/lock.svg

@@ -0,0 +1,7 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.25 13.75V11C8.25 6.44875 9.625 2.75 16.5 2.75C23.375 2.75 24.75 6.44875 24.75 11V13.75" stroke="#3A363E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.375 30.25H9.625C4.125 30.25 2.75 28.875 2.75 23.375V20.625C2.75 15.125 4.125 13.75 9.625 13.75H23.375C28.875 13.75 30.25 15.125 30.25 20.625V23.375C30.25 28.875 28.875 30.25 23.375 30.25Z" stroke="#3A363E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.9951 22H22.0075" stroke="#3A363E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4938 22H16.5061" stroke="#3A363E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.9924 22H11.0048" stroke="#3A363E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/public/message-programming.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.75 28.455H12C6 28.455 3 26.955 3 19.455V11.955C3 5.95496 6 2.95496 12 2.95496H24C30 2.95496 33 5.95496 33 11.955V19.455C33 25.455 30 28.455 24 28.455H23.25C22.785 28.455 22.335 28.68 22.05 29.055L19.8 32.055C18.81 33.375 17.19 33.375 16.2 32.055L13.95 29.055C13.71 28.725 13.17 28.455 12.75 28.455Z" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 13.05L9 16.05L12 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24 13.05L27 16.05L24 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.5 12.5549L16.5 19.545" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/public/message-text.svg

@@ -0,0 +1,5 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2708 22.9583H9.66663C4.83329 22.9583 2.41663 21.75 2.41663 15.7083V9.66663C2.41663 4.83329 4.83329 2.41663 9.66663 2.41663H19.3333C24.1666 2.41663 26.5833 4.83329 26.5833 9.66663V15.7083C26.5833 20.5416 24.1666 22.9583 19.3333 22.9583H18.7291C18.3545 22.9583 17.992 23.1395 17.7625 23.4416L15.95 25.8583C15.1525 26.9216 13.8475 26.9216 13.05 25.8583L11.2375 23.4416C11.0441 23.1758 10.597 22.9583 10.2708 22.9583Z" stroke="#363A3F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.45837 9.66663H20.5417" stroke="#363A3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.45837 15.7084H15.7084" stroke="#363A3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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>

frontend/tailwind.config.cjs

@@ -24,6 +24,7 @@ module.exports = {
         'blue-1000': '#7D54D1',
         'blue-2000': '#002B49',
         'blue-3000': '#4B02E2',
+        'purple-30': '#7D54D1',
         'blue-4000': 'rgba(0, 125, 255, 0.36)',
         'blue-5000': 'rgba(0, 125, 255)',
       },