Customize the Spotter sidebar panel

Table of Contents

Sidebar elements in the embedded view
Chat history panel
Customizing other settings in the sidebar panel
Additional resources

You can customize the Spotter sidebar panel and its contents using configuration properties available in the SpotterSidebarViewConfig interface.

Sidebar elements in the embedded view🔗

The sidebar panel in the Spotter interface includes the following elements:

Feature	Description	Availability
Chat history sidebar	Allows users to access past chats from a sidebar and start a new conversation session. The chat history panel is disabled by default in the embedded view.	✓ Spotter 3 ✓ Spotter 2 ✓ Spotter Classic
Spotter Analysts	Allows users to view the Spotter Analysts in the sidebar panel and open the Analysts dashboard. This feature is available by default in the embedded view. For more information, see Customizing Spotter Analysts in the embedded view.	✓ Spotter 3 ✓ Spotter 2 ✓ Spotter Classic
Spotter best practices	Provides users with guidance and best practices for using Spotter effectively.	✓ Spotter 3 ✓ Spotter 2 ✓ Spotter Classic

Feature

Description

Availability

Chat history sidebar

Allows users to access past chats from a sidebar and start a new conversation session. The chat history panel is disabled by default in the embedded view.

✓ Spotter 3
✓ Spotter 2
✓ Spotter Classic

Spotter Analysts

Allows users to view the Spotter Analysts in the sidebar panel and open the Analysts dashboard. This feature is available by default in the embedded view. For more information, see Customizing Spotter Analysts in the embedded view.

✓ Spotter 3
✓ Spotter 2
✓ Spotter Classic

Spotter best practices

Provides users with guidance and best practices for using Spotter effectively.

✓ Spotter 3
✓ Spotter 2
✓ Spotter Classic

Chat history panel🔗

To allow your users to access the chat history from their previous sessions, you can enable the Chat history in the sidebar by setting the enablePastConversationsSidebar parameter to true in the spotterSidebarConfig object. You can also customize the default state and the labels as shown in this example:

const embed = new SpotterEmbed('#tsEmbed', {
    // ...other embed view configuration options
    // Configuration for the Spotter sidebar UI
    spotterSidebarConfig: {
        enablePastConversationsSidebar: true, // Enable the chat history sidebar
        spotterSidebarDefaultExpanded: true, // Expand the sidebar by default
        spotterSidebarTitle: 'Chat History', // Custom sidebar header text
        spotterNewChatButtonTitle: 'New Conversation', // Custom label for the New chat button
        spotterChatRenameLabel: 'Rename session', // Custom label for the Rename action
        spotterChatDeleteLabel: 'Delete session', // Custom label for the Delete action
        spotterConversationsBatchSize: 20, // Conversations fetched per batch (default: 30)
    },
})

Note

The standalone enablePastConversationsSidebar property on SpotterEmbedViewConfig is deprecated from Visual Embed SDK v1.47.0. Use the enablePastConversationsSidebar property within the spotterSidebarConfig object instead. When both properties are defined, the value in spotterSidebarConfig takes precedence.

Customizing sidebar menu actions🔗

Use the following Action enum members in hiddenActions or disabledActions to control the visibility of individual chat history panel elements:

Action.SpotterSidebarHeader for the sidebar header, which includes the title and the expand/collapse toggle. Hide-only.
Action.SpotterSidebarToggle for the expand/collapse toggle button on the sidebar.
Action.SpotterNewChat for the New Chat button.
Action.SpotterPastChatBanner for the past-conversation alert banner. Hide-only.
Action.SpotterChatMenu for the three-dot edit menu displayed for each conversation in the list.
Action.SpotterChatRename for the Rename option in the conversation edit menu.

Action.SpotterChatDelete for the Delete option in the conversation edit menu.

const spotterEmbed = new SpotterEmbed('#ts-embed', {
  worksheetId: '<datasource-guid>',
  spotterSidebarConfig: {
    enablePastConversationsSidebar: true,
  },
  // Hide the Rename option and the past-conversation banner
  hiddenActions: [Action.SpotterChatRename, Action.SpotterPastChatBanner],
});

Pinning conversations🔗

Users can pin Spotter conversations in the chat history panel so that the conversations appear at the top of the list. This feature is available from ThoughtSpot Cloud 26.10.0.cl and Visual Embed SDK 1.53.0, and it requires the chat history panel (enablePastConversationsSidebar: true).

