Canvas AI: Make chat history length configurable

Overview

Copied from #4 in #3554026: Canvas AI: Refine the orchestrator prompt

Currently, only the last two messages are sent as history to the orchestrator, which affects the overall user experience.

See the attached video for reference. When asked to create a CTA for a tech journal website, the orchestrator asks whether a code component should be created or an existing component should be added (meaning the page builder should be used). When asked to create a code component, the component agent fails. So I asked the agent to "add an existing component then." The agent then responds with:
"Please let me know what type of existing component or section you would like to add to your page, and any specific details or placements you have in mind."
This happens because it doesn’t have access to the complete chat history.

Another issue is that intermediate status messages from sub-agents are also included in the history. For example:

When you ask the agent to "Create a button code component with a red background," the component agent is invoked. Once the component is created, it outputs:
"I have created a new 'Red Button' component with customizable button text and a red background. Let me know if you need any further adjustments!"

When the orchestrator receives this message, it also outputs something like:
"A new 'Red Button' component has been created with customizable button text and a red background. You can now use and adjust the button text as needed."

Now, when the user asks to change the color to blue, the message history sent to the orchestrator looks like this:
This includes the outputs of both the component agent and the orchestrator, but not the initial user message

[
  {
    "role": "ai",
    "html": "<div style=\"margin-top: 10px;\"><div style=\"display: flex; align-items: center; padding: 8px; background-color: white;\">\n        <span style=\"margin-right: 8px;\"><span class=\"aiCompletedIcon\"></span></span>\n        <span style=\"font-weight: 400;\">Thinking</span>\n      </div><div style=\"padding: 8px; background-color: white; font-size: 14px; line-height: 1.26;\">\n          I have created a new \"Red Button\" component with a customizable button text and a red background. Let me know if you need any further adjustments!\n        </div><div style=\"display: flex; align-items: center; padding: 8px; background-color: white;\">\n        <span style=\"margin-right: 8px;\"><span class=\"aiCompletedIcon\"></span></span>\n        <span style=\"font-weight: 400;\">Generate a component</span>\n      </div><div style=\"padding: 8px; background-color: white; font-size: 14px; line-height: 1.26;\">\n          A new \"Red Button\" component has been created with a customizable button text and a red background. You can now use and adjust the button text as needed.\n        </div></div>"
  },
  {
    "role": "ai",
    "text": "A new \"Red Button\" component has been created with a customizable button text and a red background. You can now use and adjust the button text as needed."
  },
  {
    "role": "user",
    "text": "change its color to blue"
  }
]

I think the sub-agent output can be ignored in the history since the orchestrator already returns a similar message. Instead, the history should look like this:

[
  {
    "role": "user",
    "text": "Add a button with red color"
  },
  {
    "role": "ai",
    "text": "A new 'Red Button' component has been created with a customizable button text and a red background. You can now use and adjust the button text as needed."
  },
  {
    "role": "user",
    "text": "change its color to blue"
  }
]

--------------------------------------------------------

The above observation is partially incorrect. Even though the front end sends sub agent responses to backend, the code only considers user inputs and the orchestrator responses for chat history

  if (!empty($message['text'])) {
      // Sub agent responses contain $message['html'] instead of $message['text']
        $messages[] = new ChatMessage($message['role'] === 'user' ? 'user' : 'assistant', $message['text']);
      }

The real issue is thatCurrently only the last 3 messages are sent to backend due to this setting in web/modules/contrib/canvas/ui/src/components/aiExtension/AiWizard.tsx

          requestBodyLimits={{
            maxMessages: 3,
          }}

We should remove this setting and allow all messages to be sent to the backend. For that, as per the deepchat documentation, the maxMessages value should be set 0 or less.

https://deepchat.dev/docs/connect/#requestBodyLimits

maxMessages is the maximum number of messages counting from the most recent one. If this is set to a number higher than 0 such as 1 - the outgoing request will only include the new user message, if it is 2 - it will also include the message before the latest one (from AI or the user) and so on... If the number is 0 or below - the request will include all messages in the chat. If it is undefined, the request will only include the input text/files.

Proposed resolution

The AIWizard.tsx file had this comment
@todo Revisit once https://www.drupal.org/node/3528730 is in.

That issue suggests using the short-term memory plugin from the AI module to control chat history. The "last_n" plugin provided by AI core could be used, but it simply returns a fixed number of messages from the complete history. In this issue, custom logic is used for the same purpose, as it is more efficient.

Set request body limit in Deep Chat

• Set requestBodyLimits to -1 so the full conversation history is sent to the backend with each request

Make chat history length configurable

• Created src/CanvasAiChatHelper.php with a getFilteredChatHistory method
• This method takes the entire chat history sent from the UI to the backend controller and returns only the number of messages equal to chat_history_max_messages
• Fixes a bug in the previous logic where, if an image message was encountered, a break was triggered in the loop after fetching the image file. This prevented all subsequent messages from being included in the history. The break has been removed.
• Removed the logic where the text accompanying an uploaded image was removed (See: https://git.drupalcode.org/project/canvas/-/merge_requests/687#note_819457)
• Added a chat_history_max_messages setting with default 10
• 0 means no history, -1 means full history, positive values limit to last N messages
• Kept the default history length as 10. Added an update hook to set the history limit as 3 for existing users (the current limit is 3)

Test coverage

• Added kernel tests for the service.

User interface changes