fix(lightspeed): disable model selector when chat session is active

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

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;

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

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<MenuToggleElement>) => (
+  const toggleButton = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={() => setIsOpen(!isOpen)}
@@ -92,6 +95,17 @@ export const MessageBarModelSelector = ({
     </MenuToggle>
   );
 
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => {
+    if (disabled && disabledTooltip) {
+      return (
+        <Tooltip content={disabledTooltip}>
+          <span>{toggleButton(toggleRef)}</span>
+        </Tooltip>
+      );
+    }
+    return toggleButton(toggleRef);
+  };
+
   return (
     <Dropdown
       className={classes.dropdown}

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/MessageBarModelSelector.test.tsx

@@ -235,4 +235,31 @@ describe('MessageBarModelSelector', () => {
 
     expect(screen.getByText('granite-3.3')).toBeInTheDocument();
   });
+
+  it('should show tooltip when disabled with disabledTooltip', async () => {
+    render(
+      <MessageBarModelSelector
+        selectedModel="granite-3.3"
+        models={mockModels}
+        onSelect={mockOnSelect}
+        disabled
+        disabledTooltip="Each chat session supports only one model. To switch models, open a new chat."
+      />,
+    );
+
+    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();
+    });
+  });
 });

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',