diff --git a/src/interface/web/app/components/chatHistory/chatHistory.tsx b/src/interface/web/app/components/chatHistory/chatHistory.tsx
index 31e6c20d..a373da34 100644
--- a/src/interface/web/app/components/chatHistory/chatHistory.tsx
+++ b/src/interface/web/app/components/chatHistory/chatHistory.tsx
@@ -13,13 +13,14 @@ import { ScrollArea } from "@/components/ui/scroll-area";
import { InlineLoading } from "../loading/loading";
-import { Lightbulb, ArrowDown } from "@phosphor-icons/react";
+import { Lightbulb, ArrowDown, XCircle } from "@phosphor-icons/react";
import AgentProfileCard from "../profileCard/profileCard";
import { getIconFromIconName } from "@/app/common/iconUtils";
import { AgentData } from "@/app/agents/page";
import React from "react";
import { useIsMobileWidth } from "@/app/common/utils";
+import { Button } from "@/components/ui/button";
interface ChatResponse {
status: string;
@@ -40,26 +41,51 @@ interface ChatHistoryProps {
customClassName?: string;
}
-function constructTrainOfThought(
- trainOfThought: string[],
- lastMessage: boolean,
- agentColor: string,
- key: string,
- completed: boolean = false,
-) {
- const lastIndex = trainOfThought.length - 1;
- return (
-
- {!completed &&
}
+interface TrainOfThoughtComponentProps {
+ trainOfThought: string[];
+ lastMessage: boolean;
+ agentColor: string;
+ key: string;
+ completed?: boolean;
+}
- {trainOfThought.map((train, index) => (
-
- ))}
+function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
+ const lastIndex = props.trainOfThought.length - 1;
+ const [collapsed, setCollapsed] = useState(props.completed);
+
+ return (
+
+ {!props.completed && }
+ {collapsed ? (
+
+ ) : (
+
+ )}
+
+ {!collapsed &&
+ props.trainOfThought.map((train, index) => (
+
+ ))}
);
}
@@ -265,25 +291,39 @@ export default function ChatHistory(props: ChatHistoryProps) {
{data &&
data.chat &&
data.chat.map((chatMessage, index) => (
-
+ <>
+ {chatMessage.trainOfThought && chatMessage.by === "khoj" && (
+
train.data,
+ )}
+ lastMessage={false}
+ agentColor={data?.agent?.color || "orange"}
+ key={`${index}trainOfThought`}
+ completed={true}
+ />
+ )}
+
+ >
))}
{props.incomingMessages &&
props.incomingMessages.map((message, index) => {
@@ -305,14 +345,15 @@ export default function ChatHistory(props: ChatHistoryProps) {
customClassName="fullHistory"
borderLeftColor={`${data?.agent?.color}-500`}
/>
- {message.trainOfThought &&
- constructTrainOfThought(
- message.trainOfThought,
- index === incompleteIncomingMessageIndex,
- data?.agent?.color || "orange",
- `${index}trainOfThought`,
- message.completed,
- )}
+ {message.trainOfThought && (
+
+ )}
Tuple[Union[ThreadedGenerator, Iterator[str]], Dict[str, str]]:
# Initialize Variables
chat_response = None
@@ -1137,6 +1138,7 @@ def generate_chat_response(
conversation_id=conversation_id,
query_images=query_images,
tracer=tracer,
+ train_of_thought=train_of_thought,
)
conversation_config = ConversationAdapters.get_valid_conversation_config(user, conversation)