Components

Mendable Chat Bubble

Before installation, ensure you've either signed up through our platform or we have provided you with the ANON_KEY. Without the key, you won't be able to setup the chat bubble component.


Mendable Chat Bubble

The Chat Bubble is a component that appears as a floating chat icon, typically pinned to the bottom right of the screen. When clicked, it will open a dialog with Mendable Chat.

Using React 17?

If you're integrating Mendable Components with React 17, please consult our guide here.

Usage

import { MendableChatBubble } from "@mendable/search"

const style = { darkMode: false, accentColor: "#123456" }

<MendableChatBubble anon_key='YOUR_ANON_KEY' style={style} />
PropTypeDefaultDescription
anon_key (Required)string-Mendable Chat ANON_KEY
hintQuestionsarray-Array of questions to show as suggested questions when the component loads
styleobject-Style object
style.darkModebooleanfalseDark mode
style.accentColorstring"#123456"Hex Accent color
style.backgroundColorstring"#123456"Hex Background color
contextstringfalseAdditional context to be passed to the AI
iconobjectChat Bubble EmojiReact: Chat icon HTML tag, can be a img, svg or any other HTML tag, Vanilla JS: image url
floatingButtonStyleobject-Defines the style for the floating button
cmdShortcutKeystring"k"Define the shortcut for users to open mendable with. By default, it is CMD + K or CTRL + K
showSimpleSearchbooleanfalseShow simple search bar option on the top
welcomeMessagestring"Hello, how can I help you?"Welcome message for the chat
dialogPlaceholderstring"Ask me anything..."Placeholder text for the mendable bot input bar inside the dialog window
botIconobjectBot EmojiReact: Bot icon HTML tag, can be a img, svg or any other HTML tag, Vanilla JS: image url
userIconobjectUser EmojiReact: User icon HTML tag, can be a img, svg or any other HTML tag, Vanilla JS: image url
positionOverwriteClassnamestring-Classname that helps overwrite the position of the floating button
dialogCustomStyleobject-Custom style for the dialog
customTextstring-Custom text for the chat
messageSettingsobject-Message settings
messageSettings.openSourcesInNewTabbooleanfalseOpen sources in new tab
messageSettings.prettySourcesbooleanfalseDisplay the sources by title / sub-section instead of long URL
messageSettings.hideSourcesbooleanfalseHide the sources
messageSettings.sourcesFirstbooleanfalseShow the verified sources before showing the answer
privacyDisclaimerstring""Privacy disclaimer text
inputSettingsobject-Input settings
inputSettings?.askButtonStyleobject-Ask button style object
inputSettings?.askButtonStyle.activeColorstring"#123456"Ask button background color when active
inputSettings?.askButtonStyle.disabledColorstring"#123456"Ask button color on a disabled state
inputSettings?.askButtonStyle.textColorstring"#123456"Ask button text color
inputSettings?.askButtonStyle.disabledTextColorstring"#123456"Ask button text color on a disabled state
footerobject-Footer object
footer.bottomRightLinkobject-Bottom right button object
footer.bottomRightLink.labelstring""Text label for the bottom right button
footer.bottomRightLink.linkstring""URL for the bottom right button
languagestring""Defaults to user's personal settings. Anything else will overwrite the language for all users. Languages available: pt,es,fr,it,nl,de,ja,ar,ro,el
onMessageForTrackingfunction-Callback function that triggers when a message is sent. It receives the question, answer and optional sources as parameters
onSourceClickedForTrackingfunction-Callback function that triggers when a source is clicked. It receives the source as a parameter
onSwitchingSearchTypefunction-Callback function that triggers when the search type is switched. It receives the type as a parameter
onRateClickedfunction-Callback function that triggers when the user likes or dislikes a message. It receives the isLiked, question, answer and sources as parameters

Callback functions

The MendableChatBubble component provides callback functions for tracking events inside the component.

  • onMessageForTracking : This function is triggered whenever a message is sent in the component. The function receives the question and the answer as parameters. This can be used for logging or analytics purposes.

Example

import { MendableChatBubble } from "@mendable/search"


function MySearchComponent() {
  const handleOnMessage = (question, answer, sources) => {
    console.log("User asked:", question);
    console.log("Received answer:", answer);
    console.log("Sources:", sources);


    // You can add additional tracking or analytics logic here.
  };

  return (
    <MendableChatBubble
      anon_key="YOUR_ANON_KEY"
      onMessageForTracking={handleOnMessage}
    />
  );
}
  • onSourceClickedForTracking : This function is triggered whenever a source is clicked in the search results. The function receives the source as a parameter. This can be used for logging or tracking user interactions.

Example

import { MendableChatBubble } from "@mendable/search"

function handleOnSourceClicked(source) {
  console.log("User clicked on source:", source);
  // Add tracking or logging logic here
}

<MendableChatBubble
  anon_key='YOUR_ANON_KEY'
  onSourceClickedForTracking={handleOnSourceClicked}
/>
  • onRateClicked : This function is triggered whenever an answer is rated as helpful or not. The function receives the isLiked as a parameter which is true for 'Yes' and false for 'No'.

Example

import { MendableChatBubble } from "@mendable/search"

function handleOnRating(isLiked, question, answer, sources) {
  console.log("User liked the question?", isLiked);
  // Add tracking or logging logic here
}

<MendableChatBubble
  anon_key='YOUR_ANON_KEY'
  onRateClicked={handleOnRating}
/>

Use these functions to gain insights into how users are interacting with the search bar.

Metadata Filtering (Beta)

You can filter out sources based on metadata on the component level. This is useful if you want to filter out sources based on the version of the document or any other metadata you have ingested. Metadata ingestion is currently only available through the /ingestDocuments endpoint.

To use metadata filtering on the component level, use the metadata prop in your component:

<MendableSearchBar
  anon_key="YOUR_ANON_KEY"
  metadata={{
    version: { $lte: 6 },
    age: { $eq: 22 },
  }}
/>

The metadata parameter is an object that contains the metadata you want to filter on. The key is the name of the metadata and the value is an object that contains the operator and the value you want to filter on.

The above example will filter in only the sources that have a version less than or equal to 6 and an age equal to 22.

Metadata supports the following operators:

  • $eq - equal to (string, int, float)
  • $ne - not equal to (string, int, float)
  • $gt - greater than (int, float)
  • $gte - greater than or equal to (int, float)
  • $lt - less than (int, float)
  • $lte - less than or equal to (int, float)
  • $in - matches any value in an array (string, int, float)

It currently does not support and, or operators, but we plan to support them soon.

Previous
In Place