(
+
+ {!isChatHistoryDrawerOpen && (
+ setIsChatHistoryDrawerOpen(true)}
+ onNewChat={onNewChat}
+ newChatDisabled={newChatCreated}
+ />
)}
- {mainPanelContent}
-
- }
- />
+ {children}
+
+ )}
+ >
+ : ,
+ }}
+ handleTextInputChange={handleFilter}
+ searchInputPlaceholder={t('chatbox.search.placeholder')}
+ searchInputAriaLabel={t('aria.search.placeholder')}
+ searchInputProps={{
+ value: filterValue,
+ onClear: () => {
+ setFilterValue('');
+ },
+ }}
+ searchActionEnd={sortDropdown}
+ noResultsState={
+ filterValue &&
+ Object.keys(filterConversations(filterValue)).length === 0
+ ? {
+ bodyText: t('chatbox.emptyState.noResults.body'),
+ titleText: t('chatbox.emptyState.noResults.title'),
+ icon: SearchIcon,
+ }
+ : undefined
+ }
+ drawerContent={
+ handleAttach(data, e)}
+ displayMode={ChatbotDisplayMode.embedded}
+ infoText={t('chatbox.fileUpload.infoText')}
+ allowedFileTypes={supportedFileTypes}
+ onAttachRejected={onAttachRejected}
+ >
+ {showAlert && uploadError.message && (
+
+ setUploadError({ message: null })}
+ >
+ {uploadError.message}
+
+
+ )}
+ {mainPanelContent}
+
+ }
+ />
+
)}
{showNotebooksPanel &&
!notebooksPermissionLoading &&
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/MessageBarModelSelector.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/MessageBarModelSelector.tsx
new file mode 100644
index 0000000000..00f96c26ed
--- /dev/null
+++ b/workspaces/lightspeed/plugins/lightspeed/src/components/MessageBarModelSelector.tsx
@@ -0,0 +1,124 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Ref, useState } from 'react';
+
+import { makeStyles } from '@material-ui/core';
+import {
+ Dropdown,
+ DropdownItem,
+ DropdownList,
+ MenuToggle,
+ MenuToggleElement,
+} from '@patternfly/react-core';
+import { AngleDownIcon } from '@patternfly/react-icons';
+
+import { useTranslation } from '../hooks/useTranslation';
+
+type MessageBarModelSelectorProps = {
+ selectedModel: string;
+ models: { label: string; value: string; provider: string }[];
+ onSelect: (model: string) => void;
+ disabled?: boolean;
+};
+
+const useStyles = makeStyles(theme => ({
+ selectorToggle: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: 4,
+ color: theme.palette.text.secondary,
+ fontSize: 14,
+ fontWeight: 500,
+ cursor: 'pointer',
+ padding: '4px 8px',
+ borderRadius: 8,
+ border: 'none',
+ background: 'transparent',
+ '&:hover': {
+ backgroundColor: theme.palette.action.hover,
+ },
+ '&:disabled': {
+ cursor: 'not-allowed',
+ opacity: 0.5,
+ },
+ },
+ dropdown: {
+ '& ul, & li': {
+ padding: 0,
+ margin: 0,
+ },
+ },
+}));
+
+export const MessageBarModelSelector = ({
+ selectedModel,
+ models,
+ onSelect,
+ disabled = false,
+}: MessageBarModelSelectorProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const classes = useStyles();
+ const { t } = useTranslation();
+
+ const selectedModelLabel =
+ models.find(m => m.value === selectedModel)?.label ?? selectedModel;
+
+ const toggle = (toggleRef: Ref