Pinning is off by default in embedded Spotter. To turn it on, set the enabled property to true in the spotterChatPinConfig object of spotterSidebarConfig. When pinning is off, the Pin and Unpin options and the pin icon are hidden, and the HostEvent.PinSpotterConversation and HostEvent.UnpinSpotterConversation events have no effect.

To customize the labels for the Pin and Unpin options in the conversation edit menu, set the following properties in the spotterChatPinConfig object:

pinLabel
String. Custom label for the pin option in the conversation edit menu.
unpinLabel
String. Custom label for the unpin option in the conversation edit menu.

const spotterEmbed = new SpotterEmbed('#ts-embed', {
  // ...other embed view configuration options
  spotterSidebarConfig: {
    enablePastConversationsSidebar: true,
    spotterChatPinConfig: {
      enabled: true, // Turn on pinning
      pinLabel: 'Pinned', // Custom label for the pin option
      unpinLabel: 'Remove Pin', // Custom label for the unpin option
    },
  },
});

To pin or unpin conversations programmatically, or to listen for pin events, see Customizing app interactions. For more information, see Spotter conversation pin events and Spotter conversation pin and unpin.

Customizing app interactions🔗

Use the following event IDs to enable interaction between the host application and the chat history panel:

HostEvents

HostEvent.StartNewSpotterConversation
Starts a new Spotter conversation programmatically.
HostEvent.PinSpotterConversation and HostEvent.UnpinSpotterConversation
Pins or unpins a saved conversation. Both events accept a conversationId, and require spotterChatPinConfig.enabled to be true.
```
spotterEmbed.trigger(HostEvent.StartNewSpotterConversation);
```

For a complete list of event IDs, see HostEvent reference. For the host event that opens the share modal from the chat history panel, see Customizing app interactions.

EmbedEvents

EmbedEvent.SpotterConversationRenamed
Emitted when a user renames a conversation from the chat history panel. The event payload includes the convId, oldTitle, and newTitle.
EmbedEvent.SpotterConversationDeleted
Emitted when a user deletes a conversation from the chat history panel. The event payload includes the convId and title.
EmbedEvent.SpotterConversationSelected
Emitted when a user selects a conversation from the chat history panel. The event payload includes the convId, title, and worksheetId.
EmbedEvent.SpotterConversationPinned and EmbedEvent.SpotterConversationUnpinned
Emitted when a user pins or unpins a conversation. The event payload includes the conversationId and the pinnedAt or unpinnedAt timestamp in ISO 8601 date and time format.

spotterEmbed.on(EmbedEvent.SpotterConversationRenamed, (payload) => {
  console.log('Renamed:', payload.convId, payload.oldTitle, '->', payload.newTitle);
});

spotterEmbed.on(EmbedEvent.SpotterConversationDeleted, (payload) => {
  console.log('Deleted:', payload.convId, payload.title);
});

spotterEmbed.on(EmbedEvent.SpotterConversationSelected, (payload) => {
  console.log('Selected:', payload.convId, payload.title, payload.worksheetId);
});

For a complete list of event IDs, see EmbedEvent reference.

Customizing other settings in the sidebar panel🔗

The other settings in the sidebar panel include a link to Best practices guide and the sidebar footer.

To customize these options or to control their visibility in the sidebar, use the following options:

spotterDocumentationUrl
Allows customizing the documentation link.
Action.SpotterSidebarFooter
Action ID to show or hide the sidebar footer that contains the documentation link.
Action.SpotterDocs
Action ID to show or hide the documentation or best practices link in the sidebar footer.

const embed = new SpotterEmbed('#tsEmbed', {
    // ...other embed view configuration options
    // Configuration for the Spotter sidebar UI
    spotterSidebarConfig: {
        enablePastConversationsSidebar: true, // Enable the chat history sidebar
        spotterDocumentationUrl: 'https://your-help-center-url', // Custom best practices link
    },
})

Customize the Spotter sidebar panel

Sidebar elements in the embedded view🔗

Chat history panel🔗

Customizing sidebar menu actions🔗

Pinning conversations🔗

Customizing app interactions🔗

Customizing other settings in the sidebar panel🔗

Additional resources🔗