feat: agent studio feedback integration (#2868)

Cherry-picked from v5 branch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 12:32:15 +01:00 · 2026-03-26 12:32:15 +01:00 · f83f5a911c
commit f83f5a911c
parent e20d30de7b
9 changed files with 171 additions and 117 deletions
--- a/examples/demo-react/src/App.tsx
+++ b/examples/demo-react/src/App.tsx
@ -7,7 +7,8 @@ import './App.css';
 import '@docsearch/css/dist/style.css';
 import '@docsearch/css/dist/sidepanel.css';

-import { AgentStudioExample } from './examples/agent-studio';
+import AgentStudio from './examples/agent-studio';
+import AgentStudioSidepanel from './examples/agent-studio-sidepanel';
 import Basic from './examples/basic';
 import BasicAskAI from './examples/basic-askai';
 import Composable from './examples/composable';
@ -102,7 +103,14 @@ function App(): JSX.Element {
          <section className="demo-section">
            <p className="section-description">Agent Studio</p>
            <div className="search-wrapper column">
-              <AgentStudioExample />
+              <AgentStudio />
+            </div>
+          </section>
+
+          <section className="demo-section">
+            <p className="section-description">Agent Studio sidepanel</p>
+            <div className="search-wrapper column">
+              <AgentStudioSidepanel />
            </div>
          </section>
        </main>
--- a/examples/demo-react/src/examples/agent-studio-sidepanel.tsx
+++ b/examples/demo-react/src/examples/agent-studio-sidepanel.tsx
@ -0,0 +1,25 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { DocSearch } from '@docsearch/core';
+import { SidepanelButton } from '@docsearch/sidepanel/button';
+import { Sidepanel } from '@docsearch/sidepanel/sidepanel';
+import type { JSX } from 'react';
+
+export default function AgentStudioSidepanel(): JSX.Element {
+  return (
+    <DocSearch>
+      <SidepanelButton
+        variant="inline"
+        translations={{
+          buttonText: 'Agent Studio',
+        }}
+      />
+      <Sidepanel
+        indexName="docsearch-markdown"
+        appId="PMZUYBQDAK"
+        apiKey="a00716d83c64f6c61905c078b7d5ab66"
+        assistantId="ccdec697-e3fe-465b-a1c3-657e7bf18aef"
+        agentStudio={true}
+      />
+    </DocSearch>
+  );
+}
--- a/examples/demo-react/src/examples/agent-studio.tsx
+++ b/examples/demo-react/src/examples/agent-studio.tsx
@ -2,45 +2,25 @@
 import { DocSearch } from '@docsearch/core';
 import { DocSearchButton } from '@docsearch/modal/button';
 import { DocSearchModal } from '@docsearch/modal/modal';
-import { SidepanelButton } from '@docsearch/sidepanel/button';
-import { Sidepanel } from '@docsearch/sidepanel/sidepanel';
 import type { JSX } from 'react';

-export function AgentStudioExample(): JSX.Element {
+export default function AgentStudio(): JSX.Element {
  return (
-    <>
-      <DocSearch>
-        <DocSearchButton
-          translations={{
-            buttonText: 'Ask AI with Agent Studio',
-          }}
-        />
-        <DocSearchModal
-          indexName="docsearch"
-          appId="PMZUYBQDAK"
-          apiKey="a00716d83c64f6c61905c078b7d5ab66"
-          askAi={{
-            assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
-            agentStudio: true,
-          }}
-        />
-      </DocSearch>
-
-      <DocSearch>
-        <SidepanelButton
-          variant="inline"
-          translations={{
-            buttonText: 'Agent Studio',
-          }}
-        />
-        <Sidepanel
-          indexName="docsearch-markdown"
-          appId="PMZUYBQDAK"
-          apiKey="a00716d83c64f6c61905c078b7d5ab66"
-          assistantId="ccdec697-e3fe-465b-a1c3-657e7bf18aef"
-          agentStudio={true}
-        />
-      </DocSearch>
-    </>
+    <DocSearch>
+      <DocSearchButton
+        translations={{
+          buttonText: 'Ask AI with Agent Studio',
+        }}
+      />
+      <DocSearchModal
+        indexName="docsearch"
+        appId="PMZUYBQDAK"
+        apiKey="a00716d83c64f6c61905c078b7d5ab66"
+        askAi={{
+          assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
+          agentStudio: true,
+        }}
+      />
+    </DocSearch>
  );
 }
--- a/packages/docsearch-react/src/AskAiScreen.tsx
+++ b/packages/docsearch-react/src/AskAiScreen.tsx
@ -140,6 +140,8 @@ function AskAiExchangeCard({
    isLastExchange &&
    !displayParts.some((part) => part.type !== 'step-start');

+  const messageId = agentStudio ? assistantMessage?.id || exchange.id : userMessage?.id || exchange.id;
+
  return (
    <div className="DocSearch-AskAiScreen-Response-Container">
      <div className="DocSearch-AskAiScreen-Response">
@ -236,12 +238,11 @@ function AskAiExchangeCard({
        </div>
        <div className="DocSearch-AskAiScreen-Answer-Footer">
          <AskAiScreenFooterActions
-            id={userMessage?.id || exchange.id}
+            id={messageId}
            showActions={showActions}
            latestAssistantMessageContent={assistantContent?.text || null}
            translations={translations}
            conversations={conversations}
-            agentStudio={agentStudio}
            onFeedback={onFeedback}
          />
        </div>
@ -262,7 +263,6 @@ interface AskAiScreenFooterActionsProps {
  translations: AskAiScreenTranslations;
  conversations: StoredSearchPlugin<StoredAskAiState>;
  onFeedback?: (messageId: string, thumbs: 0 | 1) => Promise<void>;
-  agentStudio?: boolean;
 }

 export function AskAiScreenFooterActions({
@ -272,7 +272,6 @@ export function AskAiScreenFooterActions({
  translations,
  conversations,
  onFeedback,
-  agentStudio,
 }: AskAiScreenFooterActionsProps): JSX.Element | null {
  // local state for feedback, initialised from stored conversations
  const initialFeedback = React.useMemo(() => {
@ -310,26 +309,25 @@ export function AskAiScreenFooterActions({

  return (
    <div className="DocSearch-AskAiScreen-Actions">
-      {!agentStudio &&
-        (feedback === null ? (
-          <>
-            {saving ? (
-              <LoadingIcon className="DocSearch-AskAiScreen-SmallerLoadingIcon" />
-            ) : (
-              <>
-                <LikeButton title={likeButtonTitle} onClick={() => handleFeedback('like')} />
-                <DislikeButton title={dislikeButtonTitle} onClick={() => handleFeedback('dislike')} />
-              </>
-            )}
-            {savingError && (
-              <p className="DocSearch-AskAiScreen-FeedbackText">{savingError.message || 'An error occured'}</p>
-            )}
-          </>
-        ) : (
-          <p className="DocSearch-AskAiScreen-FeedbackText DocSearch-AskAiScreen-FeedbackText--visible">
-            {thanksForFeedbackText}
-          </p>
-        ))}
+      {feedback === null ? (
+        <>
+          {saving ? (
+            <LoadingIcon className="DocSearch-AskAiScreen-SmallerLoadingIcon" />
+          ) : (
+            <>
+              <LikeButton title={likeButtonTitle} onClick={() => handleFeedback('like')} />
+              <DislikeButton title={dislikeButtonTitle} onClick={() => handleFeedback('dislike')} />
+            </>
+          )}
+          {savingError && (
+            <p className="DocSearch-AskAiScreen-FeedbackText">{savingError.message || 'An error occured'}</p>
+          )}
+        </>
+      ) : (
+        <p className="DocSearch-AskAiScreen-FeedbackText DocSearch-AskAiScreen-FeedbackText--visible">
+          {thanksForFeedbackText}
+        </p>
+      )}
      <CopyButton
        translations={translations}
        onClick={() => navigator.clipboard.writeText(latestAssistantMessageContent)}
@ -373,7 +371,7 @@ export function AskAiScreen({ translations = {}, ...props }: AskAiScreenProps):
    startNewConversationButtonText = 'Start a new conversation',
  } = translations;

-  const { messages, askAiError, status } = props;
+  const { messages, askAiError, status, agentStudio } = props;

  // Check if there's a thread depth error
  const hasThreadDepthError = useMemo(() => {
@ -448,7 +446,7 @@ export function AskAiScreen({ translations = {}, ...props }: AskAiScreenProps):
                loadingStatus={props.status}
                translations={translations}
                conversations={props.conversations}
-                agentStudio={props.agentStudio}
+                agentStudio={agentStudio}
                onSearchQueryClick={handleSearchQueryClick}
                onFeedback={props.onFeedback}
              />
--- a/packages/docsearch-react/src/DocSearchModal.tsx
+++ b/packages/docsearch-react/src/DocSearchModal.tsx
@ -20,13 +20,12 @@ import type { ScreenStateTranslations } from './ScreenState';
 import { ScreenState } from './ScreenState';
 import type { SearchBoxTranslations } from './SearchBox';
 import { SearchBox } from './SearchBox';
-import { createStoredConversations, createStoredSearches } from './stored-searches';
+import { createStoredSearches } from './stored-searches';
 import type {
  DocSearchHit,
  DocSearchState,
  InternalDocSearchHit,
  StoredAskAiMessage,
-  StoredAskAiState,
  StoredDocSearchHit,
  SuggestedQuestionHit,
 } from './types';
@ -384,12 +383,6 @@ export function DocSearchModal({
  const defaultIndexName = indexes[0].name;

  // storage
-  const conversations = React.useRef(
-    createStoredConversations<StoredAskAiState>({
-      key: `__DOCSEARCH_ASKAI_CONVERSATIONS__${askAiConfig?.indexName || defaultIndexName}`,
-      limit: 10,
-    }),
-  ).current;
  const favoriteSearches = React.useRef(
    createStoredSearches<StoredDocSearchHit>({
      key: `__DOCSEARCH_FAVORITE_SEARCHES__${defaultIndexName}`,
@ -405,15 +398,16 @@ export function DocSearchModal({

  const [stoppedStream, setStoppedStream] = React.useState(false);

-  const { messages, status, setMessages, sendMessage, stopAskAiStreaming, askAiError, sendFeedback } = useAskAi({
-    assistantId: askAiConfigurationId,
-    apiKey: askAiConfig?.apiKey || apiKey,
-    appId: askAiConfig?.appId || appId,
-    indexName: askAiConfig?.indexName || defaultIndexName,
-    searchParameters: askAiSearchParameters,
-    useStagingEnv: askAiUseStagingEnv,
-    agentStudio,
-  });
+  const { messages, status, setMessages, sendMessage, stopAskAiStreaming, askAiError, sendFeedback, conversations } =
+    useAskAi({
+      assistantId: askAiConfigurationId,
+      apiKey: askAiConfig?.apiKey || apiKey,
+      appId: askAiConfig?.appId || appId,
+      indexName: askAiConfig?.indexName || defaultIndexName,
+      searchParameters: askAiSearchParameters,
+      useStagingEnv: askAiUseStagingEnv,
+      agentStudio,
+    });

  const prevStatus = React.useRef(status);
  React.useEffect(() => {
--- a/packages/docsearch-react/src/Sidepanel/ConversationActions.tsx
+++ b/packages/docsearch-react/src/Sidepanel/ConversationActions.tsx
@ -14,7 +14,6 @@ interface ConversationActionsProps {
  conversations: StoredSearchPlugin<StoredAskAiState>;
  onFeedback?: (messageId: string, thumbs: 0 | 1) => Promise<void>;
  isSidepanel?: boolean;
-  agentStudio?: boolean;
 }

 export function ConversationActions({
@ -24,7 +23,6 @@ export function ConversationActions({
  onFeedback,
  latestAssistantMessageContent,
  showActions,
-  agentStudio,
 }: ConversationActionsProps): JSX.Element | null {
  const initialFeedback = React.useMemo(() => {
    const message = conversations.getOne?.(id);
@ -65,26 +63,25 @@ export function ConversationActions({
        translations={translations}
        onClick={() => navigator.clipboard.writeText(latestAssistantMessageContent)}
      />
-      {!agentStudio &&
-        (feedback === null ? (
-          <>
-            {saving ? (
-              <LoadingIcon className="DocSearch-AskAiScreen-SmallerLoadingIcon" />
-            ) : (
-              <>
-                <LikeButton title={likeButtonTitle} onClick={() => handleFeedback('like')} />
-                <DislikeButton title={dislikeButtonTitle} onClick={() => handleFeedback('dislike')} />
-              </>
-            )}
-            {savingError && (
-              <p className="DocSearch-AskAiScreen-FeedbackText">{savingError.message || 'An error occured'}</p>
-            )}
-          </>
-        ) : (
-          <p className="DocSearch-AskAiScreen-FeedbackText DocSearch-AskAiScreen-FeedbackText--visible">
-            {thanksForFeedbackText}
-          </p>
-        ))}
+      {feedback === null ? (
+        <>
+          {saving ? (
+            <LoadingIcon className="DocSearch-AskAiScreen-SmallerLoadingIcon" />
+          ) : (
+            <>
+              <LikeButton title={likeButtonTitle} onClick={() => handleFeedback('like')} />
+              <DislikeButton title={dislikeButtonTitle} onClick={() => handleFeedback('dislike')} />
+            </>
+          )}
+          {savingError && (
+            <p className="DocSearch-AskAiScreen-FeedbackText">{savingError.message || 'An error occured'}</p>
+          )}
+        </>
+      ) : (
+        <p className="DocSearch-AskAiScreen-FeedbackText DocSearch-AskAiScreen-FeedbackText--visible">
+          {thanksForFeedbackText}
+        </p>
+      )}
    </div>
  );
 }
--- a/packages/docsearch-react/src/Sidepanel/ConversationScreen.tsx
+++ b/packages/docsearch-react/src/Sidepanel/ConversationScreen.tsx
@ -120,6 +120,8 @@ const ConversationExchange = React.forwardRef<HTMLDivElement, ConversationnExcha
    const showActions =
      !wasStopped && (!isLastExchange || (isLastExchange && status === 'ready' && Boolean(assistantMessage)));

+    const messageId = agentStudio ? assistantMessage?.id || exchange.id : userMessage?.id || exchange.id;
+
    return (
      <div className="DocSearch-AskAiScreen-Response-Container" ref={conversationRef}>
        <div className="DocSearch-AskAiScreen-Response">
@ -212,12 +214,11 @@ const ConversationExchange = React.forwardRef<HTMLDivElement, ConversationnExcha

          <div className="DocSearch-AskAiScreen-Answer-Footer">
            <ConversationActions
-              id={userMessage?.id || exchange.id}
+              id={messageId}
              showActions={showActions}
              latestAssistantMessageContent={assistantContent?.text || null}
              translations={translations}
              conversations={conversations}
-              agentStudio={agentStudio}
              onFeedback={onFeedback}
            />
          </div>
--- a/packages/docsearch-react/src/askai.ts
+++ b/packages/docsearch-react/src/askai.ts
@ -3,6 +3,8 @@ import { ASK_AI_API_URL, BETA_ASK_AI_API_URL } from './constants';
 // ... existing imports ...
 const TOKEN_KEY = 'askai_token';

+export const agentStudioBaseUrl = (appId: string): string => `https://${appId}.algolia.net/agent-studio/1`;
+
 type TokenPayload = { exp: number };

 const decode = (token: string): TokenPayload => {
@ -134,3 +136,37 @@ export const getAgentStudioErrorMessage = (error: Error): Error => {

  return new Error(errorMessage);
 };
+
+export const postAgentStudioFeedback = ({
+  agentId,
+  vote,
+  messageId,
+  appId,
+  apiKey,
+  abortSignal,
+}: {
+  agentId: string;
+  vote: 0 | 1;
+  messageId: string;
+  appId: string;
+  apiKey: string;
+  abortSignal: AbortSignal;
+}): Promise<Response> => {
+  const headers = new Headers();
+  headers.set('x-algolia-application-id', appId);
+  headers.set('x-algolia-api-key', apiKey);
+  headers.set('content-type', 'application/json');
+
+  const baseUrl = `${agentStudioBaseUrl(appId)}/feedback`;
+
+  return fetch(baseUrl, {
+    method: 'POST',
+    body: JSON.stringify({
+      messageId,
+      agentId,
+      vote,
+    }),
+    headers,
+    signal: abortSignal,
+  });
+};
--- a/packages/docsearch-react/src/useAskAi.ts
+++ b/packages/docsearch-react/src/useAskAi.ts
@ -3,7 +3,13 @@ import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai';
 import { useCallback, useMemo, useRef } from 'react';

-import { getAgentStudioErrorMessage, getValidToken, postFeedback } from './askai';
+import {
+  agentStudioBaseUrl,
+  getAgentStudioErrorMessage,
+  getValidToken,
+  postAgentStudioFeedback,
+  postFeedback,
+} from './askai';
 import type { Exchange } from './AskAiScreen';
 import { ASK_AI_API_URL, BETA_ASK_AI_API_URL } from './constants';
 import type { StoredSearchPlugin } from './stored-searches';
@ -59,7 +65,7 @@ const getAgentStudioTransport = ({
  searchParameters,
 }: AgentStudioTransportParams): DefaultChatTransport<AIMessage> => {
  return new DefaultChatTransport({
-    api: `https://${appId}.algolia.net/agent-studio/1/agents/${assistantId}/completions?stream=true&compatibilityMode=ai-sdk-5`,
+    api: `${agentStudioBaseUrl(appId)}/agents/${assistantId}/completions?stream=true&compatibilityMode=ai-sdk-5`,
    headers: {
      'x-algolia-application-id': appId,
      'x-algolia-api-key': apiKey,
@ -145,19 +151,28 @@ export const useAskAi: UseAskAi = ({ assistantId, apiKey, appId, indexName, useS
    async (messageId: string, thumbs: 0 | 1): Promise<void> => {
      if (!assistantId) return;

-      const res = await postFeedback({
-        assistantId,
-        thumbs,
-        messageId,
-        appId,
-        abortSignal: abortControllerRef.current.signal,
-        useStagingEnv,
-      });
+      const res = await (params.agentStudio
+        ? postAgentStudioFeedback({
+            agentId: assistantId,
+            vote: thumbs,
+            messageId,
+            appId,
+            apiKey,
+            abortSignal: abortControllerRef.current.signal,
+          })
+        : postFeedback({
+            assistantId,
+            thumbs,
+            messageId,
+            appId,
+            abortSignal: abortControllerRef.current.signal,
+            useStagingEnv,
+          }));

      if (res.status >= 300) throw new Error('Failed, try again later.');
      conversations.addFeedback?.(messageId, thumbs === 1 ? 'like' : 'dislike');
    },
-    [assistantId, appId, conversations, useStagingEnv],
+    [assistantId, params.agentStudio, appId, apiKey, useStagingEnv, conversations],
  );

  const onStopStreaming = async (): Promise<void> => {