Repository: Mintplex-Labs/anything-llm
File: frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx (JavaScript)

Code before:
    setHasChanges(true);
  };

  const removeMessage = (index) => {
    const messages = [...suggestedMessages];
    messages.splice(index, 1);
    setSuggestedMessages(messages);
    setHasChanges(true);
  };

  const startEditing = (e, index) => {
    e.preventDefault();
    setEditingIndex(index);
    const suggestion = suggestedMessages[index];
    // Legacy messages may have a separate heading field. Merge it into the message
    // on edit so the user can manage everything in a single input going forward.
    if (suggestion.heading) {
      const merged = {
        heading: "",
        message: `${suggestion.heading} ${suggestion.message}`,
      };
      setNewMessage(merged);
      setSuggestedMessages(
        suggestedMessages.map((msg, i) => (i === index ? merged : msg))
      );
      setHasChanges(true);
    } else {
      setNewMessage({ ...suggestion });
    }
  };

  const handleRemoveMessage = (index) => {
    removeMessage(index);
    setEditingIndex(-1);
  };

  const onEditChange = (e) => {
    const updatedNewMessage = {
      ...newMessage,
      [e.target.name]: e.target.value,
    };
    setNewMessage(updatedNewMessage);
    const updatedMessages = suggestedMessages.map((message, index) => {
      if (index === editingIndex) {
        return { ...message, [e.target.name]: e.target.value };
      }
      return message;
    });

    setSuggestedMessages(updatedMessages);
    setHasChanges(true);

Review comment (suggestion):
Not like a super dire problem here, but just something I found.


`hasChanges` set too early in this case:

  The problem:

```ts
  const startEditing = (e, index) => {
    // ...
    if (suggestion.heading) {
      const merged = { heading: "", message: `${suggestion.heading} ${suggestion.message}` };
      setNewMessage(merged);
      setSuggestedMessages(/* ... */);
      setHasChanges(true);  // ← Problem: marked dirty immediately
    }
  };
```
  Scenario:
  1. User has a legacy message: { heading: "Ask me", message: "about docs" }
  2. User clicks "Edit" on it (just to look)
  3. startEditing runs → hasChanges becomes true
  4. User decides "never mind" and clicks elsewhere
  5. The "Save" button is now enabled even though the user didn't intentionally change anything

Code after:
    setNewMessage(defaultMessage);
    setSuggestedMessages([...suggestedMessages, { ...defaultMessage }]);
    setHasChanges(true);
  };

  const removeMessage = (index) => {
    const messages = [...suggestedMessages];
    messages.splice(index, 1);
    setSuggestedMessages(messages);
    setHasChanges(true);
  };

  const startEditing = (e, index) => {
    e.preventDefault();
    setEditingIndex(index);
    const suggestion = suggestedMessages[index];
    // Legacy messages may have a separate heading field. Merge it into the message
    // on edit so the user can manage everything in a single input going forward.
    if (suggestion.heading) {
      const merged = {
        heading: "",
        message: `${suggestion.heading} ${suggestion.message}`,
      };
      setNewMessage(merged);
      setSuggestedMessages(
        suggestedMessages.map((msg, i) => (i === index ? merged : msg))
      );
    } else {
      setNewMessage({ ...suggestion });
    }
  };

  const handleRemoveMessage = (index) => {
    removeMessage(index);
    setEditingIndex(-1);
  };

  const onEditChange = (e) => {
    const updatedNewMessage = {
      ...newMessage,
      [e.target.name]: e.target.value,
    };
    setNewMessage(updatedNewMessage);
    const updatedMessages = suggestedMessages.map((message, index) => {
      if (index === editingIndex) {
        return { ...message, [e.target.name]: e.target.value };
      }
      return message;
    });

    setSuggestedMessages(updatedMessages);