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

closeFeedbackModal

Allows the user to signal that they no longer wish to send feedback about why a particular answer was not relevant.

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.

openFeedbackModal

Allows the user to signal that they wish to send feedback about why a particular answer was not relevant.

sendDetailedFeedback

Allows the user to send detailed feedback about why a particular answer was not relevant.

Parameters

  • details: string

    A personalized message from the end user about the relevance of the answer.

sendFeedback

Allows the user to send feedback about why a particular answer was not relevant.

Parameters

  • feedback: SmartSnippetFeedback

    The generic feedback that the end user wishes to send.

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.

  • feedbackModalOpen: boolean

    Determines if the feedback modal with the purpose of explaining why the end user disliked the snippet is currently opened.

  • 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, useRef} 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);
  const detailedAnswerRef = useRef<HTMLTextAreaElement>(null);
 
  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,
    feedbackModalOpen,
  } = state;
 
  if (!answerFound) {
    return <div>Sorry, no answer has been found for this query.</div>;
  }
 
  if (feedbackModalOpen) {
    return (
      <div role="dialog">
        <h1>What's wrong with this snippet?</h1>
        <fieldset>
          <legend>Give a simple answer</legend>
          <ul>
            <li>
              <button
                onClick={() => controller.sendFeedback('does_not_answer')}
              >
                It does not answer my question
              </button>
            </li>
            <li>
              <button
                onClick={() => controller.sendFeedback('partially_answers')}
              >
                It only partially answers my question
              </button>
            </li>
            <li>
              <button
                onClick={() => controller.sendFeedback('was_not_a_question')}
              >
                I was not asking a question
              </button>
            </li>
          </ul>
        </fieldset>
        OR
        <fieldset>
          <legend>Give a detailed answer</legend>
          <textarea ref={detailedAnswerRef}></textarea>
          <button
            onClick={() =>
              detailedAnswerRef.current &&
              controller.sendDetailedFeedback(detailedAnswerRef.current.value)
            }
          >
            Send feedback
          </button>
        </fieldset>
        <button onClick={() => controller.closeFeedbackModal()}>Cancel</button>
      </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>
          {disliked ? (
            <button onClick={() => controller.openFeedbackModal()}>
              Explain why
            </button>
          ) : (
            []
          )}
        </dd>
      </dl>
    </div>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildSmartSnippet(engine);
 *
 * <SmartSnippet controller={controller} />;
 * ```
 */