SCAL-315472 TSE css styling and action for referencing

[adityabhushan-pixel]

No description provided.

[gemini-code-assist]

Code Review

This pull request introduces support for the reference-mode toggle button in the SpotterViz chat input by adding the 'SpotterVizReferenceMode' action to the 'Action' enum and defining three new CSS variables for styling. The reviewer suggested renaming the CSS variables to use the '--ts-var-spotterviz-reference-' prefix instead of '--ts-var-liveboard-reference-' to maintain consistency with existing SpotterViz variables and the action name.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

To maintain consistency with other SpotterViz CSS variables (which are all prefixed with --ts-var-spotterviz-) and the action name SpotterVizReferenceMode, these new variables should be prefixed with --ts-var-spotterviz-reference- instead of --ts-var-liveboard-reference-.

Suggested change

	/**
	* Background color of the reference-mode toggle button in the SpotterViz
	* chat input when it is unselected and the user hovers over it.
	*/
	'--ts-var-liveboard-reference-icon-hover-background'?: string;
	/**
	* Icon (glyph) color for the reference-mode selected state — applies to
	* both the toggle button when active and the icon badge on each
	* referenced-entity chip in the chat input.
	*/
	'--ts-var-liveboard-reference-selected-icon-color'?: string;
	/**
	* Background color for the reference-mode selected state — applies to
	* both the toggle button when active and the icon badge on each
	* referenced-entity chip in the chat input.
	*/
	'--ts-var-liveboard-reference-selected-background'?: string;
	/**
	* Background color of the reference-mode toggle button in the SpotterViz
	* chat input when it is unselected and the user hovers over it.
	*/
	'--ts-var-spotterviz-reference-icon-hover-background'?: string;
	/**
	* Icon (glyph) color for the reference-mode selected state — applies to
	* both the toggle button when active and the icon badge on each
	* referenced-entity chip in the chat input.
	*/
	'--ts-var-spotterviz-reference-selected-icon-color'?: string;
	/**
	* Background color for the reference-mode selected state — applies to
	* both the toggle button when active and the icon badge on each
	* referenced-entity chip in the chat input.
	*/
	'--ts-var-spotterviz-reference-selected-background'?: string;

References

1. When adding new code, prioritize maintaining local consistency with existing patterns in the file over introducing a new, more concise pattern if it breaks from the established convention.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@thoughtspot/visual-embed-sdk@548

commit: 16f8369