update latest changes

2025-12-02 01:53:14 +00:00 · 2025-04-21 21:05:12 +05:45
parent ea0aa64330 474d700df2
commit decc31f1f0
60 changed files with 4560 additions and 1060 deletions
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,18 +1,24 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useDropzone } from 'react-dropzone';
+
 import DragFileUpload from '../assets/DragFileUpload.svg';
 import newChatIcon from '../assets/openNewChat.svg';
 import ShareIcon from '../assets/share.svg';
+import MessageInput from '../components/MessageInput';
 import { useMediaQuery } from '../hooks';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
+import { ActiveState } from '../models/misc';
 import {
  selectConversationId,
+  selectSelectedAgent,
  selectToken,
 } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
+import Upload from '../upload/Upload';
 import { handleSendFeedback } from './conversationHandlers';
+import ConversationMessages from './ConversationMessages';
 import { FEEDBACK, Query } from './conversationModels';
 import {
  addQuery,
@@ -24,28 +30,29 @@ import {
  updateConversationId,
  updateQuery,
 } from './conversationSlice';
-import Upload from '../upload/Upload';
-import { ActiveState } from '../models/misc';
-import ConversationMessages from './ConversationMessages';
-import MessageInput from '../components/MessageInput';

 export default function Conversation() {
+  const { t } = useTranslation();
+  const { isMobile } = useMediaQuery();
+  const dispatch = useDispatch<AppDispatch>();
+
  const token = useSelector(selectToken);
  const queries = useSelector(selectQueries);
  const status = useSelector(selectStatus);
  const conversationId = useSelector(selectConversationId);
-  const dispatch = useDispatch<AppDispatch>();
-  const [input, setInput] = useState('');
-  const fetchStream = useRef<any>(null);
-  const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
-  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
-  const { t } = useTranslation();
-  const { isMobile } = useMediaQuery();
+  const selectedAgent = useSelector(selectSelectedAgent);
+
+  const [input, setInput] = useState<string>('');
  const [uploadModalState, setUploadModalState] =
    useState<ActiveState>('INACTIVE');
  const [files, setFiles] = useState<File[]>([]);
+  const [lastQueryReturnedErr, setLastQueryReturnedErr] =
+    useState<boolean>(false);
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
  const [handleDragActive, setHandleDragActive] = useState<boolean>(false);

+  const fetchStream = useRef<any>(null);
+
  const onDrop = useCallback((acceptedFiles: File[]) => {
    setUploadModalState('ACTIVE');
    setFiles(acceptedFiles);
@@ -83,35 +90,36 @@ export default function Conversation() {
    },
  });

-  useEffect(() => {
-    if (queries.length) {
-      queries[queries.length - 1].error && setLastQueryReturnedErr(true);
-      queries[queries.length - 1].response && setLastQueryReturnedErr(false); //considering a query that initially returned error can later include a response property on retry
-    }
-  }, [queries[queries.length - 1]]);
+  const handleFetchAnswer = useCallback(
+    ({ question, index }: { question: string; index?: number }) => {
+      fetchStream.current = dispatch(fetchAnswer({ question, indx: index }));
+    },
+    [dispatch, selectedAgent],
+  );

-  const handleQuestion = ({
-    question,
-    isRetry = false,
-    updated = null,
-    indx = undefined,
-  }: {
-    question: string;
-    isRetry?: boolean;
-    updated?: boolean | null;
-    indx?: number;
-  }) => {
-    if (updated === true) {
-      !isRetry &&
-        dispatch(resendQuery({ index: indx as number, prompt: question }));
-      fetchStream.current = dispatch(fetchAnswer({ question, indx }));
-    } else {
-      question = question.trim();
-      if (question === '') return;
-      !isRetry && dispatch(addQuery({ prompt: question }));
-      fetchStream.current = dispatch(fetchAnswer({ question }));
-    }
-  };
+  const handleQuestion = useCallback(
+    ({
+      question,
+      isRetry = false,
+      index = undefined,
+    }: {
+      question: string;
+      isRetry?: boolean;
+      index?: number;
+    }) => {
+      const trimmedQuestion = question.trim();
+      if (trimmedQuestion === '') return;
+
+      if (index !== undefined) {
+        if (!isRetry) dispatch(resendQuery({ index, prompt: trimmedQuestion }));
+        handleFetchAnswer({ question: trimmedQuestion, index });
+      } else {
+        if (!isRetry) dispatch(addQuery({ prompt: trimmedQuestion }));
+        handleFetchAnswer({ question: trimmedQuestion, index });
+      }
+    },
+    [dispatch, handleFetchAnswer],
+  );

  const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => {
    const prevFeedback = query.feedback;
@@ -143,10 +151,9 @@ export default function Conversation() {
    indx?: number,
  ) => {
    if (updated === true) {
-      handleQuestion({ question: updatedQuestion as string, updated, indx });
+      handleQuestion({ question: updatedQuestion as string, index: indx });
    } else if (input && status !== 'loading') {
      if (lastQueryReturnedErr) {
-        // update last failed query with new prompt
        dispatch(
          updateQuery({
            index: queries.length - 1,
@@ -160,13 +167,14 @@ export default function Conversation() {
          isRetry: true,
        });
      } else {
-        handleQuestion({ 
+        handleQuestion({
          question: input,
        });
      }
      setInput('');
    }
  };
+
  const resetConversation = () => {
    dispatch(setConversation([]));
    dispatch(
@@ -175,22 +183,29 @@ export default function Conversation() {
      }),
    );
  };
+
  const newChat = () => {
    if (queries && queries.length > 0) resetConversation();
  };

+  useEffect(() => {
+    if (queries.length) {
+      queries[queries.length - 1].error && setLastQueryReturnedErr(true);
+      queries[queries.length - 1].response && setLastQueryReturnedErr(false);
+    }
+  }, [queries[queries.length - 1]]);
  return (
-    <div className="flex flex-col gap-1 h-full justify-end">
+    <div className="flex h-full flex-col justify-end gap-1">
      {conversationId && queries.length > 0 && (
-        <div className="absolute top-4 right-20">
-          <div className="flex mt-2 items-center gap-4">
+        <div className="absolute right-20 top-4">
+          <div className="mt-2 flex items-center gap-4">
            {isMobile && queries.length > 0 && (
              <button
                title="Open New Chat"
                onClick={() => {
                  newChat();
                }}
-                className="hover:bg-bright-gray dark:hover:bg-[#28292E] rounded-full p-2"
+                className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
              >
                <img
                  className="h-5 w-5 filter dark:invert"
@@ -205,7 +220,7 @@ export default function Conversation() {
              onClick={() => {
                setShareModalState(true);
              }}
-              className="hover:bg-bright-gray dark:hover:bg-[#28292E] rounded-full p-2"
+              className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
            >
              <img
                className="h-5 w-5 filter dark:invert"
@@ -233,7 +248,7 @@ export default function Conversation() {
        status={status}
      />

-      <div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1300px] h-auto py-1">
+      <div className="z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl bg-opacity-0 py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
        <div
          {...getRootProps()}
          className="flex w-full items-center rounded-[40px]"
@@ -247,20 +262,22 @@ export default function Conversation() {
            onChange={(e) => setInput(e.target.value)}
            onSubmit={handleQuestionSubmission}
            loading={status === 'loading'}
+            showSourceButton={selectedAgent ? false : true}
+            showToolButton={selectedAgent ? false : true}
          />
        </div>

-        <p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
+        <p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
          {t('tagline')}
        </p>
      </div>
      {handleDragActive && (
-        <div className="pointer-events-none fixed top-0 left-0 z-30 flex flex-col size-full items-center justify-center bg-opacity-50 bg-white dark:bg-gray-alpha">
+        <div className="pointer-events-none fixed left-0 top-0 z-30 flex size-full flex-col items-center justify-center bg-white bg-opacity-50 dark:bg-gray-alpha">
          <img className="filter dark:invert" src={DragFileUpload} />
          <span className="px-2 text-2xl font-bold text-outer-space dark:text-silver">
            {t('modals.uploadDoc.drag.title')}
          </span>
-          <span className="p-2 text-s w-48 text-center text-outer-space dark:text-silver">
+          <span className="text-s w-48 p-2 text-center text-outer-space dark:text-silver">
            {t('modals.uploadDoc.drag.description')}
          </span>
        </div>
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -58,7 +58,6 @@ const ConversationBubble = forwardRef<
      updated?: boolean,
      index?: number,
    ) => void;
-    attachments?: { fileName: string; id: string }[];
  }
 >(function ConversationBubble(
  {
@@ -73,7 +72,6 @@ const ConversationBubble = forwardRef<
    retryBtn,
    questionNumber,
    handleUpdatedQuestionSubmission,
-    attachments,
  },
  ref,
 ) {
@@ -100,35 +98,6 @@ const ConversationBubble = forwardRef<
    handleUpdatedQuestionSubmission?.(editInputBox, true, questionNumber);
  };
  let bubble;
-  const renderAttachments = () => {
-    if (!attachments || attachments.length === 0) return null;
-    return (
-      <div className="mt-2 flex flex-wrap gap-2">
-        {attachments.map((attachment, index) => (
-          <div
-            key={index}
-            className="flex items-center rounded-md bg-gray-100 px-2 py-1 text-sm dark:bg-gray-700"
-          >
-            <svg
-              className="mr-1 h-4 w-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
-              />
-            </svg>
-            <span>{attachment.fileName}</span>
-          </div>
-        ))}
-      </div>
-    );
-  };
  if (type === 'QUESTION') {
    bubble = (
      <div
@@ -157,7 +126,6 @@ const ConversationBubble = forwardRef<
                >
                  {message}
                </div>
-                {renderAttachments()}
              </div>
              <button
                onClick={() => {
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -23,6 +23,7 @@ interface ConversationMessagesProps {
  handleFeedback?: (query: Query, feedback: FEEDBACK, index: number) => void;
  queries: Query[];
  status: Status;
+  showHeroOnEmpty?: boolean;
 }

 export default function ConversationMessages({
@@ -31,6 +32,7 @@ export default function ConversationMessages({
  queries,
  status,
  handleFeedback,
+  showHeroOnEmpty = true,
 }: ConversationMessagesProps) {
  const [isDarkTheme] = useDarkTheme();
  const { t } = useTranslation();
@@ -141,7 +143,7 @@ export default function ConversationMessages({
      ref={conversationRef}
      onWheel={handleUserInterruption}
      onTouchMove={handleUserInterruption}
-      className="flex justify-center w-full overflow-y-auto h-screen sm:pt-12"
+      className="flex justify-center w-full overflow-y-auto h-full sm:pt-12"
    >
      {queries.length > 0 && !hasScrolledToLast && (
        <button
@@ -161,7 +163,6 @@ export default function ConversationMessages({
        {queries.length > 0 ? (
          queries.map((query, index) => (
            <Fragment key={index}>
-              
              <ConversationBubble
                className={'first:mt-5'}
                key={`${index}QUESTION`}
@@ -170,14 +171,13 @@ export default function ConversationMessages({
                handleUpdatedQuestionSubmission={handleQuestionSubmission}
                questionNumber={index}
                sources={query.sources}
-                attachments={query.attachments}
              />
              {prepResponseView(query, index)}
            </Fragment>
          ))
-        ) : (
+        ) : showHeroOnEmpty ? (
          <Hero handleQuestion={handleQuestion} />
-        )}
+        ) : null}
      </div>
    </div>
  );
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/frontend/src/conversation/conversationHandlers.ts
@@ -13,7 +13,9 @@ export function handleFetchAnswer(
  promptId: string | null,
  chunks: string,
  token_limit: number,
+  agentId?: string,
  attachments?: string[],
+  save_conversation: boolean = true,
 ): Promise<
  | {
      result: any;
@@ -50,13 +52,15 @@ export function handleFetchAnswer(
    chunks: chunks,
    token_limit: token_limit,
    isNoneDoc: selectedDocs === null,
+    agent_id: agentId,
+    save_conversation: save_conversation,
  };
-  
+
  // Add attachments to payload if they exist
  if (attachments && attachments.length > 0) {
    payload.attachments = attachments;
  }
-  
+
  if (selectedDocs && 'id' in selectedDocs) {
    payload.active_docs = selectedDocs.id as string;
  }
@@ -97,7 +101,9 @@ export function handleFetchAnswerSteaming(
  token_limit: number,
  onEvent: (event: MessageEvent) => void,
  indx?: number,
+  agentId?: string,
  attachments?: string[],
+  save_conversation: boolean = true,
 ): Promise<Answer> {
  history = history.map((item) => {
    return {
@@ -116,13 +122,15 @@ export function handleFetchAnswerSteaming(
    token_limit: token_limit,
    isNoneDoc: selectedDocs === null,
    index: indx,
+    agent_id: agentId,
+    save_conversation: save_conversation,
  };
-  
+
  // Add attachments to payload if they exist
  if (attachments && attachments.length > 0) {
    payload.attachments = attachments;
  }
-  
+
  if (selectedDocs && 'id' in selectedDocs) {
    payload.active_docs = selectedDocs.id as string;
  }
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -9,11 +9,21 @@ export interface Message {
  type: MESSAGE_TYPE;
 }

+
+export interface Attachment {
+  id?: string;
+  fileName: string;
+  status: 'uploading' | 'processing' | 'completed' | 'failed';
+  progress: number;
+  taskId?: string;
+  token_count?: number;
+}
+
 export interface ConversationState {
  queries: Query[];
  status: Status;
  conversationId: string | null;
-  attachments?: { fileName: string; id: string }[];
+  attachments: Attachment[];
 }

 export interface Answer {
@@ -51,5 +61,7 @@ export interface RetrievalPayload {
  token_limit: number;
  isNoneDoc: boolean;
  index?: number;
+  agent_id?: string;
  attachments?: string[];
+  save_conversation?: boolean;
 }
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -7,7 +7,13 @@ import {
  handleFetchAnswer,
  handleFetchAnswerSteaming,
 } from './conversationHandlers';
-import { Answer, ConversationState, Query, Status } from './conversationModels';
+import {
+  Answer,
+  Query,
+  Status,
+  ConversationState,
+  Attachment,
+} from './conversationModels';

 const initialState: ConversationState = {
  queries: [],
@@ -28,35 +34,159 @@ export function handleAbort() {

 export const fetchAnswer = createAsyncThunk<
  Answer,
-  { question: string; indx?: number }
->('fetchAnswer', async ({ question, indx }, { dispatch, getState }) => {
-  if (abortController) {
-    abortController.abort();
-  }
-  abortController = new AbortController();
-  const { signal } = abortController;
+  { question: string; indx?: number; isPreview?: boolean }
+>(
+  'fetchAnswer',
+  async ({ question, indx, isPreview = false }, { dispatch, getState }) => {
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;

-  let isSourceUpdated = false;
-  const state = getState() as RootState;
-  const attachments = state.conversation.attachments?.map(a => a.id) || [];
-  
-  if (state.preference) {
-    if (API_STREAMING) {
-      await handleFetchAnswerSteaming(
-        question,
-        signal,
-        state.preference.token,
-        state.preference.selectedDocs!,
-        state.conversation.queries,
-        state.conversation.conversationId,
-        state.preference.prompt.id,
-        state.preference.chunks,
-        state.preference.token_limit,
-        (event) => {
-          const data = JSON.parse(event.data);
+    let isSourceUpdated = false;
+    const state = getState() as RootState;
+    const attachmentIds = state.conversation.attachments
+      .filter((a) => a.id && a.status === 'completed')
+      .map((a) => a.id) as string[];
+    const currentConversationId = state.conversation.conversationId;
+    const conversationIdToSend = isPreview ? null : currentConversationId;
+    const save_conversation = isPreview ? false : true;

-          if (data.type === 'end') {
-            dispatch(conversationSlice.actions.setStatus('idle'));
+    if (state.preference) {
+      if (API_STREAMING) {
+        await handleFetchAnswerSteaming(
+          question,
+          signal,
+          state.preference.token,
+          state.preference.selectedDocs!,
+          state.conversation.queries,
+          conversationIdToSend,
+          state.preference.prompt.id,
+          state.preference.chunks,
+          state.preference.token_limit,
+          (event) => {
+            const data = JSON.parse(event.data);
+            const targetIndex = indx ?? state.conversation.queries.length - 1;
+
+            if (data.type === 'end') {
+              dispatch(conversationSlice.actions.setStatus('idle'));
+              if (!isPreview) {
+                getConversations(state.preference.token)
+                  .then((fetchedConversations) => {
+                    dispatch(setConversations(fetchedConversations));
+                  })
+                  .catch((error) => {
+                    console.error('Failed to fetch conversations: ', error);
+                  });
+              }
+              if (!isSourceUpdated) {
+                dispatch(
+                  updateStreamingSource({
+                    index: targetIndex,
+                    query: { sources: [] },
+                  }),
+                );
+              }
+            } else if (data.type === 'id') {
+              if (!isPreview) {
+                dispatch(
+                  updateConversationId({
+                    query: { conversationId: data.id },
+                  }),
+                );
+              }
+            } else if (data.type === 'thought') {
+              const result = data.thought;
+              dispatch(
+                updateThought({
+                  index: targetIndex,
+                  query: { thought: result },
+                }),
+              );
+            } else if (data.type === 'source') {
+              isSourceUpdated = true;
+              dispatch(
+                updateStreamingSource({
+                  index: targetIndex,
+                  query: { sources: data.source ?? [] },
+                }),
+              );
+            } else if (data.type === 'tool_calls') {
+              dispatch(
+                updateToolCalls({
+                  index: targetIndex,
+                  query: { tool_calls: data.tool_calls },
+                }),
+              );
+            } else if (data.type === 'error') {
+              // set status to 'failed'
+              dispatch(conversationSlice.actions.setStatus('failed'));
+              dispatch(
+                conversationSlice.actions.raiseError({
+                  index: targetIndex,
+                  message: data.error,
+                }),
+              );
+            } else {
+              dispatch(
+                updateStreamingQuery({
+                  index: targetIndex,
+                  query: { response: data.answer },
+                }),
+              );
+            }
+          },
+          indx,
+          state.preference.selectedAgent?.id,
+          attachmentIds,
+          save_conversation,
+        );
+      } else {
+        const answer = await handleFetchAnswer(
+          question,
+          signal,
+          state.preference.token,
+          state.preference.selectedDocs!,
+          state.conversation.queries,
+          state.conversation.conversationId,
+          state.preference.prompt.id,
+          state.preference.chunks,
+          state.preference.token_limit,
+          state.preference.selectedAgent?.id,
+          attachmentIds,
+          save_conversation,
+        );
+        if (answer) {
+          let sourcesPrepped = [];
+          sourcesPrepped = answer.sources.map((source: { title: string }) => {
+            if (source && source.title) {
+              const titleParts = source.title.split('/');
+              return {
+                ...source,
+                title: titleParts[titleParts.length - 1],
+              };
+            }
+            return source;
+          });
+
+          const targetIndex = indx ?? state.conversation.queries.length - 1;
+
+          dispatch(
+            updateQuery({
+              index: targetIndex,
+              query: {
+                response: answer.answer,
+                thought: answer.thought,
+                sources: sourcesPrepped,
+                tool_calls: answer.toolCalls,
+              },
+            }),
+          );
+          if (!isPreview) {
+            dispatch(
+              updateConversationId({
+                query: { conversationId: answer.conversationId },
+              }),
+            );
            getConversations(state.preference.token)
              .then((fetchedConversations) => {
                dispatch(setConversations(fetchedConversations));
@@ -64,130 +194,23 @@ export const fetchAnswer = createAsyncThunk<
              .catch((error) => {
                console.error('Failed to fetch conversations: ', error);
              });
-            if (!isSourceUpdated) {
-              dispatch(
-                updateStreamingSource({
-                  index: indx ?? state.conversation.queries.length - 1,
-                  query: { sources: [] },
-                }),
-              );
-            }
-          } else if (data.type === 'id') {
-            dispatch(
-              updateConversationId({
-                query: { conversationId: data.id },
-              }),
-            );
-          } else if (data.type === 'thought') {
-            const result = data.thought;
-            console.log('thought', result);
-            dispatch(
-              updateThought({
-                index: indx ?? state.conversation.queries.length - 1,
-                query: { thought: result },
-              }),
-            );
-          } else if (data.type === 'source') {
-            isSourceUpdated = true;
-            dispatch(
-              updateStreamingSource({
-                index: indx ?? state.conversation.queries.length - 1,
-                query: { sources: data.source ?? [] },
-              }),
-            );
-          } else if (data.type === 'tool_calls') {
-            dispatch(
-              updateToolCalls({
-                index: indx ?? state.conversation.queries.length - 1,
-                query: { tool_calls: data.tool_calls },
-              }),
-            );
-          } else if (data.type === 'error') {
-            // set status to 'failed'
-            dispatch(conversationSlice.actions.setStatus('failed'));
-            dispatch(
-              conversationSlice.actions.raiseError({
-                index: indx ?? state.conversation.queries.length - 1,
-                message: data.error,
-              }),
-            );
-          } else {
-            const result = data.answer;
-            dispatch(
-              updateStreamingQuery({
-                index: indx ?? state.conversation.queries.length - 1,
-                query: { response: result },
-              }),
-            );
          }
-        },
-        indx,
-        attachments
-      );
-    } else {
-      const answer = await handleFetchAnswer(
-        question,
-        signal,
-        state.preference.token,
-        state.preference.selectedDocs!,
-        state.conversation.queries,
-        state.conversation.conversationId,
-        state.preference.prompt.id,
-        state.preference.chunks,
-        state.preference.token_limit,
-        attachments
-      );
-      if (answer) {
-        let sourcesPrepped = [];
-        sourcesPrepped = answer.sources.map((source: { title: string }) => {
-          if (source && source.title) {
-            const titleParts = source.title.split('/');
-            return {
-              ...source,
-              title: titleParts[titleParts.length - 1],
-            };
-          }
-          return source;
-        });
-
-        dispatch(
-          updateQuery({
-            index: indx ?? state.conversation.queries.length - 1,
-            query: {
-              response: answer.answer,
-              thought: answer.thought,
-              sources: sourcesPrepped,
-              tool_calls: answer.toolCalls,
-            },
-          }),
-        );
-        dispatch(
-          updateConversationId({
-            query: { conversationId: answer.conversationId },
-          }),
-        );
-        dispatch(conversationSlice.actions.setStatus('idle'));
-        getConversations(state.preference.token)
-          .then((fetchedConversations) => {
-            dispatch(setConversations(fetchedConversations));
-          })
-          .catch((error) => {
-            console.error('Failed to fetch conversations: ', error);
-          });
+          dispatch(conversationSlice.actions.setStatus('idle'));
+        }
      }
    }
-  }
-  return {
-    conversationId: null,
-    title: null,
-    answer: '',
-    query: question,
-    result: '',
-    thought: '',
-    sources: [],
-    tool_calls: [],
-  };
-});
+    return {
+      conversationId: null,
+      title: null,
+      answer: '',
+      query: question,
+      result: '',
+      thought: '',
+      sources: [],
+      tool_calls: [],
+    };
+  },
+);

 export const conversationSlice = createSlice({
  name: 'conversation',
@@ -286,9 +309,41 @@ export const conversationSlice = createSlice({
      const { index, message } = action.payload;
      state.queries[index].error = message;
    },
-    setAttachments: (state, action: PayloadAction<{ fileName: string; id: string }[]>) => {
+    setAttachments: (state, action: PayloadAction<Attachment[]>) => {
      state.attachments = action.payload;
    },
+    addAttachment: (state, action: PayloadAction<Attachment>) => {
+      state.attachments.push(action.payload);
+    },
+    updateAttachment: (
+      state,
+      action: PayloadAction<{
+        taskId: string;
+        updates: Partial<Attachment>;
+      }>,
+    ) => {
+      const index = state.attachments.findIndex(
+        (att) => att.taskId === action.payload.taskId,
+      );
+      if (index !== -1) {
+        state.attachments[index] = {
+          ...state.attachments[index],
+          ...action.payload.updates,
+        };
+      }
+    },
+    removeAttachment: (state, action: PayloadAction<string>) => {
+      state.attachments = state.attachments.filter(
+        (att) => att.taskId !== action.payload && att.id !== action.payload,
+      );
+    },
+    resetConversation: (state) => {
+      state.queries = initialState.queries;
+      state.status = initialState.status;
+      state.conversationId = initialState.conversationId;
+      state.attachments = initialState.attachments;
+      handleAbort();
+    },
  },
  extraReducers(builder) {
    builder
@@ -312,6 +367,11 @@ export const selectQueries = (state: RootState) => state.conversation.queries;

 export const selectStatus = (state: RootState) => state.conversation.status;

+export const selectAttachments = (state: RootState) =>
+  state.conversation.attachments;
+export const selectCompletedAttachments = (state: RootState) =>
+  state.conversation.attachments.filter((att) => att.status === 'completed');
+
 export const {
  addQuery,
  updateQuery,
@@ -323,5 +383,9 @@ export const {
  updateToolCalls,
  setConversation,
  setAttachments,
+  addAttachment,
+  updateAttachment,
+  removeAttachment,
+  resetConversation,
 } = conversationSlice.actions;
 export default conversationSlice.reducer;