sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
sabaimran 2024-10-27 15:48:13 -07:00
parent 101ea6efb1
commit 68499e253b
1 changed files with 36 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/interface/web/app/components/chatHistory/chatHistory.tsx
View file

@ -54,29 +54,32 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
const [collapsed, setCollapsed] = useState(props.completed); const [collapsed, setCollapsed] = useState(props.completed);
return ( 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" />} {!props.completed && <InlineLoading className="float-right" />}
{collapsed ? ( {props.completed &&
<Button (collapsed ? (
className="w-fit text-left justify-start content-start text-xs" <Button
onClick={() => setCollapsed(false)} className="w-fit text-left justify-start content-start text-xs"
variant="ghost" onClick={() => setCollapsed(false)}
size="sm" variant="ghost"
> size="sm"
What was my train of thought? >
</Button> What was my train of thought?
) : ( </Button>
<Button ) : (
className="w-fit text-left justify-start content-start text-xs" <Button
onClick={() => setCollapsed(true)} className="w-fit text-left justify-start content-start text-xs p-0"
variant="ghost" onClick={() => setCollapsed(true)}
size="sm" variant="ghost"
> size="sm"
<XCircle size={16} className="mr-1" /> >
Close <XCircle size={16} className="mr-1" />
</Button> Close
)} </Button>
))}
{!collapsed && {!collapsed &&
props.trainOfThought.map((train, index) => ( props.trainOfThought.map((train, index) => (
<TrainOfThought <TrainOfThought
@ -292,17 +295,6 @@ export default function ChatHistory(props: ChatHistoryProps) {
data.chat && data.chat &&
data.chat.map((chatMessage, index) => ( 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 <ChatMessage
key={`${index}fullHistory`} key={`${index}fullHistory`}
ref={ ref={
@ -323,6 +315,17 @@ export default function ChatHistory(props: ChatHistoryProps) {
borderLeftColor={`${data?.agent?.color}-500`} borderLeftColor={`${data?.agent?.color}-500`}
isLastMessage={index === data.chat.length - 1} 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 && {props.incomingMessages &&