diff --git a/workspaces/lightspeed/.changeset/gentle-pens-lock.md b/workspaces/lightspeed/.changeset/gentle-pens-lock.md new file mode 100644 index 0000000000..431c5c184f --- /dev/null +++ b/workspaces/lightspeed/.changeset/gentle-pens-lock.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-lightspeed': patch +--- + +Disable model selector when a chat session is active and show a tooltip explaining that each session supports only one model diff --git a/workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md b/workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md index e8b7b123b0..57baa0ae04 100644 --- a/workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md +++ b/workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md @@ -179,6 +179,7 @@ export const lightspeedTranslationRef: TranslationRef< readonly 'tooltip.close': string; readonly 'tooltip.fab.open': string; readonly 'tooltip.fab.close': string; + readonly 'tooltip.modelSelector.disabled': string; readonly 'attach.menu.title': string; readonly 'attach.menu.description': string; readonly 'modal.title.preview': string; diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx index f6f842663a..ffd0d83dc3 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx +++ b/workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx @@ -1805,7 +1805,12 @@ export const LightspeedChat = ({ onNewChat(); handleSelectedModel(item); }} - disabled={isSendButtonDisabled} + disabled={isSendButtonDisabled || messages.length > 0} + disabledTooltip={ + messages.length > 0 + ? t('tooltip.modelSelector.disabled') + : undefined + } /> } forceMultilineLayout diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/MessageBarModelSelector.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/MessageBarModelSelector.tsx index 00f96c26ed..e8c3b2488a 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/components/MessageBarModelSelector.tsx +++ b/workspaces/lightspeed/plugins/lightspeed/src/components/MessageBarModelSelector.tsx @@ -23,6 +23,7 @@ import { DropdownList, MenuToggle, MenuToggleElement, + Tooltip, } from '@patternfly/react-core'; import { AngleDownIcon } from '@patternfly/react-icons'; @@ -33,6 +34,7 @@ type MessageBarModelSelectorProps = { models: { label: string; value: string; provider: string }[]; onSelect: (model: string) => void; disabled?: boolean; + disabledTooltip?: string; }; const useStyles = makeStyles(theme => ({ @@ -69,6 +71,7 @@ export const MessageBarModelSelector = ({ models, onSelect, disabled = false, + disabledTooltip, }: MessageBarModelSelectorProps) => { const [isOpen, setIsOpen] = useState(false); const classes = useStyles(); @@ -77,7 +80,7 @@ export const MessageBarModelSelector = ({ const selectedModelLabel = models.find(m => m.value === selectedModel)?.label ?? selectedModel; - const toggle = (toggleRef: Ref) => ( + const toggleButton = (toggleRef: Ref) => ( setIsOpen(!isOpen)} @@ -92,6 +95,17 @@ export const MessageBarModelSelector = ({ ); + const toggle = (toggleRef: Ref) => { + if (disabled && disabledTooltip) { + return ( + + {toggleButton(toggleRef)} + + ); + } + return toggleButton(toggleRef); + }; + return ( { expect(screen.getByText('granite-3.3')).toBeInTheDocument(); }); + + it('should show tooltip when disabled with disabledTooltip', async () => { + render( + , + ); + + const toggleButton = screen.getByRole('button', { + name: 'Chatbot selector', + }); + expect(toggleButton).toBeDisabled(); + + await userEvent.hover(toggleButton.parentElement!); + + await waitFor(() => { + expect( + screen.getByText( + 'Each chat session supports only one model. To switch models, open a new chat.', + ), + ).toBeInTheDocument(); + }); + }); }); diff --git a/workspaces/lightspeed/plugins/lightspeed/src/translations/ref.ts b/workspaces/lightspeed/plugins/lightspeed/src/translations/ref.ts index 8b17db3d92..26f78603ac 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/translations/ref.ts +++ b/workspaces/lightspeed/plugins/lightspeed/src/translations/ref.ts @@ -266,6 +266,8 @@ export const lightspeedMessages = { 'tooltip.close': 'Close', 'tooltip.fab.open': 'Open intelligent assistant', 'tooltip.fab.close': 'Close intelligent assistant', + 'tooltip.modelSelector.disabled': + 'Each chat session supports only one model. To switch models, open a new chat.', // Attach menu 'attach.menu.title': 'Attach',