diff --git a/app-frontend/react/package.json b/app-frontend/react/package.json
index 99941f1..4dbfab3 100644
--- a/app-frontend/react/package.json
+++ b/app-frontend/react/package.json
@@ -11,10 +11,10 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@mantine/charts": "7.13.4",
-    "@mantine/core": "^7.13.4",
-    "@mantine/hooks": "^7.13.4",
-    "@mantine/notifications": "^7.13.4",
+    "@mantine/charts": "7.17.2",
+    "@mantine/core": "^7.17.2",
+    "@mantine/hooks": "^7.17.2",
+    "@mantine/notifications": "^7.17.2",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@reduxjs/toolkit": "^2.2.5",
     "@tabler/icons-react": "3.7.0",
diff --git a/app-frontend/react/src/components/Conversation/Conversation.tsx b/app-frontend/react/src/components/Conversation/Conversation.tsx
index 59eed2d..2021102 100644
--- a/app-frontend/react/src/components/Conversation/Conversation.tsx
+++ b/app-frontend/react/src/components/Conversation/Conversation.tsx
@@ -1,134 +1,132 @@
-import { KeyboardEventHandler, SyntheticEvent, useEffect, useRef, useState } from 'react'
-import styleClasses from "./conversation.module.scss"
-import { ActionIcon, Group, rem, Slider, Stack, Text, Textarea, Title, Tooltip } from '@mantine/core'
-import { IconArrowRight, IconFilePlus, IconMessagePlus } from '@tabler/icons-react'
-import { conversationSelector, doConversation, newConversation } from '../../redux/Conversation/ConversationSlice'
-import { ConversationMessage } from '../Message/conversationMessage'
-import { useAppDispatch, useAppSelector } from '../../redux/store'
-import { Message, MessageRole } from '../../redux/Conversation/Conversation'
-import { UiFeatures } from '../../common/Sandbox'
-import { getCurrentTimeStamp } from '../../common/util'
-import { useDisclosure } from '@mantine/hooks'
-import DataSource from './DataSource'
-import { ConversationSideBar } from './ConversationSideBar'
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
 
