[Obs AI Assistant] Enable syntax highlighting for ES|QL (#212669)

Closes https://github.com/elastic/kibana/issues/212384

## Summary

With https://github.com/elastic/eui/pull/8317, `EuiCodeBlock` supports
syntax highlighting for ES|QL.
This PR enables it for Obs AI Assistant

### Screenshots

Before:
![Screenshot 2025-02-27 at 11 00
39 AM](https://github.com/user-attachments/assets/ec9c6da9-c945-4a6b-b3aa-ece17533e877)

After:

![image](https://github.com/user-attachments/assets/7ed5232f-9b4c-45a3-a55f-22c2b6f56a98)

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
Viduni Wickramarachchi 2025-02-28 07:56:18 -05:00 committed by GitHub
parent 7590205f9a
commit 6d862d72a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 4 additions and 1 deletions

View file

@ -61,10 +61,12 @@ export function CodeBlock({ children }: { children: React.ReactNode }) {
export function EsqlCodeBlock({
value,
lang,
actionsDisabled,
onActionClick,
}: {
value: string;
lang: string;
actionsDisabled: boolean;
onActionClick: ChatActionClickHandler;
}) {
@ -72,7 +74,7 @@ export function EsqlCodeBlock({
<CodeBlockWrapper>
<EuiFlexGroup direction="column" gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiCodeBlock isCopyable fontSize="m">
<EuiCodeBlock language={lang} isCopyable fontSize="m">
{value}
</EuiCodeBlock>
</EuiFlexItem>

View file

@ -147,6 +147,7 @@ export function MessageText({ loading, content, onActionClick }: Props) {
<>
<EsqlCodeBlock
value={props.value}
lang={props.lang}
actionsDisabled={loading}
onActionClick={onActionClickRef.current}
/>