[Feature]: Enable Editing of Previous Messages in Chat Interface

[TorstenC]

The Feature

I propose that the Quivr web interface should provide the capability to edit previous messages from both the user and the agent before submitting (round-trip). This functionality should be similar to the feature available at console.anthropic.com/workbench and platform.openai.com/playground/chat.

Motivation, pitch

This feature significantly simplifies the chat dialogue and enhances collaboration efficiency with the language model (LLM). Here are two typical use cases that illustrate the advantages:

1. Clarification and Context Addition: If I forget to specify that my question relates to Linux, I can update my original query with “in Linux” and remove the irrelevant part of the agent’s response (e.g., related to Windows) before asking my follow-up question.

2. Specific Adjustments in Responses: If the response includes a placeholder for a file path such as "your/path/to/config.yaml," I can replace this placeholder with the correct path. This ensures that all further code adjustments include the correct path.

By allowing the editing of previous messages, interactions become clearer and more precise, minimizing misunderstandings and making the workflow smoother.

Twitter / LinkedIn details

No response

[linear[bot]]

CORE-198 [Feature]: Enable Editing of Previous Messages in Chat Interface

[dosubot[bot]]

Hey @TorstenC! I'm here to help you with any bugs, questions, or contributions. Let me know what you need assistance with!

To enable the editing of previous messages in the Quivr web interface, you can leverage the existing update_message_by_id method in the ChatRepository class, which allows for updating a message by its ID ^[1]. Here’s a high-level approach to implement this feature:

Backend Changes

1. Update Message Endpoint:
   • Create an API endpoint to handle the update requests for chat messages.
   • Use the update_message_by_id method to update the message content in the database.

from fastapi import APIRouter, HTTPException
from uuid import UUID
from pydantic import BaseModel

class UpdateMessageRequest(BaseModel):
    message_id: UUID
    new_content: str

router = APIRouter()

@router.put("/chat/{chat_id}/message")
async def update_message(chat_id: UUID, request: UpdateMessageRequest):
    try:
        updated_message = chat_service.update_message_by_id(request.message_id, {"content": request.new_content})
        return updated_message
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

Frontend Changes

1. UI for Editing Messages:
   • Add an edit button next to each message in the chat interface.
   • When the edit button is clicked, replace the message text with a text input field pre-filled with the current message content.

import { useState } from "react";

const MessageRow = ({ message, onUpdate }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [newContent, setNewContent] = useState(message.content);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onUpdate(message.id, newContent);
    setIsEditing(false);
  };

  return (
    <div>
      {isEditing ? (
        <input
          type="text"
          value={newContent}
          onChange={(e) => setNewContent(e.target.value)}
        />
      ) : (
        <span>{message.content}</span>
      )}
      <button onClick={handleEdit}>Edit</button>
      {isEditing && <button onClick={handleSave}>Save</button>}
    </div>
  );
};

2. Handling Update Requests:
   • Implement a function to send the updated message content to the backend.

import { useState } from "react";
import axios from "axios";

const Chat = ({ chatId, messages }) => {
  const [chatMessages, setChatMessages] = useState(messages);

  const handleUpdateMessage = async (messageId, newContent) => {
    try {
      const response = await axios.put(`/chat/${chatId}/message`, {
        message_id: messageId,
        new_content: newContent,
      });
      setChatMessages((prevMessages) =>
        prevMessages.map((msg) =>
          msg.id === messageId ? { ...msg, content: newContent } : msg
        )
      );
    } catch (error) {
      console.error("Failed to update message", error);
    }
  };

  return (
    <div>
      {chatMessages.map((message) => (
        <MessageRow key={message.id} message={message} onUpdate={handleUpdateMessage} />
      ))}
    </div>
  );
};

Summary

By implementing these changes, you can enable the editing of previous messages in the Quivr web interface, enhancing the flexibility and accuracy of interactions with the language model. This feature will allow users to clarify and adjust their queries and responses, making the chat dialogue more efficient and effective.

To continue talking to Dosu, mention @dosu.