SmartSnippetQuestionsList

This is for:

Developer

Example Implementation

smart-snippet-questions-list.fn.tsx

import {SmartSnippetQuestionsList as HeadlessSmartSnippetQuestionsList} from '@coveo/headless';
import {useEffect, useState, FunctionComponent} from 'react';
 
interface SmartSnippetQuestionsListProps {
  controller: HeadlessSmartSnippetQuestionsList;
}
 
export const SmartSnippetQuestionsList: FunctionComponent<
  SmartSnippetQuestionsListProps
> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  const {questions} = state;
 
  if (questions.length === 0) {
    return <div>Sorry, no related questions found</div>;
  }
 
  return (
    <div style={{textAlign: 'left'}}>
      People also ask:
      <dl>
        {questions.map((question) => {
          return (
            <>
              <dt>{question.question}</dt>
              <dd>
                <div
                  style={{display: question.expanded ? 'block' : 'none'}}
                  dangerouslySetInnerHTML={{__html: question.answer}}
                ></div>
                <button
                  style={{display: question.expanded ? 'none' : 'block'}}
                  onClick={() => controller.expand(question.questionAnswerId)}
                >
                  Show answer
                </button>
                <button
                  style={{display: question.expanded ? 'block' : 'none'}}
                  onClick={() => controller.collapse(question.questionAnswerId)}
                >
                  Hide answer
                </button>
              </dd>
            </>
          );
        })}
      </dl>
    </div>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildSmartSnippetQuestionsList(engine);
 *
 * <SmartSnippetQuestionsList controller={controller} />;
 * ```
 */

The SmartSnippetQuestionsList controller allows to manage additional queries for which a SmartSnippet model can provide relevant excerpts.

Methods

Prepares to select a link inside an answer after a certain delay, sending analytics if it was never selected before.

In a DOM context, we recommend calling this method on the touchstart event.

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet containing the link.

  • link: InlineLink

    The link to select.

beginDelayedSelectSource

Prepares to select the source after a certain delay, sending analytics if it hadn’t been selected before.

In a DOM context, we recommend calling this method on the touchstart event.

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet to collapse.

Cancels the pending selection caused by beginDelayedSelectInlineLink.

In a DOM context, we recommend calling this method on the touchend event.

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet containing the link.

  • link: InlineLink

    The link to select.

cancelPendingSelectSource

Cancels the pending selection caused by beginDelayedSelect.

In a DOM context, we recommend calling this method on the touchend event.

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet to collapse.

collapse

Collapse the specified snippet suggestion.

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet to collapse.

expand

Expand the specified snippet suggestion.

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet to expand.

Selects a link inside an answer, logging a UA event to the Coveo Platform if it was never selected before.

In a DOM context, we recommend calling this method on all of the following events: * contextmenu * click * mouseup * mousedown

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet containing the link.

  • link: InlineLink

    The link to select.

selectSource

Selects the source, logging a UA event to the Coveo Platform if the source hadn’t been selected before.

In a DOM context, we recommend calling this method on all of the following events: * contextmenu * click * mouseup * mousedown

Parameters

  • identifier: string

    The questionAnswerId of the smart snippet to collapse.

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the SmartSnippetQuestionsList controller.

Properties

Initialize

buildSmartSnippetQuestionsList

Creates a SmartSnippetQuestionsList controller instance.

Parameters

Returns SmartSnippetQuestionsList

SmartSnippetQuestionsListProps

The configurable SmartSnippetQuestionsList properties.

Properties

SmartSnippetQuestionsListOptions

The options for the SmartSnippetQuestionsList controller.

Properties

  • selectionDelay?: number

    The amount of time in milliseconds to wait before selecting the source after calling beginDelayedSelect.

    Default: 1000

HighlightKeyword

Properties

  • length: number

    The length of the offset.

  • offset: number

    The 0 based offset inside the string where the highlight should start.

Properties

  • linkText: string

  • linkURL: string

QuestionAnswerDocumentIdentifier

Properties

  • contentIdKey: string

    The content identifier key. Typically, permanentid or urihash.

  • contentIdValue: string

    The content identifier value.

Raw

Properties

  • [key: string]: unknown

    Custom keys that depend on the documents in the index.

Result

Properties

  • absentTerms: string[]

    The basic query expression terms which this query result item does not match. Note: This property is populated by terms from the query pipeline-processed q value (not from the original q value).

  • clickUri: string

    The hyperlinkable item URI. Notes: Use the clickUri value when you want to create hyperlinks to the item, rather than the uri or printableUri value.

  • excerpt: string

    The contextual excerpt generated for the item (see the excerptLength query parameter).

  • excerptHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item excerpt string.

  • firstSentences: string

    The first sentences retrieved from the item (see the retrieveFirstSentences query parameter).

  • firstSentencesHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item firstSentences string.

  • flags: string

    The flags that are set on the item by the index. Distinct values are separated by semicolons.

  • hasHtmlVersion: boolean

    Whether the index contains an HTML version of this item.

  • isRecommendation: boolean

    Whether the item score was boosted as a Coveo ML recommendation.

  • isTopResult: boolean

    Whether the item score was boosted by a featured result rule in the query pipeline.

  • percentScore: number

    The item ranking score expressed as a percentage (see the sortCriteria and rankingFunctions query parameters).

  • printableUri: string

    The human readable item URI. Note: Avoid using the printableUri value to create hyperlinks to the item. Use the clickUri value instead.

  • printableUriHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item printableUri string.

  • rankingInfo: string | null

    The raw debug information generated by the index to detail how the item was ranked. This property is null unless the debug query parameter is set to true.

  • raw: Raw

    The values of the fields which were retrieved for this item (see the fieldsToInclude and fieldsToExclude query parameters).

  • score: number

    The total ranking score computed for the item (see the sortCriteria and rankingFunctions query parameters).

  • summary: null

    The item summary (see the summaryLength query parameter).

  • summaryHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item summary string.

  • title: string

    Contains the title of the item.

  • titleHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item title string.

  • uniqueId: string

    The unique item identifier. You should consider the uniqueId value as an opaque string.

  • uri: string

    The item URI. Notes: Avoid using the uri value to create hyperlinks to the item. Use the clickUri value instead.

  • rankingModifier?: string

    If applicable, represents the type of ranking modification that was applied to this result.

SmartSnippetRelatedQuestion

Properties

  • answer: string

    The answer, or snippet, related to the question.

    This can contain HTML markup, depending on the source of the answer.

  • documentId: QuestionAnswerDocumentIdentifier

    The index identifier for the document that provided the answer.

  • expanded: boolean

    Determines if the snippet is currently expanded.

  • question: string

    The question related to the smart snippet.

  • questionAnswerId: string

    The unique identifier for this question & answer.

  • source?: Result

    Provides the source of the smart snippet.

Unsubscribe

Call signatures

  • (): void