[Obs AI Assistant] Add custom plugin for highlighting user and assistant responses when they have redacted entities

[SrdjanLL]

Closes: https://github.com/elastic/obs-ai-assistant-team/issues/264

Summary

Add custom plugin for highlighting user and assistant responses when they have redacted entities:

• Custom plugin for EuiMarkdownFormat that highlights all content wrapped inside anonymized node. The parsing plugin follows the approach from EUI docs and is used as follows:

    !{anonymized{"entityClass":"<entity class>", "content": "<content"}}
  

  • Highlighted content is currently rendered as EuiCode, but it can be more sophisticated (i.e highlight differently depending on the entity class).
• Allows using the same highlighting logic for messages from both user and assistant roles.
• Currently skipping highlighting inside the code blocks - may require customising the default plugins further (also probably too much to do in my 2nd PR in Kibana 😄).

Manually tested:

• Function calling seems to work as expected.
• Search results with PII are highlighted in the table.
• Custom regex matches are highlighted correctly.

Testing instructions:

1. Used setup from [Obs AI Assistant] Anonymization support #216352 to set up NER model locally.
2. Added to kibana.dev.yml:

uiSettings:
  overrides:
    'observability:aiAssistantAnonymizationRules': |
      [
        {
          "type": "regex",
          "pattern": "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[A-Za-z]{2,}",
          "enabled": true,
          "entityClass": "EMAIL"
        },
        {
          "type": "regex",
          "pattern": "https?://[^\\s]+",
          "enabled": true,
          "entityClass": "URL"
        },
        {
          "type": "regex",
          "pattern": "\\b(?:\\d{1,3}\\.){3}\\d{1,3}\\b",
          "enabled": true,
          "entityClass": "IP"
        },
        {
          "type": "ner",
          "enabled": true
        }
      ]

3. Used the assistant (see screenshots below)

Screenshots

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

[elasticmachine]

Pinging @elastic/obs-ai-assistant (Team:Obs AI Assistant)

[github-actions]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

[dgieselaar]

I suspect we can simplify quite a bit here. If you wrap in <anonymized entityClass="....">${content}</anonymized>, I assume you can either just use CSS or add anonymized as a component to processingPlugins. Perhaps the CSS option is simpler. Also, I wouldn't worry about how it renders in a code block or code tag - that's something we can fix later.

[SrdjanLL]

Thanks for the feedback @dgieselaar and I like the suggested - I'm happy to try this out and see where it lands. My current understanding is that if we want to keep the existing UX for messages we may need to go down the path of the plugins as the content was previously wrapped in EuiMarkdownFormat since we want to utilize the existing plugins (perhaps wrapping with anonymized and processingPlugins could work). If we can go with CSS altogether, that would be ideal.

[SrdjanLL]

@dgieselaar After trying a few things out I found that wrapping into <anonymized> doesn't work without implementing a parsing plugin as, otherwise, all of the markup gets processed and removed by the default plugins. Let me know if you know of a way to override this behaviour for certain elements and make easier - I searched across the codebase and didn't find solutions that do so without a parsing plugin (for example, I found security assistant's plugin).

I'm happy to make this a markup parser, but from my current understanding the approach wouldn't change much (other than a simplified regex). Happy to hear your thoughts.

I'm happy to look into this before Monday again (currently on PTO).
cc: @arturoliduena

[SrdjanLL]

So, I had another pass at this and found that remark-parse strips out common and custom tags without implemented parser. I also found that most of other custom parsers across the codebase (based on my search) follow the custom plugin approach outlined in EUI docs.
I updated the PR to follow the parsing approach outlined in the EUI docs that's used elsewehere and adapted from your suggestion so the format is now:

!{anonymized{"entityClass": "<entity class>", "content": "<content>"}}

Let me know what you think about those changes.

[dgieselaar]

TIL about that being recommended syntax. So the reason I was hoping we can use HTML elements is because it's more readable, it doesn't break anything if people e.g. copy/paste the prompt or the assistant response. But what I get from you is that remark-parse strips any tags it doesn't understand? And what about something like <em> with a custom classname and or attributes? We don't have to spend a lot of time on it, so feel free to move forward with this approach if the other is not feasible.

[SrdjanLL]

But what I get from you is that remark-parse strips any tags it doesn't understand?

That's correct. The default parsing plugins (getDefaultEuiMarkdownParsingPlugins()) also seems to strip standard tags, unless you implement a custom parser. I tried with <span>, <div> and <em> and all get stripped with children (content) being show that ends up like other standard text in the markdown.

Thanks for calling it out, it was good to dive and understand the constraints. I will update in case I do find a simpler take on this, but will leave as is for now.

[SrdjanLL]

The parser logic was taken from the EUI documentation: https://eui.elastic.co/docs/components/editors-and-syntax/markdown/plugins/#putting-it-all-together-a-simple-chart-plugin

I previously implemented with regex, but thought I'd adhere to what's recommended and used across the codebase.

[neptunian]

LGTM!

[arturoliduena]

LGTM

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: e419604
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-224605-e4196041c7d3

Failed CI Steps

• FTR Configs #101

Test Failures

• [job] [logs] FTR Configs #101 / Cloud Security Posture Test adding Cloud Security Posture Integrations CSPM GCP CIS_GCP Organization Credentials JSON CIS_GCP Organization Credentials JSON workflow

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observabilityAIAssistant	108	109	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
observabilityAIAssistantApp	175.9KB	176.1KB	+257.0B
searchAssistant	102.6KB	102.9KB	+257.0B
total			+514.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
observabilityAIAssistant	41.3KB	42.0KB	+749.0B

History

• 💚 Build #311370 succeeded c325fc7
• 💚 Build #311191 succeeded 44ad28a
• 💔 Build #310550 failed bdb218d

[kibanamachine]

Starting backport for target branches: 8.19

https://github.com/elastic/kibana/actions/runs/15878011783

[kibanamachine]

💔 All backports failed

Status	Branch	Result
❌	8.19	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 224605

Questions ?

Please refer to the Backport tool documentation

[SrdjanLL]

💚 All backports created successfully

Status	Branch	Result
✅	8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation