Add AskAI message feedback endpoint

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

@@ -0,0 +1,29 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// 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>
+/// Request model for submitting feedback on a specific Ask AI message.
+/// </summary>
+public record AskAiMessageFeedbackRequest(
+	string MessageId,
+	string ConversationId,
+	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

@@ -0,0 +1,42 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// 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.Diagnostics;
+using Microsoft.Extensions.Logging;
+
+namespace Elastic.Documentation.Api.Core.AskAi;
+
+/// <summary>
+/// Use case for handling Ask AI message feedback submissions.
+/// </summary>
+public class AskAiMessageFeedbackUsecase(
+	IAskAiMessageFeedbackGateway feedbackGateway,
+	ILogger<AskAiMessageFeedbackUsecase> logger)
+{
+	private static readonly ActivitySource FeedbackActivitySource = new(TelemetryConstants.AskAiFeedbackSourceName);
+
+	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}",
+			LogSanitizer.Sanitize(request.MessageId),
+			LogSanitizer.Sanitize(request.ConversationId),
+			request.Reaction);
+
+		var record = new AskAiMessageFeedbackRecord(
+			request.MessageId,
+			request.ConversationId,
+			request.Reaction,
+			euid
+		);
+
+		await feedbackGateway.RecordFeedbackAsync(record, ctx);
+	}
+}

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

@@ -30,7 +30,7 @@
 		};
 		var inputMessagesJson = JsonSerializer.Serialize(inputMessages, ApiJsonContext.Default.InputMessageArray);
 		_ = activity?.SetTag("gen_ai.input.messages", inputMessagesJson);
-		logger.LogInformation("AskAI input message: {ask_ai.input.message}", askAiRequest.Message);
+		logger.LogInformation("AskAI input message: {ask_ai.input.message}", LogSanitizer.Sanitize(askAiRequest.Message));
 		logger.LogInformation("Streaming AskAI response");
 		var rawStream = await askAiGateway.AskAi(askAiRequest, ctx);
 		// The stream transformer will handle disposing the activity when streaming completes

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

@@ -0,0 +1,29 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// 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
+
+namespace Elastic.Documentation.Api.Core.AskAi;
+
+/// <summary>
+/// Gateway interface for recording Ask AI message feedback.
+/// Infrastructure implementations may use different storage backends (Elasticsearch, database, etc.)
+/// </summary>
+public interface IAskAiMessageFeedbackGateway
+{
+	/// <summary>
+	/// Records feedback for a specific Ask AI message.
+	/// </summary>
+	/// <param name="record">The feedback record to store.</param>
+	/// <param name="ctx">Cancellation token.</param>
+	Task RecordFeedbackAsync(AskAiMessageFeedbackRecord record, CancellationToken ctx);
+}
+
+/// <summary>
+/// Internal record used to pass message feedback data to the gateway.
+/// </summary>
+public record AskAiMessageFeedbackRecord(
+	string MessageId,
+	string ConversationId,
+	Reaction Reaction,
+	string? Euid = null
+);