fix: minor ui fix + added req changes

frontend/src/conversation/ConversationBubble.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
+import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import remarkGfm from 'remark-gfm';
@@ -14,6 +15,7 @@ import Sources from '../assets/sources.svg';
 import Avatar from '../components/Avatar';
 import CopyButton from '../components/CopyButton';
 import Sidebar from '../components/Sidebar';
+import { selectChunks } from '../preferences/preferenceSlice';
 import classes from './ConversationBubble.module.css';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 
@@ -34,6 +36,7 @@ const ConversationBubble = forwardRef<
   { message, type, className, feedback, handleFeedback, sources, retryBtn },
   ref,
 ) {
+  const chunks = useSelector(selectChunks);
   const [isLikeHovered, setIsLikeHovered] = useState(false);
   const [isDislikeHovered, setIsDislikeHovered] = useState(false);
   const [isLikeClicked, setIsLikeClicked] = useState(false);
@@ -59,12 +62,17 @@ const ConversationBubble = forwardRef<
         ref={ref}
         className={`flex flex-wrap self-start ${className} group flex-col  dark:text-bright-gray`}
       >
-        {DisableSourceFE || type === 'ERROR' ? null : !sources ||
-          sources.length === 0 ? (
+        {DisableSourceFE ||
+        type === 'ERROR' ||
+        chunks === '0' ||
+        sources?.length === 0 ||
+        sources?.some(
+          (source) => source.source === 'None',
+        ) ? null : !sources ? (
           <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
             <div className="my-2 flex flex-row items-center justify-center gap-3">
               <Avatar
-                className="h-[38px] w-[42px] text-xl"
+                className="h-[26px] w-[30px] text-xl"
                 avatar={
                   <img
                     src={Sources}
@@ -73,7 +81,7 @@ const ConversationBubble = forwardRef<
                   />
                 }
               />
-              <p className="text-lg font-semibold">Sources</p>
+              <p className="text-base font-semibold">Sources</p>
             </div>
             <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
               {Array.from({ length: 4 }).map((_, index) => (
@@ -405,7 +413,10 @@ function AllSources(sources: AllSourcesProps) {
       </div>
       <div className="mt-6 flex h-[90%] w-60 flex-col items-center gap-4 overflow-y-auto sm:w-80">
         {sources.sources.map((source, index) => (
-          <div className="min-h-32 w-full rounded-[20px] bg-gray-1000 p-4 dark:bg-[#28292E]">
+          <div
+            key={index}
+            className="min-h-32 w-full rounded-[20px] bg-gray-1000 p-4 dark:bg-[#28292E]"
+          >
             <span className="flex flex-row">
               <p
                 title={source.title}

frontend/src/conversation/conversationHandlers.ts

@@ -116,6 +116,7 @@ export function handleFetchAnswerSteaming(
           prompt_id: promptId,
           chunks: chunks,
           token_limit: token_limit,
+          isNoneDoc: selectedDocs === null,
         },
         signal,
       )
@@ -184,6 +185,7 @@ export function handleSearch(
       history,
       chunks: chunks,
       token_limit: token_limit,
+      isNoneDoc: selectedDocs === null,
     })
     .then((response) => response.json())
     .then((data) => {

frontend/src/conversation/conversationSlice.ts

@@ -62,7 +62,7 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
                 dispatch(
                   updateStreamingSource({
                     index: state.conversation.queries.length - 1,
-                    query: { sources },
+                    query: { sources: sources ?? [] },
                   }),
                 );
               });

frontend/src/preferences/preferenceApi.ts

@@ -76,17 +76,17 @@ export function setLocalPrompt(prompt: string): void {
   localStorage.setItem('DocsGPTPrompt', prompt);
 }
 
-export function setLocalRecentDocs(doc: Doc): void {
+export function setLocalRecentDocs(doc: Doc | null): void {
   localStorage.setItem('DocsGPTRecentDocs', JSON.stringify(doc));
-  let namePath = doc.name;
-  if (doc.language === namePath) {
+  let namePath = doc?.name;
+  if (doc?.language === namePath) {
     namePath = '.project';
   }
 
   let docPath = 'default';
-  if (doc.location === 'local') {
+  if (doc?.location === 'local') {
     docPath = 'local' + '/' + doc.name + '/';
-  } else if (doc.location === 'remote') {
+  } else if (doc?.location === 'remote') {
     docPath =
       doc.language + '/' + namePath + '/' + doc.version + '/' + doc.model + '/';
   }

frontend/src/preferences/preferenceSlice.ts

@@ -95,8 +95,7 @@ prefListenerMiddleware.startListening({
   matcher: isAnyOf(setSelectedDocs),
   effect: (action, listenerApi) => {
     setLocalRecentDocs(
-      (listenerApi.getState() as RootState).preference.selectedDocs ??
-        ([] as unknown as Doc),
+      (listenerApi.getState() as RootState).preference.selectedDocs ?? null,
     );
   },
 });