-type ConversationProps = {
-  title: string
-  enabledUiFeatures: UiFeatures
-}
-
-const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
-  const [prompt, setPrompt] = useState<string>("")
-  const [systemPrompt, setSystemPrompt] = useState<string>("You are a helpful assistant.")
-  const promptInputRef = useRef<HTMLTextAreaElement>(null)
-  const [fileUploadOpened, { open: openFileUpload, close: closeFileUpload }] = useDisclosure(false)
+import { KeyboardEventHandler, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import styleClasses from "./conversation.module.scss";
+import { ActionIcon, Button, Collapse, Group, rem, Slider, Stack, Text, Textarea, Title, Tooltip } from '@mantine/core';
+import { IconArrowRight, IconChevronDown, IconChevronUp, IconFilePlus, IconMessagePlus } from '@tabler/icons-react';
 
-  const { conversations, onGoingResult, selectedConversationId } = useAppSelector(conversationSelector)
-  const dispatch = useAppDispatch()
-  const selectedConversation = conversations.find(x => x.conversationId === selectedConversationId)
-  const scrollViewport = useRef<HTMLDivElement>(null)
+import { conversationSelector, doConversation, newConversation, isAgentSelector, getCurrentAgentSteps } from '../../redux/Conversation/ConversationSlice';
+import { ConversationMessage } from '../Message/conversationMessage';
+import { useAppDispatch, useAppSelector } from '../../redux/store';
+import { Message, MessageRole } from '../../redux/Conversation/Conversation';
+import { UiFeatures } from '../../common/Sandbox';
+import { getCurrentTimeStamp } from '../../common/util';
+import { useDisclosure } from '@mantine/hooks';
+import DataSource from './DataSource';
+import { ConversationSideBar } from './ConversationSideBar';
 
-  const [tokenLimit, setTokenLimit] = useState<number>(50)
-  const [temperature, setTemperature] = useState<number>(0.30)
+type ConversationProps = {
+  title: string;
+  enabledUiFeatures: UiFeatures;
+};
 
-  // State for tracking tokens and message processing time
-  const [messageTokenData, setMessageTokenData] = useState<{ [key: string]: { tokens: number; rate: number, time: number } }>({})
+const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
+  const [prompt, setPrompt] = useState<string>("");
+  const [systemPrompt, setSystemPrompt] = useState<string>("You are a helpful assistant.");
+  const promptInputRef = useRef<HTMLTextAreaElement>(null);
+  const [fileUploadOpened, { open: openFileUpload, close: closeFileUpload }] = useDisclosure(false);
 
-  const [currentMessageIndex, setCurrentMessageIndex] = useState<number>(-1)
-  
-  // New state to track the start time for calculating tokens per second
-  const [startTime, setStartTime] = useState<number | null>(null)
+  const { conversations, onGoingResult, selectedConversationId } = useAppSelector(conversationSelector);
+  const isAgent = useAppSelector(isAgentSelector);
+  const dispatch = useAppDispatch();
+  const selectedConversation = conversations.find(x => x.conversationId === selectedConversationId);
+  const scrollViewport = useRef<HTMLDivElement>(null);
 
-  // New state to manage the assistant's message placeholder
-  const [isAssistantTyping, setIsAssistantTyping] = useState<boolean>(false)
+  const [tokenLimit, setTokenLimit] = useState<number>(50);
+  const [temperature, setTemperature] = useState<number>(0.30);
 
-  const toSend = "Enter"
+  const [messageTokenData, setMessageTokenData] = useState<{ [key: string]: { tokens: number; rate: number; time: number } }>({});
+  const [currentMessageIndex, setCurrentMessageIndex] = useState<number>(-1);
+  const [startTime, setStartTime] = useState<number | null>(null);
+  const [isAssistantTyping, setIsAssistantTyping] = useState<boolean>(false);
+  const [showInferenceParams, setShowInferenceParams] = useState<boolean>(true);
 
-  // const systemPrompt: Partial<Message> = {
-  //   role: MessageRole.System,
-  //   content: "You are a helpful assistant",
-  // }
+  const toSend = "Enter";
 
   const handleSubmit = () => {
     const userPrompt: Message = {
       role: MessageRole.User,
       content: prompt,
       time: getCurrentTimeStamp(),
-    }
-  
-    let messages: Partial<Message>[] = []
+    };
+
+    let messages: Partial<Message>[] = [];
     if (selectedConversation) {
       messages = selectedConversation.Messages.map((message) => {
-        return { role: message.role, content: message.content }
-      })
+        return { role: message.role, content: message.content };
+      });
     }
-  
-    messages = [{ role: MessageRole.System, content: systemPrompt }, ...messages]
-  
-    // Initialize token data for the new message
+
+    messages = [{ role: MessageRole.System, content: systemPrompt }, ...messages];
+
     setMessageTokenData((prev) => ({
       ...prev,
       [`${selectedConversationId}-${selectedConversation?.Messages.length}`]: { tokens: 0, rate: 0, time: 0 },
-    }))
-  
-    // Set the current message index for tracking
-    setCurrentMessageIndex(selectedConversation?.Messages.length || 0)
-  
+    }));
+
+    setCurrentMessageIndex(selectedConversation?.Messages.length || 0);
+
     doConversation({
-        conversationId: selectedConversationId,
-        userPrompt,
-        messages,
-        maxTokens: tokenLimit,
-        temperature: temperature,
-        model: "Intel/neural-chat-7b-v3-3",
-      })
-    setPrompt("")
-    setStartTime(Date.now()) // Set start time when the user submits the message
-    setIsAssistantTyping(true) // Show the assistant's typing placeholder immediately
-  }
+      conversationId: selectedConversationId,
+      userPrompt,
+      messages,
+      maxTokens: tokenLimit,
+      temperature: temperature,
+      model: "Intel/neural-chat-7b-v3-3",
+    });
+    setPrompt("");
+    setStartTime(Date.now());
+    setIsAssistantTyping(true);
+  };
 
   const scrollToBottom = () => {
-    scrollViewport.current!.scrollTo({ top: scrollViewport.current!.scrollHeight })
-  }
+    scrollViewport.current!.scrollTo({ top: scrollViewport.current!.scrollHeight });
+  };
 
   useEffect(() => {
-    // Update token data for the current message
     if (onGoingResult && startTime && currentMessageIndex !== -1) {
-      const tokenLength = onGoingResult.split(" ").length // Estimate tokens based on words
-      const currentTimestamp = Date.now()
-  
-      const elapsedTime = (currentTimestamp - startTime) / 1000 // seconds
-      const tokenRate = elapsedTime > 0 ? tokenLength / elapsedTime : 0
-  
-      // Update token data for the current message
+      let tokenLength: number;
+      if (isAgent) {
+        const currentSteps = getCurrentAgentSteps();
+        const allContent = currentSteps.flatMap(step => step.content).join(" ");
+        tokenLength = allContent.split(" ").length;
+      } else {
+        tokenLength = onGoingResult.split(" ").length;
+      }
+
+      const currentTimestamp = Date.now();
+      const elapsedTime = (currentTimestamp - startTime) / 1000;
+      const tokenRate = elapsedTime > 0 ? tokenLength / elapsedTime : 0;
+
       setMessageTokenData((prev) => ({
         ...prev,
         [`${selectedConversationId}-${currentMessageIndex}`]: { tokens: tokenLength, rate: tokenRate, time: elapsedTime },
-      }))
-  
-      setIsAssistantTyping(false)
+      }));
+
+      setIsAssistantTyping(false);
     }
