feat(askai): Feedback notes and tags

adapters/docusaurus-theme-search-algolia/src/theme/SearchTranslations/index.ts

@@ -46,6 +46,17 @@ const translations: DocSearchTranslations & {
       likeButtonTitle: string;
       dislikeButtonTitle: string;
       thanksForFeedbackText: string;
+      feedbackPanelTitle: string;
+      feedbackDetailsPlaceholder: string;
+      feedbackDisclaimerText: string;
+      feedbackSubmitButtonText: string;
+      feedbackCloseButtonTitle: string;
+      feedbackTagIncorrect: string;
+      feedbackTagNotWhatIAsked: string;
+      feedbackTagSlowOrBuggy: string;
+      feedbackTagStyleOrTone: string;
+      feedbackTagSafetyOrLegal: string;
+      feedbackTagOther: string;
       preToolCallText: string;
       duringToolCallText: string;
       afterToolCallText: string;
@@ -262,6 +273,61 @@ const translations: DocSearchTranslations & {
         message: 'Thanks for your feedback!',
         description: 'The text for thanks for feedback',
       }),
+      feedbackPanelTitle: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackPanelTitle',
+        message: 'What went wrong? (optional)',
+        description: 'The title of the negative feedback note panel',
+      }),
+      feedbackDetailsPlaceholder: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackDetailsPlaceholder',
+        message: 'Share some details...',
+        description: 'The placeholder for the negative feedback details textarea',
+      }),
+      feedbackDisclaimerText: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackDisclaimerText',
+        message: 'A copy of this chat will be included with your feedback.',
+        description: 'The disclaimer shown inside the negative feedback note panel',
+      }),
+      feedbackSubmitButtonText: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackSubmitButtonText',
+        message: 'Submit',
+        description: 'The submit button text for the negative feedback note panel',
+      }),
+      feedbackCloseButtonTitle: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackCloseButtonTitle',
+        message: 'Close',
+        description: 'The accessible title for the negative feedback note panel close button',
+      }),
+      feedbackTagIncorrect: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackTagIncorrect',
+        message: 'Incorrect or incomplete',
+        description: 'The "incorrect" reason chip for negative feedback',
+      }),
+      feedbackTagNotWhatIAsked: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackTagNotWhatIAsked',
+        message: 'Not what I asked for',
+        description: 'The "not what I asked for" reason chip for negative feedback',
+      }),
+      feedbackTagSlowOrBuggy: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackTagSlowOrBuggy',
+        message: 'Slow or buggy',
+        description: 'The "slow or buggy" reason chip for negative feedback',
+      }),
+      feedbackTagStyleOrTone: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackTagStyleOrTone',
+        message: 'Style or tone',
+        description: 'The "style or tone" reason chip for negative feedback',
+      }),
+      feedbackTagSafetyOrLegal: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackTagSafetyOrLegal',
+        message: 'Safety or legal concern',
+        description: 'The "safety or legal concern" reason chip for negative feedback',
+      }),
+      feedbackTagOther: translate({
+        id: 'theme.SearchModal.askAiScreen.feedbackTagOther',
+        message: 'Other',
+        description: 'The "other" reason chip for negative feedback',
+      }),
       preToolCallText: translate({
         id: 'theme.SearchModal.askAiScreen.preToolCallText',
         message: 'Searching...',

bundlesize.config.json

@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "packages/docsearch-css/dist/style.css",
-      "maxSize": "6 kB"
+      "maxSize": "6.15 kB"
     },
     {
       "path": "packages/docsearch-react/dist/umd/index.js",

examples/demo-js/src/main.ts

@@ -35,7 +35,7 @@ const sidepanelInstance = sidepanel({
   indexName: 'docsearch',
   appId: 'PMZUYBQDAK',
   apiKey: '24b09689d5b4223813d9b8e48563c8f6',
-  assistantId: 'askAIDemo',
+  assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
   onReady: () => {
     // eslint-disable-next-line no-console
     console.log('[demo-js] sidepanel onReady()');
@@ -68,7 +68,6 @@ const docsearchInstance = docsearch({
   indexName: 'docsearch',
   appId: 'PMZUYBQDAK',
   apiKey: '24b09689d5b4223813d9b8e48563c8f6',
-  askAi: 'askAIDemo',
   interceptAskAiEvent: (initialMessage: InitialAskAiMessage) => {
     docsearchInstance.close();
     sidepanelInstance.open(initialMessage);

examples/demo-react/src/App.tsx

@@ -101,7 +101,7 @@ function App(): JSX.Element {
       </div>
 
       <DocSearchSidepanel
-        assistantId="askAIDemo"
+        assistantId="ccdec697-e3fe-465b-a1c3-657e7bf18aef"
         indexName="docsearch"
         appId="PMZUYBQDAK"
         apiKey="24b09689d5b4223813d9b8e48563c8f6"

examples/demo-react/src/examples/composable.tsx

@@ -12,10 +12,7 @@ export default function Composable(): JSX.Element {
         appId="PMZUYBQDAK"
         apiKey="24b09689d5b4223813d9b8e48563c8f6"
         askAi={{
-          assistantId: 'askAIDemo',
-          searchParameters: {
-            facetFilters: ['language:en'],
-          },
+          assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
         }}
       />
     </DocSearch>

examples/demo-react/src/examples/dynamic-import-modal.tsx

@@ -91,10 +91,7 @@ function DocSearch(): JSX.Element {
             appId="PMZUYBQDAK"
             apiKey="24b09689d5b4223813d9b8e48563c8f6"
             askAi={{
-              assistantId: 'askAIDemo',
-              searchParameters: {
-                facetFilters: ['language:en'],
-              },
+              assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
             }}
             initialScrollY={window.scrollY}
             initialQuery={initialQuery}

examples/demo-react/src/examples/w-hit-transformItems.tsx

@@ -26,7 +26,7 @@ export default function WTransformItems(): JSX.Element {
       appId="PMZUYBQDAK"
       apiKey="24b09689d5b4223813d9b8e48563c8f6"
       askAi={{
-        assistantId: 'askAIDemo',
+        assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
       }}
       insights={true}
       searchParameters={{

packages/docsearch-css/src/modal.css

@@ -834,13 +834,194 @@ assistive tech users */
 }
 
 .DocSearch-AskAiScreen-Actions {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--docsearch-spacing);
+}
+
+.DocSearch-AskAiScreen-Actions-Controls {
   display: flex;
   flex-direction: row;
   gap: 12px;
   align-items: center;
-  margin-inline-start: auto;
+  align-self: flex-end;
+}
+
+/* Negative feedback note panel */
+.DocSearch-Feedback-Panel {
+  flex-basis: 100%;
+  width: 100%;
+  padding: var(--docsearch-spacing);
+  border-top: 1px solid var(--docsearch-subtle-color);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  text-align: start;
+  animation: fade-in 0.2s ease-in forwards;
+}
+
+.DocSearch-Feedback-Panel-Header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.DocSearch-Feedback-Panel-Title {
+  margin: 0;
+  font-size: 1em;
+  font-weight: 600;
+  color: var(--docsearch-text-color);
 }
 
+.DocSearch-Feedback-Panel-Close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: var(--docsearch-border-radius);
+  color: var(--docsearch-icon-color);
+  transition: background-color 0.2s ease;
+}
+
+.DocSearch-Feedback-Panel-Close:hover {
+  background: var(--docsearch-hit-highlight-color);
+}
+
+.DocSearch-Feedback-Panel-Close svg {
+  width: 16px;
+  height: 16px;
+}
+
+.DocSearch-Feedback-Panel-Reasons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.DocSearch-Feedback-Panel-Reason {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: var(--docsearch-border-radius);
+  border: 1px solid var(--docsearch-subtle-color);
+  background: var(--docsearch-hit-background);
+  color: var(--docsearch-text-color);
+  font-family: inherit;
+  font-size: 1em;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
+}
+
+.DocSearch-Feedback-Panel-Reason:hover {
+  border-color: var(--docsearch-highlight-color);
+  background: var(--docsearch-hit-highlight-color);
+}
+
+.DocSearch-Feedback-Panel-Reason--selected {
+  border-color: var(--docsearch-highlight-color);
+  background: var(--docsearch-soft-primary-color);
+  color: var(--docsearch-highlight-color);
+  font-weight: 500;
+}
+
+.DocSearch-Feedback-Panel-Reason svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.DocSearch-Feedback-Panel-Textarea {
+  width: 100%;
+  min-height: 64px;
+  resize: vertical;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border-radius: var(--docsearch-border-radius);
+  border: 1px solid var(--docsearch-subtle-color);
+  background: var(--docsearch-hit-background);
+  color: var(--docsearch-text-color);
+  font-family: inherit;
+  font-size: 1em;
+  line-height: 1.5;
+}
+
+.DocSearch-Feedback-Panel-Textarea::placeholder {
+  color: var(--docsearch-muted-color);
+  opacity: 1;
+}
+
+.DocSearch-Feedback-Panel-Textarea:focus {
+  outline: none;
+  border-color: var(--docsearch-highlight-color);
+}
+
+.DocSearch-Feedback-Panel-CharCount {
+  margin: 0;
+  align-self: flex-end;
+  font-size: 0.8em;
+  color: var(--docsearch-muted-color);
+  font-variant-numeric: tabular-nums;
+}
+
+.DocSearch-Feedback-Panel-Error {
+  margin: 0;
+  font-size: 0.85em;
+  color: var(--docsearch-error-color);
+}
+
+.DocSearch-Feedback-Panel-Actions {
+  align-self: flex-end;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1em;
+}
+
+.DocSearch-Feedback-Panel-Submit,
+.DocSearch-Feedback-Panel-Cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 6px 15px;
+  border: none;
+  border-radius: var(--docsearch-border-radius);
+  font-family: inherit;
+  font-size: 0.9em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.DocSearch-Feedback-Panel-Submit {
+  background: var(--docsearch-highlight-color);
+  color: #fff;
+}
+
+.DocSearch-Feedback-Panel-Submit:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.DocSearch-Feedback-Panel-Submit:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.DocSearch-Feedback-Panel-Cancel {
+  background: var(--docsearch-modal-background);
+}
+
+.DocSearch-Feedback-Panel-Cancel:hover {
+  background: var(--docsearch-subtle-color);
+}
+
+
 .DocSearch-AskAiScreen-ActionButton {
   display: flex;
   align-items: center;

packages/docsearch-css/src/sidepanel.css

@@ -672,14 +672,18 @@ html[data-theme="dark"] .DocSearch-Sidepanel-Prompt--stop:hover {
   color: var(--docsearch-muted-color);
 }
 
-.DocSearch-Sidepanel .DocSearch-AskAiScreen-Actions {
-  margin-left: 0;
+.DocSearch-Sidepanel .DocSearch-AskAiScreen-Actions-Controls {
+  align-self: flex-start;
 }
 
 .DocSearch-Sidepanel .DocSearch-AskAiScreen-CopyButton {
   order: -1;
 }
 
+.DocSearch-Sidepanel .DocSearch-Feedback-Panel {
+  padding: 0.75em;
+}
+
 .DocSearch-Sidepanel .DocSearch-AskAiScreen-RelatedSources {
   padding-bottom: 1rem;
 }