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)