-  
-    scrollToBottom()
-  }, [onGoingResult, startTime, selectedConversation?.Messages, currentMessageIndex])
+
+    scrollToBottom();
+  }, [onGoingResult, startTime, selectedConversation?.Messages, currentMessageIndex, isAgent]);
 
   const handleKeyDown: KeyboardEventHandler = (event) => {
     if (!event.shiftKey && event.key === toSend) {
-      handleSubmit()
+      handleSubmit();
       setTimeout(() => {
-        setPrompt("")
-      }, 1)
+        setPrompt("");
+      }, 1);
     }
-  }
+  };
 
   const handleNewConversation = () => {
-    dispatch(newConversation())
-  }
+    dispatch(newConversation());
+  };
 
   const handleChange = (event: SyntheticEvent) => {
-    event.preventDefault()
-    setPrompt((event.target as HTMLTextAreaElement).value)
-  }
+    event.preventDefault();
+    setPrompt((event.target as HTMLTextAreaElement).value);
+  };
 
   return (
     <div className={styleClasses.conversationWrapper}>
@@ -140,11 +138,10 @@ const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
             <span className={styleClasses.spacer}></span>
             <Group>
               {selectedConversation && selectedConversation?.Messages.length > 0 && (
-                <ActionIcon onClick={handleNewConversation} disabled={onGoingResult != ""} size={32} variant="default">
+                <ActionIcon onClick={handleNewConversation} disabled={onGoingResult !== ""} size={32} variant="default">
                   <IconMessagePlus />
                 </ActionIcon>
               )}
-
               <Tooltip
                 label={enabledUiFeatures.dataprep ? "Upload File" : "Data Prep node is not found in the flow."}
                 color={enabledUiFeatures.dataprep ? "blue" : "red"}
@@ -167,13 +164,11 @@ const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
             )}
 
             {selectedConversation?.Messages.map((message, index) => {
-              const messageKey = `${selectedConversationId}-${index-1}`
-              const tokenData = messageTokenData[messageKey]
-              const elapsedTime = tokenData?.time ?? 0
-              const tokens = tokenData?.tokens ?? 0
-              const rate = tokenData?.rate ?? 0
-
-              console.log("Message: ", message, "Message Key: ", messageKey, "Token Data: ", tokenData)
+              const messageKey = `${selectedConversationId}-${index - 1}`;
+              const tokenData = messageTokenData[messageKey];
+              const elapsedTime = tokenData?.time ?? 0;
+              const tokens = tokenData?.tokens ?? 0;
+              const rate = tokenData?.rate ?? 0;
 
               return (
                 <ConversationMessage
@@ -184,8 +179,9 @@ const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
                   elapsedTime={message.role === MessageRole.Assistant ? elapsedTime : undefined}
                   tokenCount={message.role === MessageRole.Assistant ? tokens : undefined}
                   tokenRate={message.role === MessageRole.Assistant ? rate : undefined}
+                  agentSteps={message.agentSteps || []}
                 />
-              )
+              );
             })}
 
             {selectedConversation && isAssistantTyping && (
@@ -193,10 +189,11 @@ const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
                 key={`_ai_placeholder`}
                 date={Date.now()}
                 human={false}
-                message={"..."} // Placeholder text while the response is being generated
-                elapsedTime={0} // Start with 0 seconds
-                tokenCount={0} // Start with 0 tokens
-                tokenRate={0} // Start with 0 tokens per second
+                message={"..."}
+                elapsedTime={0}
+                tokenCount={0}
+                tokenRate={0}
+                agentSteps={getCurrentAgentSteps()}
               />
             )}
 
