diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSearchActions.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSearchActions.tsx new file mode 100644 index 000000000..f0b9c3b2f --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSearchActions.tsx @@ -0,0 +1,198 @@ +import { FunctionComponent, useState } from 'react'; +import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot'; +import ChatbotConversationHistoryNav, { + Conversation +} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav'; +import { + Button, + Checkbox, + MenuToggle, + MenuToggleElement, + Select, + SelectList, + SelectOption, + Tooltip +} from '@patternfly/react-core'; +import { FilterIcon, SortAmountDownIcon } from '@patternfly/react-icons'; + +const initialConversations: { [key: string]: Conversation[] } = { + Today: [{ id: '1', text: 'Red Hat products and services' }], + 'This month': [ + { + id: '2', + text: 'Enterprise Linux installation and setup' + }, + { id: '3', text: 'Troubleshoot system crash' } + ], + March: [ + { id: '4', text: 'Ansible security and updates' }, + { id: '5', text: 'Red Hat certification' }, + { id: '6', text: 'Lightspeed user documentation' } + ], + February: [ + { id: '7', text: 'Crashing pod assistance' }, + { id: '8', text: 'OpenShift AI pipelines' }, + { id: '9', text: 'Updating subscription plan' }, + { id: '10', text: 'Red Hat licensing options' } + ], + January: [ + { id: '11', text: 'RHEL system performance' }, + { id: '12', text: 'Manage user accounts' } + ] +}; + +export const ChatbotHeaderTitleDemo: FunctionComponent = () => { + const [isDrawerOpen, setIsDrawerOpen] = useState(true); + const [hasDrawerHeadDivider, setHasDrawerHeadDivider] = useState(false); + const [showSearchActionStart, setShowSearchActionStart] = useState(false); + const [showSearchActionEnd, setShowSearchActionEnd] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [isSortSelectOpen, setIsSortSelectOpen] = useState(false); + const [selectedSort, setSelectedSort] = useState('newest'); + const [conversations, setConversations] = useState( + initialConversations + ); + const displayMode = ChatbotDisplayMode.embedded; + + const sortLabels: { [key: string]: string } = { + newest: 'Date (newest first)', + oldest: 'Date (oldest first)', + 'alphabetical-asc': 'Name (A-Z)', + 'alphabetical-desc': 'Name (Z-A)' + }; + + const onSortSelect = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + setSelectedSort(value as string); + setIsSortSelectOpen(false); + }; + + const findMatchingItems = (targetValue: string) => { + const filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => { + const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase())); + if (filteredItems.length > 0) { + acc[key] = filteredItems; + } + return acc; + }, {}); + + return filteredConversations; + }; + + return ( + <> + setIsDrawerOpen(!isDrawerOpen)} + id="search-actions-drawer-visible" + name="drawer-visible" + /> + setHasDrawerHeadDivider(!hasDrawerHeadDivider)} + id="search-actions-drawer-head-divider" + name="drawer-head-divider" + /> + setShowSearchActionStart(!showSearchActionStart)} + id="search-actions-show-search-action-start" + name="show-search-action-start" + /> + setShowSearchActionEnd(!showSearchActionEnd)} + id="search-actions-show-search-action-end" + name="show-search-action-end" + /> + setIsLoading(!isLoading)} + id="search-actions-drawer-is-loading" + name="drawer-is-loading" + /> + setIsDrawerOpen(!isDrawerOpen)} + isDrawerOpen={isDrawerOpen} + setIsDrawerOpen={setIsDrawerOpen} + // eslint-disable-next-line no-console + onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)} + conversations={conversations} + onNewChat={() => { + setIsDrawerOpen(!isDrawerOpen); + }} + handleTextInputChange={(value: string) => { + if (value === '') { + setConversations(initialConversations); + } else { + const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value); + setConversations(newConversations); + } + }} + drawerContent={
Drawer content
} + hasDrawerHeadDivider={hasDrawerHeadDivider} + isLoading={isLoading} + searchActionStart={ + showSearchActionStart ? ( + +