Add UI onclick handler and other adjustments

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx

@@ -5,7 +5,8 @@ import { ApiError } from '../errorHandling'
 import { AskAiEvent, ChunkEvent, EventTypes } from './AskAiEvent'
 import { GeneratingStatus } from './GeneratingStatus'
 import { References } from './RelatedResources'
-import { ChatMessage as ChatMessageType } from './chat.store'
+import { ChatMessage as ChatMessageType, useConversationId } from './chat.store'
+import { useMessageFeedback, Reaction } from './useMessageFeedback'
 import { useStatusMinDisplay } from './useStatusMinDisplay'
 import {
     EuiButtonIcon,
@@ -186,62 +187,86 @@ const computeAiStatus = (
 // Action bar for complete AI messages
 const ActionBar = ({
     content,
+    messageId,
     onRetry,
 }: {
     content: string
+    messageId: string
     onRetry?: () => void
-}) => (
-    <EuiFlexGroup responsive={false} component="span" gutterSize="none">
-        <EuiFlexItem grow={false}>
-            <EuiToolTip content="This answer was helpful">
-                <EuiButtonIcon
-                    aria-label="This answer was helpful"
-                    iconType="thumbUp"
-                    color="success"
-                    size="s"
-                />
-            </EuiToolTip>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-            <EuiToolTip content="This answer was not helpful">
-                <EuiButtonIcon
-                    aria-label="This answer was not helpful"
-                    iconType="thumbDown"
-                    color="danger"
-                    size="s"
-                />
-            </EuiToolTip>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-            <EuiCopy
-                textToCopy={content}
-                beforeMessage="Copy markdown"
-                afterMessage="Copied!"
-            >
-                {(copy) => (
+}) => {
+    const conversationId = useConversationId()
+    const { selectedReaction, submitFeedback, isPending } = useMessageFeedback(
+        messageId,
+        conversationId
+    )
+
+    const handleFeedback = (reaction: Reaction) => {
+        if (!isPending) {
+            submitFeedback(reaction)
+        }
+    }
+
+    return (
+        <EuiFlexGroup responsive={false} component="span" gutterSize="xs">
+            <EuiFlexItem grow={false}>
+                <EuiToolTip content="This answer was helpful">
                     <EuiButtonIcon
-                        aria-label="Copy markdown"
-                        iconType="copy"
+                        aria-label="This answer was helpful"
+                        iconType="thumbUp"
+                        color="success"
                         size="s"
-                        onClick={copy}
+                        display={
+                            selectedReaction === 'thumbsUp' ? 'base' : 'empty'
+                        }
+                        onClick={() => handleFeedback('thumbsUp')}
                     />
-                )}
-            </EuiCopy>
-        </EuiFlexItem>
-        {onRetry && (
+                </EuiToolTip>
+            </EuiFlexItem>
             <EuiFlexItem grow={false}>
-                <EuiToolTip content="Request a new answer">
+                <EuiToolTip content="This answer was not helpful">
                     <EuiButtonIcon
-                        aria-label="Request a new answer"
-                        iconType="refresh"
-                        onClick={onRetry}
+                        aria-label="This answer was not helpful"
+                        iconType="thumbDown"
+                        color="danger"
                         size="s"
+                        display={
+                            selectedReaction === 'thumbsDown' ? 'base' : 'empty'
+                        }
+                        onClick={() => handleFeedback('thumbsDown')}
                     />
                 </EuiToolTip>
             </EuiFlexItem>
-        )}
-    </EuiFlexGroup>
-)
+            <EuiFlexItem grow={false}>
+                <EuiCopy
+                    textToCopy={content}
+                    beforeMessage="Copy markdown"
+                    afterMessage="Copied!"
+                >
+                    {(copy) => (
+                        <EuiButtonIcon
+                            aria-label="Copy markdown"
+                            iconType="copy"
+                            size="s"
+                            onClick={copy}
+                        />
+                    )}
+                </EuiCopy>
+            </EuiFlexItem>
+            {onRetry && (
+                <EuiFlexItem grow={false}>
+                    <EuiToolTip content="Request a new answer">
+                        <EuiButtonIcon
+                            aria-label="Request a new answer"
+                            iconType="refresh"
+                            onClick={onRetry}
+                            size="s"
+                        />
+                    </EuiToolTip>
+                </EuiFlexItem>
+            )}
+        </EuiFlexGroup>
+    )
+}
 
 export const ChatMessage = ({
     message,
@@ -412,6 +437,7 @@ export const ChatMessage = ({
                                 <EuiSpacer size="m" />
                                 <ActionBar
                                     content={mainContent}
+                                    messageId={message.id}
                                     onRetry={onRetry}
                                 />
                             </>

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useMessageFeedback.ts

@@ -0,0 +1,100 @@
+import { logWarn } from '../../../telemetry/logging'
+import { traceSpan } from '../../../telemetry/tracing'
+import { useMutation } from '@tanstack/react-query'
+import { useState, useCallback } from 'react'
+
+export type Reaction = 'thumbsUp' | 'thumbsDown'
+
+interface MessageFeedbackRequest {
+    messageId: string
+    conversationId: string
+    reaction: Reaction
+}
+
+interface UseMessageFeedbackReturn {
+    selectedReaction: Reaction | null
+    submitFeedback: (reaction: Reaction) => void
+    isPending: boolean
+}
+
+const submitFeedbackToApi = async (
+    payload: MessageFeedbackRequest
+): Promise<void> => {
+    await traceSpan('submit message-feedback', async (span) => {
+        span.setAttribute('gen_ai.conversation.id', payload.conversationId) // correlation with backend
+        span.setAttribute('ask_ai.message.id', payload.messageId)
+        span.setAttribute('ask_ai.feedback.reaction', payload.reaction)
+
+        const response = await fetch('/docs/_api/v1/ask-ai/message-feedback', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        if (!response.ok) {
+            logWarn('Failed to submit feedback', {
+                'http.status_code': response.status,
+                'ask_ai.message.id': payload.messageId,
+                'ask_ai.feedback.reaction': payload.reaction,
+            })
+        }
+    })
+}
+
+export const useMessageFeedback = (
+    messageId: string,
+    conversationId: string | null
+): UseMessageFeedbackReturn => {
+    const [selectedReaction, setSelectedReaction] = useState<Reaction | null>(
+        null
+    )
+
+    const mutation = useMutation({
+        mutationFn: submitFeedbackToApi,
+        onError: (error) => {
+            logWarn('Error submitting feedback', {
+                'error.message':
+                    error instanceof Error ? error.message : String(error),
+            })
+            // Don't reset selection on error - user intent was clear
+        },
+    })
+
+    const submitFeedback = useCallback(
+        (reaction: Reaction) => {
+            if (!conversationId) {
+                console.warn('Cannot submit feedback without conversationId')
+                return
+            }
+
+            // Ignore if same reaction already selected
+            if (selectedReaction === reaction) {
+                return
+            }
+
+            // Ignore if already submitting
+            if (mutation.isPending) {
+                return
+            }
+
+            // Optimistic update
+            setSelectedReaction(reaction)
+
+            // Submit to API
+            mutation.mutate({
+                messageId,
+                conversationId,
+                reaction,
+            })
+        },
+        [messageId, conversationId, selectedReaction, mutation]
+    )
+
+    return {
+        selectedReaction,
+        submitFeedback,
+        isPending: mutation.isPending,
+    }
+}

src/api/Elastic.Documentation.Api.Core/AskAi/AskAiMessageFeedbackRequest.cs

@@ -2,6 +2,8 @@
 // Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
 // See the LICENSE file in the project root for more information
 
+using System.Text.Json.Serialization;
+
 namespace Elastic.Documentation.Api.Core.AskAi;
 
 /// <summary>
@@ -16,8 +18,12 @@ Reaction Reaction
 /// <summary>
 /// The user's reaction to an Ask AI message.
 /// </summary>
+[JsonConverter(typeof(JsonStringEnumConverter<Reaction>))]
 public enum Reaction
 {
+	[JsonStringEnumMemberName("thumbsUp")]
 	ThumbsUp,
+
+	[JsonStringEnumMemberName("thumbsDown")]
 	ThumbsDown
 }

src/api/Elastic.Documentation.Api.Core/AskAi/AskAiMessageFeedbackUsecase.cs

@@ -16,12 +16,13 @@ public class AskAiMessageFeedbackUsecase(
 {
 	private static readonly ActivitySource FeedbackActivitySource = new(TelemetryConstants.AskAiFeedbackSourceName);
 
-	public async Task SubmitFeedback(AskAiMessageFeedbackRequest request, CancellationToken ctx)
+	public async Task SubmitFeedback(AskAiMessageFeedbackRequest request, string? euid, CancellationToken ctx)
 	{
 		using var activity = FeedbackActivitySource.StartActivity("record message-feedback", ActivityKind.Internal);
 		_ = activity?.SetTag("gen_ai.conversation.id", request.ConversationId); // correlation with chat traces
 		_ = activity?.SetTag("ask_ai.message.id", request.MessageId);
 		_ = activity?.SetTag("ask_ai.feedback.reaction", request.Reaction.ToString().ToLowerInvariant());
+		// Note: user.euid is automatically added to spans by EuidSpanProcessor
 
 		logger.LogInformation(
 			"Recording message feedback for message {MessageId} in conversation {ConversationId}: {Reaction}",
@@ -32,7 +33,8 @@ public async Task SubmitFeedback(AskAiMessageFeedbackRequest request, Cancellati
 		var record = new AskAiMessageFeedbackRecord(
 			request.MessageId,
 			request.ConversationId,
-			request.Reaction
+			request.Reaction,
+			euid
 		);
 
 		await feedbackGateway.RecordFeedbackAsync(record, ctx);

src/api/Elastic.Documentation.Api.Core/AskAi/IAskAiMessageFeedbackGateway.cs

@@ -24,5 +24,6 @@ public interface IAskAiMessageFeedbackGateway
 public record AskAiMessageFeedbackRecord(
 	string MessageId,
 	string ConversationId,
-	Reaction Reaction
+	Reaction Reaction,
+	string? Euid = null
 );

src/api/Elastic.Documentation.Api.Core/SerializationContext.cs

@@ -19,6 +19,7 @@ public record OutputMessage(string Role, MessagePart[] Parts, string FinishReaso
 
 [JsonSerializable(typeof(AskAiRequest))]
 [JsonSerializable(typeof(AskAiMessageFeedbackRequest))]
+[JsonSerializable(typeof(Reaction))]
 [JsonSerializable(typeof(SearchRequest))]
 [JsonSerializable(typeof(SearchResponse))]
 [JsonSerializable(typeof(InputMessage))]

src/api/Elastic.Documentation.Api.Infrastructure/Adapters/AskAi/ElasticsearchAskAiMessageFeedbackGateway.cs

@@ -42,15 +42,22 @@ public ElasticsearchAskAiMessageFeedbackGateway(
 
 	public async Task RecordFeedbackAsync(AskAiMessageFeedbackRecord record, CancellationToken ctx)
 	{
+		var feedbackId = Guid.NewGuid().ToString();
 		var document = new MessageFeedbackDocument
 		{
+			FeedbackId = feedbackId,
 			MessageId = record.MessageId,
 			ConversationId = record.ConversationId,
 			Reaction = record.Reaction.ToString().ToLowerInvariant(),
+			Euid = record.Euid,
 			Timestamp = DateTimeOffset.UtcNow
 		};
 
-		var response = await _client.IndexAsync(document, _indexName, ctx);
+		_logger.LogDebug("Indexing feedback with ID {FeedbackId} to index {IndexName}", feedbackId, _indexName);
+
+		var response = await _client.IndexAsync<MessageFeedbackDocument>(document, idx => idx
+			.Index(_indexName)
+			.Id(feedbackId), ctx);
 
 		if (!response.IsValidResponse)
 		{
@@ -62,16 +69,21 @@ public async Task RecordFeedbackAsync(AskAiMessageFeedbackRecord record, Cancell
 		else
 		{
 			_logger.LogInformation(
-				"Message feedback recorded: {Reaction} for message {MessageId} in conversation {ConversationId}",
+				"Message feedback recorded: {Reaction} for message {MessageId} in conversation {ConversationId}. ES _id: {EsId}, Index: {Index}",
 				record.Reaction,
 				record.MessageId,
-				record.ConversationId);
+				record.ConversationId,
+				response.Id,
+				response.Index);
 		}
 	}
 }
 
 internal sealed record MessageFeedbackDocument
 {
+	[JsonPropertyName("feedback_id")]
+	public required string FeedbackId { get; init; }
+
 	[JsonPropertyName("message_id")]
 	public required string MessageId { get; init; }
 
@@ -81,6 +93,10 @@ internal sealed record MessageFeedbackDocument
 	[JsonPropertyName("reaction")]
 	public required string Reaction { get; init; }
 
+	[JsonPropertyName("euid")]
+	[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+	public string? Euid { get; init; }
+
 	[JsonPropertyName("@timestamp")]
 	public required DateTimeOffset Timestamp { get; init; }
 }

src/api/Elastic.Documentation.Api.Infrastructure/MappingsExtensions.cs

@@ -36,11 +36,14 @@ private static void MapAskAiEndpoint(IEndpointRouteBuilder group)
 			await stream.CopyToAsync(context.Response.Body, ctx);
 		});
 
-		_ = askAiGroup.MapPost("/message-feedback", async (AskAiMessageFeedbackRequest request, AskAiMessageFeedbackUsecase feedbackUsecase, Cancel ctx) =>
+		_ = askAiGroup.MapPost("/message-feedback", async (HttpContext context, AskAiMessageFeedbackRequest request, AskAiMessageFeedbackUsecase feedbackUsecase, Cancel ctx) =>
 		{
-			await feedbackUsecase.SubmitFeedback(request, ctx);
+			// Extract euid cookie for user tracking
+			_ = context.Request.Cookies.TryGetValue("euid", out var euid);
+
+			await feedbackUsecase.SubmitFeedback(request, euid, ctx);
 			return Results.NoContent();
-		});
+		}).DisableAntiforgery();
 	}
 
 	private static void MapSearchEndpoint(IEndpointRouteBuilder group)