@@ -209,27 +206,41 @@ const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
                 elapsedTime={messageTokenData[`${selectedConversationId}-${currentMessageIndex}`]?.time}
                 tokenCount={messageTokenData[`${selectedConversationId}-${currentMessageIndex}`]?.tokens}
                 tokenRate={messageTokenData[`${selectedConversationId}-${currentMessageIndex}`]?.rate}
+                agentSteps={getCurrentAgentSteps()}
               />
-            )}           
+            )}
           </div>
 
           <div className={styleClasses.conversatioSliders}>
-              <Stack style={{ marginLeft: '10px' }}>
-                <Title size="sm">Inference Settings</Title>
-                <Text size="sm">Token Limit: {tokenLimit}</Text>
-                <Slider value={tokenLimit} onChange={setTokenLimit} min={10} max={500} step={1} />
-                <Text size="sm">Temperature: {temperature.toFixed(2)}</Text>
-                <Slider value={temperature} onChange={setTemperature} min={0.10} max={1.00} step={0.01} />
-                <Textarea
-                  label="System Prompt"
-                  placeholder="Set system prompt"
-                  value={systemPrompt}
-                  onChange={(e) => setSystemPrompt(e.target.value)}
-                  size="sm"
-                  mb="sm"
-                />
-              </Stack>
-          </div>
+          <Button
+            variant="light"
+            size="xs"
+            radius="xl"
+            onClick={() => setShowInferenceParams(!showInferenceParams)}
+            rightSection={showInferenceParams ? <IconChevronDown size={14} /> : <IconChevronUp size={14} />}
+            mb="xs"
+          >
+            {showInferenceParams ? "Hide Inference Settings" : "Show Inference Settings"}
+          </Button>
+          <Collapse in={showInferenceParams} mb="md">
+            <Stack style={{ marginLeft: '10px' }}>
+              <Title size="sm">Inference Settings</Title>
+              <Text size="sm">Token Limit: {tokenLimit}</Text>
+              <Slider value={tokenLimit} onChange={setTokenLimit} min={10} max={500} step={1} />
+              <Text size="sm">Temperature: {temperature.toFixed(2)}</Text>
+              <Slider value={temperature} onChange={setTemperature} min={0.10} max={1.00} step={0.01} />
+              <Textarea
+                label="System Prompt"
+                placeholder="Set system prompt"
+                value={systemPrompt}
+                onChange={(e) => setSystemPrompt(e.target.value)}
+                size="sm"
+                mb="sm"
+              />
+            </Stack>
+          </Collapse>
+        </div>
+
 
           <div className={styleClasses.conversationActions}>
             <Tooltip
@@ -258,7 +269,7 @@ const Conversation = ({ title, enabledUiFeatures }: ConversationProps) => {
       </div>
       <DataSource opened={fileUploadOpened} onClose={closeFileUpload} />
     </div>
-  )
-}
+  );
+};
 
