Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
TorstenC opened this issue Sep 9, 2024 · 2 comments
Open

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

TorstenC opened this issue Sep 9, 2024 · 2 comments
Labels
enhancement New feature or request

Comments

@TorstenC
Copy link

TorstenC commented Sep 9, 2024

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

@TorstenC TorstenC added the enhancement New feature or request label Sep 9, 2024
Copy link

linear bot commented Sep 9, 2024

Copy link

dosubot bot commented Sep 9, 2024

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>
  );
};
  1. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant