Fix deleting new messages generated after conversation load

This commit is contained in:
Debanjum
2024-10-30 18:10:43 -07:00
parent cb90abc660
commit e8e6ead39f
8 changed files with 60 additions and 29 deletions

View File

@@ -34,8 +34,9 @@ interface ChatHistory {
interface ChatHistoryProps {
conversationId: string;
setTitle: (title: string) => void;
incomingMessages?: StreamMessage[];
pendingMessage?: string;
incomingMessages?: StreamMessage[];
setIncomingMessages?: (incomingMessages: StreamMessage[]) => void;
publicConversationSlug?: string;
setAgent: (agent: AgentData) => void;
customClassName?: string;
@@ -97,6 +98,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
const [data, setData] = useState<ChatHistoryData | null>(null);
const [currentPage, setCurrentPage] = useState(0);
const [hasMoreMessages, setHasMoreMessages] = useState(true);
const [currentTurnId, setCurrentTurnId] = useState<string | null>(null);
const sentinelRef = useRef<HTMLDivElement | null>(null);
const scrollAreaRef = useRef<HTMLDivElement | null>(null);
const latestUserMessageRef = useRef<HTMLDivElement | null>(null);
@@ -177,6 +179,10 @@ export default function ChatHistory(props: ChatHistoryProps) {
if (lastMessage && !lastMessage.completed) {
setIncompleteIncomingMessageIndex(props.incomingMessages.length - 1);
props.setTitle(lastMessage.rawQuery);
// Store the turnId when we get it
if (lastMessage.turnId) {
setCurrentTurnId(lastMessage.turnId);
}
}
}
}, [props.incomingMessages]);
@@ -279,6 +285,8 @@ export default function ChatHistory(props: ChatHistoryProps) {
}
const handleDeleteMessage = (turnId?: string) => {
if (!turnId) return;
setData((prevData) => {
if (!prevData || !turnId) return prevData;
return {
@@ -286,6 +294,13 @@ export default function ChatHistory(props: ChatHistoryProps) {
chat: prevData.chat.filter((msg) => msg.turnId !== turnId),
};
});
// Update incoming messages if they exist
if (props.incomingMessages && props.setIncomingMessages) {
props.setIncomingMessages(
props.incomingMessages.filter((msg) => msg.turnId !== turnId),
);
}
};
if (!props.conversationId && !props.publicConversationSlug) {
@@ -341,6 +356,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
))}
{props.incomingMessages &&
props.incomingMessages.map((message, index) => {
const messageTurnId = message.turnId ?? currentTurnId ?? undefined;
return (
<React.Fragment key={`incomingMessage${index}`}>
<ChatMessage
@@ -356,13 +372,13 @@ export default function ChatHistory(props: ChatHistoryProps) {
automationId: "",
images: message.images,
conversationId: props.conversationId,
turnId: message.turnId,
onDeleteMessage: handleDeleteMessage,
turnId: messageTurnId,
}}
customClassName="fullHistory"
borderLeftColor={`${data?.agent?.color}-500`}
onDeleteMessage={handleDeleteMessage}
conversationId={props.conversationId}
turnId={messageTurnId}
/>
{message.trainOfThought && (
<TrainOfThoughtComponent
@@ -393,10 +409,10 @@ export default function ChatHistory(props: ChatHistoryProps) {
"inferred-queries": message.inferredQueries || [],
},
conversationId: props.conversationId,
turnId: message.turnId,
onDeleteMessage: handleDeleteMessage,
turnId: messageTurnId,
}}
conversationId={props.conversationId}
turnId={messageTurnId}
onDeleteMessage={handleDeleteMessage}
customClassName="fullHistory"
borderLeftColor={`${data?.agent?.color}-500`}
@@ -418,7 +434,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
by: "you",
automationId: "",
conversationId: props.conversationId,
onDeleteMessage: handleDeleteMessage,
turnId: undefined,
}}
conversationId={props.conversationId}
onDeleteMessage={handleDeleteMessage}

View File

@@ -149,7 +149,6 @@ export interface SingleChatMessage {
images?: string[];
conversationId: string;
turnId?: string;
onDeleteMessage: (turnId: string) => void;
}
export interface StreamMessage {
@@ -249,6 +248,7 @@ interface ChatMessageProps {
agent?: AgentData;
onDeleteMessage: (turnId?: string) => void;
conversationId: string;
turnId?: string;
}
interface TrainOfThoughtProps {
@@ -662,6 +662,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
}
const deleteMessage = async (message: SingleChatMessage) => {
const turnId = message.turnId || props.turnId;
const response = await fetch("/api/chat/conversation/message", {
method: "DELETE",
headers: {
@@ -669,13 +670,13 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
},
body: JSON.stringify({
conversation_id: props.conversationId,
turn_id: message.turnId,
turn_id: turnId,
}),
});
if (response.ok) {
// Update the UI after successful deletion
props.onDeleteMessage(message.turnId);
props.onDeleteMessage(turnId);
} else {
console.error("Failed to delete message");
}
@@ -743,6 +744,16 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
/>
</button>
))}
<button
title="Delete"
className={`${styles.deleteButton}`}
onClick={() => deleteMessage(props.chatMessage)}
>
<Trash
alt="Delete Message"
className="hsl(var(--muted-foreground)) hover:text-red-500"
/>
</button>
<button
title="Copy"
className={`${styles.copyButton}`}
@@ -764,16 +775,6 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
/>
)}
</button>
<button
title="Delete"
className={`${styles.deleteButton}`}
onClick={() => deleteMessage(props.chatMessage)}
>
<Trash
alt="Delete Message"
className="hsl(var(--muted-foreground)) hover:text-red-500"
/>
</button>
{props.chatMessage.by === "khoj" &&
(props.chatMessage.intent ? (
<FeedbackButtons