-export default Conversation
+export default Conversation;
\ No newline at end of file
diff --git a/app-frontend/react/src/components/Conversation/conversation.module.scss b/app-frontend/react/src/components/Conversation/conversation.module.scss
index 6eb7435..3d0c1a0 100644
--- a/app-frontend/react/src/components/Conversation/conversation.module.scss
+++ b/app-frontend/react/src/components/Conversation/conversation.module.scss
@@ -19,17 +19,14 @@
     position: relative;
     .conversationContentMessages {
       @include absolutes;
-      // @include flex(column, nowrap, flex-start, flex-start);
-
       display: grid;
       grid-template-areas:
         "header"
         "messages"
         "sliders"
         "inputs";
-
       grid-template-columns: auto;
-      grid-template-rows: 60px auto 300px 125px;
+      grid-template-rows: 60px auto min-content 125px; /* Adjusted for flexibility */
 
       .conversationTitle {
         grid-area: header;
@@ -50,14 +47,13 @@
       }
 
       .conversatioSliders {
-        // padding: --var()
         grid-area: sliders;
         padding: 18px;
         border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+        min-height: 50px; /* Ensure the area doesn't collapse */
       }
 
       .conversationActions {
-        // padding: --var()
         grid-area: inputs;
         padding: 18px;
         border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
diff --git a/app-frontend/react/src/components/Message/conversationMessage.tsx b/app-frontend/react/src/components/Message/conversationMessage.tsx
index e5c6159..430cb44 100644
--- a/app-frontend/react/src/components/Message/conversationMessage.tsx
+++ b/app-frontend/react/src/components/Message/conversationMessage.tsx
@@ -1,66 +1,129 @@
 // Copyright (C) 2024 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { IconAi, IconUser } from "@tabler/icons-react"
-import style from "./conversationMessage.module.scss"
-import { Group, Loader, Text, Tooltip } from "@mantine/core"
-import { DateTime } from "luxon"
+import { IconAi, IconUser } from "@tabler/icons-react";
+import style from "./conversationMessage.module.scss";
+import { Badge, Card, Loader, Text, Tooltip, Button, Collapse, Flex } from "@mantine/core";
+import { DateTime } from "luxon";
+import { useState } from 'react';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
+import { AgentStep } from '../../redux/Conversation/ConversationSlice';
 
 export interface ConversationMessageProps {
-  message: string
-  human: boolean
-  date: number
-  tokenCount?: number // Added tokenCount prop
-  tokenRate?: number  // Added tokenRate prop
-  elapsedTime?: number // Added elapsedTime prop
+  message: string;
+  human: boolean;
+  date: number;
+  tokenCount?: number;
+  tokenRate?: number;
+  elapsedTime?: number;
+  agentSteps: AgentStep[];
 }
 
-export function ConversationMessage({ human, message, date, elapsedTime, tokenCount, tokenRate }: ConversationMessageProps) {
+export function ConversationMessage({ human, message, date, elapsedTime, tokenCount, tokenRate, agentSteps }: ConversationMessageProps) {
   const dateFormat = () => {
-    return DateTime.fromJSDate(new Date(date)).toLocaleString(DateTime.DATETIME_MED)
-  }
+    return DateTime.fromJSDate(new Date(date)).toLocaleString(DateTime.DATETIME_MED);
+  };
+
+  const [showThoughts, setShowThoughts] = useState<boolean>(true);
 
   return (
     <div className={style.conversationMessage}>
-      <Group>
-        {human && <IconUser />}
-        {!human && <IconAi />}
-
+      <Flex align="flex-start" gap="md" mb="sm">
+        {human ? <IconUser size={20} /> : <IconAi size={20} />}
+        
         <div>
-          <Text size="sm">
+          <Text size="sm" fw={500}>
             {human ? "You" : "Assistant"}
           </Text>
-          <Text size="xs" c="dimmed">
+          <Text size="xs" c="gray.6">
             {dateFormat()}
           </Text>
         </div>
-      </Group>
+      </Flex>
 
-      
-      {
-        human? (
-          <Text pl={54} size="sm">
-            {message}
-          </Text>
-        ) : message === "..." ? (
-          <Loader size="xs" />
-        ) : (
-          <Text pl={54} size="sm">
-            {message}
-          </Text>
-        )
-      }
+      {!human && (
+        <div style={{ marginLeft: 34 }}>
+          <Button
+            variant="light"
+            size="xs"
+            radius="xl"
+            onClick={() => setShowThoughts(!showThoughts)}
+            rightSection={showThoughts ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
+            mb="xs"
+          >
+            {showThoughts ? "Hide Thinking" : "Show Thinking"}
+          </Button>
+          <Collapse in={showThoughts} mb="md">
+            {agentSteps.length > 0 ? (
+              agentSteps.map((step, index) => (
+                <Card 
+                  key={`step_${index}`}
+                  shadow="sm" 
+                  padding="md" 
+                  radius="md" 
+                  withBorder 
+                  style={{ maxWidth: "80%", marginBottom: "10px" }}
+                >
+                  <Card.Section p="sm" bg="gray.1">
+                    <Badge color="blue" style={{ marginRight: "10px" }}>
+                      Step {index + 1}
+                    </Badge>
+                    {step.tool && (
+                      <Badge variant="light">
+                        Tool: {step.tool}
+                      </Badge>
+                    )}
+                  </Card.Section>
+                  {step.content.length > 0 && (
+                    <Text size="sm" c="gray.6" mt="xs">
+                      Content: {step.content.join(", ")}
+                    </Text>
+                  )}
+                  {step.source.length > 0 && (
+                    <Text size="sm" c="gray.6" mt="xs">
+                      Source: {step.source.join(", ")}
+                    </Text>
+                  )}
+                </Card>
+              ))
+            ) : (
+              <Card 
+                shadow="sm" 
+                padding="md" 
+                radius="md" 
+                withBorder 
+                style={{ maxWidth: "80%" }}
+              >
+                <Text size="sm" c="gray.6" mt="xs">
+                  Thinking...
+                </Text>
+              </Card>
+            )}
+          </Collapse>
+        </div>
+      )}
+
+      <Text 
+        pl={34} 
+        size="sm" 
+        style={{ 
+          whiteSpace: 'pre-wrap',
+          maxWidth: "90%"
+        }}
+      >
+        {human ? message : message === "..." ? <Loader size="xs" /> : message}
+      </Text>
 
       {!human && elapsedTime !== undefined && tokenCount !== undefined && tokenRate !== undefined && (
         <Tooltip.Floating 
           label="Tokens/s is calculated by the frontend application with network latency taken into account."
           color="blue"
-          >
-          <Text pl={54} size="xs" c="dimmed">
-            End-to-End Time: {elapsedTime.toFixed(2)}s, Tokens: {tokenCount}, Tokens/s: {tokenRate.toFixed(2)}
+        >
+          <Text pl={34} size="xs" c="gray.5" mt="xs">
+            Time: {elapsedTime.toFixed(2)}s • Tokens: {tokenCount} • {tokenRate.toFixed(2)} tokens/s
           </Text>
         </Tooltip.Floating>
       )}
     </div>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/app-frontend/react/src/redux/Conversation/Conversation.ts b/app-frontend/react/src/redux/Conversation/Conversation.ts
index 5a56289..835a049 100644
--- a/app-frontend/react/src/redux/Conversation/Conversation.ts
+++ b/app-frontend/react/src/redux/Conversation/Conversation.ts
@@ -9,6 +9,7 @@ export type ConversationRequest = {
   maxTokens: number;
   temperature: number;
 };
+
 export enum MessageRole {
   Assistant = "assistant",
   User = "user",
@@ -19,6 +20,7 @@ export interface Message {
   role: MessageRole;
   content: string;
   time: number;
+  agentSteps?: AgentStep[]; // Optional, only for assistant messages
 }
 
 export interface Conversation {
@@ -27,9 +29,16 @@ export interface Conversation {
   Messages: Message[];
 }
 
+export interface AgentStep {
+  tool: string;
+  content: any[];
+  source: string[];
+}
+
 export interface ConversationReducer {
   selectedConversationId: string;
   conversations: Conversation[];
   onGoingResult: string;
   fileDataSources: any;
-}
+  isAgent: boolean;
+}
\ No newline at end of file
diff --git a/app-frontend/react/src/redux/Conversation/ConversationSlice.ts b/app-frontend/react/src/redux/Conversation/ConversationSlice.ts
index 5445a35..9202bcd 100644
--- a/app-frontend/react/src/redux/Conversation/ConversationSlice.ts
+++ b/app-frontend/react/src/redux/Conversation/ConversationSlice.ts
@@ -19,11 +19,18 @@ export interface FileDataSource {
   startTime: number;
 }
 
+export interface AgentStep {
+  tool: string;
+  content: any[];
+  source: string[];
+}
+
 const initialState: ConversationReducer = {
   conversations: [],
   selectedConversationId: "",
   onGoingResult: "",
-  fileDataSources: [] as FileDataSource[], // New state for files and data sources
+  fileDataSources: [] as FileDataSource[],
+  isAgent: false,
 };
 
 export const ConversationSlice = createSlice({
@@ -34,6 +41,7 @@ export const ConversationSlice = createSlice({
       state.conversations = [];
       state.selectedConversationId = "";
       state.onGoingResult = "";
+      state.isAgent = false;
     },
     setOnGoingResult: (state, action: PayloadAction<string>) => {
       state.onGoingResult = action.payload;
@@ -43,7 +51,9 @@ export const ConversationSlice = createSlice({
       selectedConversation?.Messages?.push(action.payload);
     },
     newConversation: (state) => {
-      (state.selectedConversationId = ""), (state.onGoingResult = "");
+      state.selectedConversationId = "";
+      state.onGoingResult = "";
+      state.isAgent = false;
     },
     createNewConversation: (state, action: PayloadAction<{ title: string; id: string; message: Message }>) => {
       state.conversations.push({
@@ -73,6 +83,9 @@ export const ConversationSlice = createSlice({
         fileDataSource.status = action.payload.status;
       }
     },
+    setIsAgent: (state, action: PayloadAction<boolean>) => {
+      state.isAgent = action.payload;
+    },
   },
   extraReducers(builder) {
     builder.addCase(uploadFile.fulfilled, () => {
@@ -82,15 +95,15 @@ export const ConversationSlice = createSlice({
         loading: false,
         autoClose: 3000,
       });
-    }),
-      builder.addCase(uploadFile.rejected, () => {
-        notifications.update({
-          color: "red",
-          id: "upload-file",
-          message: "Failed to Upload file",
-          loading: false,
-        });
+    });
+    builder.addCase(uploadFile.rejected, () => {
+      notifications.update({
+        color: "red",
+        id: "upload-file",
+        message: "Failed to Upload file",
+        loading: false,
       });
+    });
     builder.addCase(submitDataSourceURL.fulfilled, () => {
       notifications.show({
         message: "Submitted Successfully",
@@ -117,11 +130,12 @@ export const submitDataSourceURL = createAsyncThunkWrapper(
       const response = await client.post(`${DATA_PREP_URL}/ingest`, body);
       return response.data;
     } catch (error) {
-      console.log ("error", error);
+      console.log("error", error);
       throw error;
     }
   },
 );
+
 export const uploadFile = createAsyncThunkWrapper("conversation/uploadFile", async ({ file }: { file: File }) => { 
   try {
     const body = new FormData();
@@ -138,6 +152,7 @@ export const uploadFile = createAsyncThunkWrapper("conversation/uploadFile", asy
     throw error;
   }
 });
+
 export const {
   logout,
   setOnGoingResult,
@@ -148,15 +163,24 @@ export const {
   addFileDataSource,
   updateFileDataSourceStatus,
   clearFileDataSources,
+  setIsAgent,
 } = ConversationSlice.actions;
+
 export const conversationSelector = (state: RootState) => state.conversationReducer;
 export const fileDataSourcesSelector = (state: RootState) => state.conversationReducer.fileDataSources;
+export const isAgentSelector = (state: RootState) => state.conversationReducer.isAgent;
+
 export default ConversationSlice.reducer;
 
+let source: string[] = [];
+let content: any[] = [];
+let currentTool: string = "";
+let isAgent: boolean = false;
+let currentAgentSteps: AgentStep[] = []; // Temporary storage for steps during streaming
+
 export const doConversation = (conversationRequest: ConversationRequest) => {
-  const { conversationId, userPrompt, messages, model, maxTokens, temperature} = conversationRequest;
+  const { conversationId, userPrompt, messages, model, maxTokens, temperature } = conversationRequest;
   if (!conversationId) {
-    // New conversation
     const id = uuidv4();
     store.dispatch(
       createNewConversation({
@@ -182,9 +206,17 @@ export const doConversation = (conversationRequest: ConversationRequest) => {
     stream: true,
   };
 
-  // Initialize token tracking
+  function isJsonParsable(str: string): boolean {
+    try {
+      JSON.parse(str);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
   let result = "";
-  // let totalTokens = 0;
+  currentAgentSteps = []; // Reset steps for this message
 
   try {
     console.log("CHAT_QNA_URL", CHAT_QNA_URL);
@@ -207,31 +239,54 @@ export const doConversation = (conversationRequest: ConversationRequest) => {
         }
       },
       onmessage(msg) {
-        if (msg?.data != "[DONE]") {
-          try {
-            const match = msg.data.match(/b'([^']*)'/);
-            if (match && match[1] != "</s>") {
-              const extractedText = match[1];
-
-              // Check for the presence of \x hexadecimal
-              if (extractedText.includes("\\x")) {
-                const decodedText = decodeEscapedBytes(extractedText);
-                result += decodedText;
-              } else {
-                result += extractedText;
-              }
-            } else if (!match) {
-              result += msg?.data;
+        if (msg?.data !== "[DONE]") {
+          if (isJsonParsable(msg.data)) {
+            isAgent = true;
+            store.dispatch(setIsAgent(true));
+            const currentMsg = JSON.parse(msg.data);
+            if (currentMsg.tool || currentMsg.source || currentMsg.content) {
+              currentAgentSteps.push({
+                tool: currentMsg.tool || currentTool,
+                content: currentMsg.content || [],
+                source: currentMsg.source || [],
+              });
             }
-
-            // Update ongoing result
-            if (result) {
-              store.dispatch(setOnGoingResult(result));
+            currentTool = currentMsg.tool? currentMsg.tool: "";
+            source = currentMsg.source? currentMsg.source: "";
+            if (currentMsg.content) {
+              content = [...content, ...currentMsg.content];
+              result = currentMsg.content[0];
+            }
+            console.log(currentMsg);
+            console.log("currentTool", currentTool);
+            console.log("source", source);
+            console.log("content", content);
+          } else {
+            try {
+              const match = msg.data.match(/b'([^']*)'/);
+              if (match && match[1] !== "</s>") {
+                const extractedText = match[1];
+                if (extractedText.includes("\\x")) {
+                  const decodedText = decodeEscapedBytes(extractedText);
+                  result += decodedText;
+                } else {
+                  result += extractedText;
+                }
+              } else if (!match) {
+                result += msg?.data;
+              }
+              if (result) {
+                store.dispatch(setOnGoingResult(result));
+              }
+            } catch (e) {
+              console.log("something wrong in msg", e);
+              throw e;
             }
-
-          } catch (e) {
-            console.log("something wrong in msg", e);
-            throw e;
+          }
+        } else {
+          if (isAgent) {
+            console.log("final answer:", result);
+            store.dispatch(setOnGoingResult(result));
           }
         }
       },
@@ -241,29 +296,32 @@ export const doConversation = (conversationRequest: ConversationRequest) => {
         throw err;
       },
       onclose() {
-        // Handle close
         store.dispatch(setOnGoingResult(""));
+        console.log("onclose", result);
         store.dispatch(
           addMessageToMessages({
             role: MessageRole.Assistant,
             content: result,
             time: getCurrentTimeStamp(),
-            // tokenCount: totalTokens,
-            // tokenRate: tokensPerSecond,
+            agentSteps: [...currentAgentSteps], // Store steps with this message
           }),
         );
+        currentAgentSteps = []; // Clear steps for the next message
+        isAgent = false;
+        store.dispatch(setIsAgent(false));
       },
     });
   } catch (err) {
     console.log(err);
   }
 };
-// decode \x hexadecimal encoding
+
 function decodeEscapedBytes(str: string): string {
-  // Convert the byte portion separated by \x into a byte array and decode it into a UTF-8 string
   const byteArray: number[] = str
     .split("\\x")
     .slice(1)
     .map((byte: string) => parseInt(byte, 16));
   return new TextDecoder("utf-8").decode(new Uint8Array(byteArray));
 }
+
+export const getCurrentAgentSteps = () => currentAgentSteps; // Export for use in Conversation.tsx
\ No newline at end of file