THIS IS ARCHIVED DOCUMENTATION

SmartSnippet (Deprecated)

The SmartSnippet controller allows to manage the excerpt of a document that would be most likely to answer a particular query .

Methods

collapse

Collapse the snippet.

dislike

Allows the user to signal that a particular answer was not relevant.

expand

Expand the snippet.

like

Allows the user to signal that a particular answer was relevant.

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 SmartSnippet controller.

Properties

  • answer: string

    The answer, or snippet, related to the question.

  • answerFound: boolean

    Determines of there is an available answer for the current query.

  • disliked: boolean

    Determines if the snippet was disliked, or downvoted by the end user.

  • documentId: QuestionAnswerDocumentIdentifier

    The index identifier for the document that provided the answer.

  • expanded: boolean

    Determines if the snippet is currently expanded.

  • liked: boolean

    Determines if the snippet was liked, or upvoted by the end user.

  • question: string

    The question related to the smart snippet.

Initialize

buildSmartSnippet

Creates a SmartSnippet controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

Returns SmartSnippet

QuestionAnswerDocumentIdentifier

Properties

  • contentIdKey: string

    The content identifier key. Typically, permanentid or urihash.

  • contentIdValue: string

    The content identifier value.

Unsubscribe

Call signatures

  • (): void

Example Implementation

smart-snippet.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {SmartSnippet as HeadlessSmartSnippet} from '@coveo/headless';
 
interface SmartSnippetProps {
  controller: HeadlessSmartSnippet;
}
 
export const SmartSnippet: FunctionComponent<SmartSnippetProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  const answerStyles = (expanded: boolean) => {
    const maskImage = () =>
      expanded
        ? 'none'
        : 'linear-gradient(to bottom, black 50%, transparent 100%)';
 
    return {
      maxHeight: expanded ? '100%' : '100px',
      maxWidth: '200px',
      overflow: 'hidden',
      marginBottom: '10px',
      maskImage: maskImage(),
      WebkitMaskImage: maskImage(),
    };
  };
 
  const {answerFound, answer, question, liked, disliked, expanded} = state;
 
  if (!answerFound) {
    return <div>Sorry, no answer has been found for this query.</div>;
  }
 
  return (
    <div style={{textAlign: 'left'}}>
      <dl>
        <dt>{question}</dt>
        <dd>
          <div
            dangerouslySetInnerHTML={{__html: answer}}
            style={answerStyles(expanded)}
          ></div>
          <button
            style={{display: expanded ? 'none' : 'block'}}
            onClick={() => controller.expand()}
          >
            Show complete answer
          </button>
          <button
            style={{display: expanded ? 'block' : 'none'}}
            onClick={() => controller.collapse()}
          >
            Collapse answer
          </button>
          <button
            style={{fontWeight: liked ? 'bold' : 'normal'}}
            onClick={() => controller.like()}
          >
            Thumbs up
          </button>
          <button
            style={{fontWeight: disliked ? 'bold' : 'normal'}}
            onClick={() => controller.dislike()}
          >
            Thumbs down
          </button>
        </dd>
      </dl>
    </div>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildSmartSnippet(engine);
 *
 * <SmartSnippet controller={controller} />;
 * ```
 */