Auto-collapse train of thought, show after chat response in history

This commit is contained in:
sabaimran 2024-10-27 15:48:13 -07:00
parent 101ea6efb1
commit 68499e253b

View file

@ -54,9 +54,13 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
const [collapsed, setCollapsed] = useState(props.completed);
return (
<div className={`${!collapsed ? styles.trainOfThought : ""} shadow-sm`} key={props.key}>
<div
className={`${!collapsed ? styles.trainOfThought + " shadow-sm" : ""}`}
key={props.key}
>
{!props.completed && <InlineLoading className="float-right" />}
{collapsed ? (
{props.completed &&
(collapsed ? (
<Button
className="w-fit text-left justify-start content-start text-xs"
onClick={() => setCollapsed(false)}
@ -67,7 +71,7 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
</Button>
) : (
<Button
className="w-fit text-left justify-start content-start text-xs"
className="w-fit text-left justify-start content-start text-xs p-0"
onClick={() => setCollapsed(true)}
variant="ghost"
size="sm"
@ -75,8 +79,7 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
<XCircle size={16} className="mr-1" />
Close
</Button>
)}
))}
{!collapsed &&
props.trainOfThought.map((train, index) => (
<TrainOfThought
@ -292,17 +295,6 @@ export default function ChatHistory(props: ChatHistoryProps) {
data.chat &&
data.chat.map((chatMessage, index) => (
<>
{chatMessage.trainOfThought && chatMessage.by === "khoj" && (
<TrainOfThoughtComponent
trainOfThought={chatMessage.trainOfThought?.map(
(train) => train.data,
)}
lastMessage={false}
agentColor={data?.agent?.color || "orange"}
key={`${index}trainOfThought`}
completed={true}
/>
)}
<ChatMessage
key={`${index}fullHistory`}
ref={
@ -323,6 +315,17 @@ export default function ChatHistory(props: ChatHistoryProps) {
borderLeftColor={`${data?.agent?.color}-500`}
isLastMessage={index === data.chat.length - 1}
/>
{chatMessage.trainOfThought && chatMessage.by === "khoj" && (
<TrainOfThoughtComponent
trainOfThought={chatMessage.trainOfThought?.map(
(train) => train.data,
)}
lastMessage={false}
agentColor={data?.agent?.color || "orange"}
key={`${index}trainOfThought`}
completed={true}
/>
)}
</>
))}
{props.incomingMessages &&