@patternfly/chatbot 1.0.0

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerNavigation.tsx

@@ -0,0 +1,67 @@
+import { useState, FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+
+const initialConversations: Conversation[] = [
+  { id: '1', text: 'Red Hat products and services', noIcon: true },
+  {
+    id: '2',
+    text: 'Enterprise Linux installation and setup',
+    noIcon: true
+  },
+  { id: '3', text: 'Troubleshoot system crash', noIcon: true },
+  { id: '4', text: 'Ansible security and updates', noIcon: true },
+  { id: '5', text: 'Red Hat certification', noIcon: true },
+  { id: '6', text: 'Lightspeed user documentation', noIcon: true },
+  { id: '7', text: 'Crashing pod assistance', noIcon: true },
+  { id: '8', text: 'OpenShift AI pipelines', noIcon: true },
+  { id: '9', text: 'Updating subscription plan', noIcon: true },
+  { id: '10', text: 'Red Hat licensing options', noIcon: true },
+  { id: '11', text: 'RHEL system performance', noIcon: true },
+  { id: '12', text: 'Manage user accounts', noIcon: true }
+];
+
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => {
+          setIsOpen(!isOpen);
+          setConversations(initialConversations);
+        }}
+        id="navigation-drawer-visible"
+        name="navigation-drawer-visible"
+      />
+      <Checkbox
+        label="Reverse action buttons"
+        isChecked={isButtonOrderReversed}
+        onChange={() => setIsButtonOrderReversed(!isButtonOrderReversed)}
+        id="navigation-drawer-actions-visible"
+        name="navigation-drawer-actions-visible"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        reverseButtonOrder={isButtonOrderReversed}
+        drawerContent={<div>Drawer content</div>}
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx

@@ -0,0 +1,105 @@
+import { useState, FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+import { SearchIcon } 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' }
+  ]
+};
+
+const NO_RESULTS = {
+  bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
+  titleText: 'No results found',
+  icon: SearchIcon
+};
+
+export const ChatbotHeaderDrawerResizableDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const [showNoResults, setShowNoResults] = useState(false);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  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;
+    }, {});
+
+    // append message if no items are found
+    if (Object.keys(filteredConversations).length === 0) {
+      setShowNoResults(true);
+    } else {
+      setShowNoResults(false);
+    }
+    return filteredConversations;
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => {
+          setIsOpen(!isOpen);
+          setConversations(initialConversations);
+        }}
+        id="drawer-visible"
+        name="drawer-visible"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        onNewChat={() => {
+          setIsOpen(!isOpen);
+        }}
+        handleTextInputChange={(value: string) => {
+          if (value === '') {
+            setConversations(initialConversations);
+          }
+          // this is where you would perform search on the items in the drawer
+          // and update the state
+          const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+          setConversations(newConversations);
+        }}
+        drawerContent={<div>Drawer content</div>}
+        drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
+        emptyState={showNoResults ? NO_RESULTS : undefined}
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithActions.tsx

@@ -0,0 +1,84 @@
+import { FunctionComponent, useState } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
+
+const generateMenuItems = (id: string) => [
+  <DropdownList key={`header-drawer-with-actions-example-conversation-${id}-dropdown`}>
+    <DropdownItem value="Download" id="Download">
+      Download
+    </DropdownItem>
+    <DropdownItem value="Rename" id="Rename">
+      Rename
+    </DropdownItem>
+    <DropdownItem value="Archive" id="Archive">
+      Archive
+    </DropdownItem>
+    <DropdownItem value="Delete" id="Delete">
+      Delete
+    </DropdownItem>
+  </DropdownList>
+];
+
+const conversations: { [key: string]: Conversation[] } = {
+  Today: [{ id: '1', text: 'Red Hat products and services', menuItems: generateMenuItems('1') }],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup',
+      menuItems: generateMenuItems('2')
+    },
+    { id: '3', text: 'Troubleshoot system crash', menuItems: generateMenuItems('3') }
+  ],
+  March: [
+    { id: '4', text: 'Ansible security and updates', menuItems: generateMenuItems('4') },
+    { id: '5', text: 'Red Hat certification', menuItems: generateMenuItems('5') },
+    { id: '6', text: 'Lightspeed user documentation', menuItems: generateMenuItems('6') }
+  ],
+  February: [
+    { id: '7', text: 'Crashing pod assistance', menuItems: generateMenuItems('7') },
+    { id: '8', text: 'OpenShift AI pipelines', menuItems: generateMenuItems('8') },
+    { id: '9', text: 'Updating subscription plan', menuItems: generateMenuItems('9') },
+    { id: '10', text: 'Red Hat licensing options', menuItems: generateMenuItems('10') }
+  ],
+  January: [
+    { id: '11', text: 'RHEL system performance', menuItems: generateMenuItems('11') },
+    { id: '12', text: 'Manage user accounts', menuItems: generateMenuItems('12') }
+  ]
+};
+
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isCompact, setIsCompact] = useState(false);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="drawer-actions-visible"
+        name="drawer-actions-visible"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-actions-compact"
+        name="drawer-actions-compact"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        conversations={conversations}
+        drawerContent={<div>Drawer content</div>}
+        isCompact={isCompact}
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx

@@ -0,0 +1,206 @@
+// Assisted by: Cursor
+import React, { FunctionComponent, useState } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { ThumbtackIcon } from '@patternfly/react-icons';
+
+// Sample conversations
+const initialConversations: { [key: string]: Conversation[] } = {
+  Today: [
+    {
+      id: '1',
+      text: 'Red Hat products and services',
+      label: 'Conversation options for "Red Hat products and services"'
+    }
+  ],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup',
+      label: 'Conversation options for "Enterprise Linux installation and setup"'
+    },
+    {
+      id: '3',
+      text: 'Troubleshoot system crash',
+      label: 'Conversation options for "Troubleshoot system crash"'
+    }
+  ],
+  March: [
+    {
+      id: '4',
+      text: 'Ansible security and updates',
+      label: 'Conversation options for "Ansible security and updates"'
+    },
+    {
+      id: '5',
+      text: 'Red Hat certification',
+      label: 'Conversation options for "Red Hat certification"'
+    },
+    {
+      id: '6',
+      text: 'Lightspeed user documentation',
+      label: 'Conversation options for "Lightspeed user documentation"'
+    }
+  ],
+  February: [
+    {
+      id: '7',
+      text: 'Crashing pod assistance',
+      label: 'Conversation options for "Crashing pod assistance"'
+    },
+    {
+      id: '8',
+      text: 'OpenShift AI pipelines',
+      label: 'Conversation options for "OpenShift AI pipelines"'
+    },
+    {
+      id: '9',
+      text: 'Updating subscription plan',
+      label: 'Conversation options for "Updating subscription plan"'
+    },
+    {
+      id: '10',
+      text: 'Red Hat licensing options',
+      label: 'Conversation options for "Red Hat licensing options"'
+    }
+  ],
+  January: [
+    {
+      id: '11',
+      text: 'RHEL system performance',
+      label: 'Conversation options for "RHEL system performance"'
+    },
+    {
+      id: '12',
+      text: 'Manage user accounts',
+      label: 'Conversation options for "Manage user accounts"'
+    }
+  ]
+};
+
+export const ChatbotHeaderPinDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isCompact, setIsCompact] = useState(false);
+  const [pinnedConversations, setPinnedConversations] = useState<Set<string>>(new Set());
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  const handlePinToggle = (conversationId: string) => {
+    setPinnedConversations((prev) => {
+      const newPinned = new Set(prev);
+      if (newPinned.has(conversationId)) {
+        newPinned.delete(conversationId);
+      } else {
+        newPinned.add(conversationId);
+      }
+      return newPinned;
+    });
+
+    // Focus the conversation input after pin/unpin action
+    setTimeout(() => {
+      const dropdown = document.getElementById(`pin-demo-${conversationId}-dropdown`);
+      if (dropdown) {
+        dropdown.focus();
+      }
+    }, 100);
+  };
+
+  const createMenuItems = (conversationId: string) => {
+    const isPinned = pinnedConversations.has(conversationId);
+
+    return [
+      <DropdownList key={`${conversationId}-menu`} aria-label="Conversation options">
+        <DropdownItem
+          value={isPinned ? 'Unpin' : 'Pin'}
+          id={isPinned ? 'Unpin' : 'Pin'}
+          onClick={() => handlePinToggle(conversationId)}
+        >
+          {isPinned ? 'Unpin' : 'Pin'}
+        </DropdownItem>
+        <DropdownItem value="Delete" id="Delete">
+          Delete
+        </DropdownItem>
+        <DropdownItem value="Rename" id="Rename">
+          Rename
+        </DropdownItem>
+        <DropdownItem value="Archive" id="Archive">
+          Archive
+        </DropdownItem>
+      </DropdownList>
+    ];
+  };
+
+  // Reorganize conversations to show pinned ones at the top
+  const organizeConversations = () => {
+    const organized: { [key: string]: Conversation[] } = {};
+    const pinnedItems: Conversation[] = [];
+
+    // Collect all pinned conversations first
+    Object.entries(initialConversations).forEach(([_period, conversations]) => {
+      conversations.forEach((conv) => {
+        if (pinnedConversations.has(conv.id)) {
+          pinnedItems.push({
+            ...conv,
+            menuItems: createMenuItems(conv.id),
+            icon: <ThumbtackIcon />,
+            dropdownId: `pin-demo-${conv.id}-dropdown`
+          });
+        }
+      });
+    });
+
+    // Add pinned section if there are pinned items
+    if (pinnedItems.length > 0) {
+      organized.Pinned = pinnedItems;
+    }
+
+    // Add unpinned conversations
+    Object.entries(initialConversations).forEach(([period, conversations]) => {
+      const unpinnedConversations = conversations
+        .filter((conv) => !pinnedConversations.has(conv.id))
+        .map((conv) => ({
+          ...conv,
+          menuItems: createMenuItems(conv.id),
+          dropdownId: `pin-demo-${conv.id}-dropdown`
+        }));
+
+      if (unpinnedConversations.length > 0) {
+        organized[period] = unpinnedConversations;
+      }
+    });
+
+    return organized;
+  };
+
+  const conversations = organizeConversations();
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="drawer-pin-visible"
+        name="drawer-pin-visible"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-pin-compact"
+        name="drawer-pin-compact"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        conversations={conversations}
+        drawerContent={<div>Drawer content</div>}
+        isCompact={isCompact}
+      />
+    </>
+  );
+};

package/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<string>('newest');
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
+    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<Element, 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 (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="search-actions-drawer-visible"
+        name="drawer-visible"
+      />
+      <Checkbox
+        label="Show drawer head divider"
+        isChecked={hasDrawerHeadDivider}
+        onChange={() => setHasDrawerHeadDivider(!hasDrawerHeadDivider)}
+        id="search-actions-drawer-head-divider"
+        name="drawer-head-divider"
+      />
+      <Checkbox
+        label="Show search action start"
+        isChecked={showSearchActionStart}
+        onChange={() => setShowSearchActionStart(!showSearchActionStart)}
+        id="search-actions-show-search-action-start"
+        name="show-search-action-start"
+      />
+      <Checkbox
+        label="Show search action end"
+        isChecked={showSearchActionEnd}
+        onChange={() => setShowSearchActionEnd(!showSearchActionEnd)}
+        id="search-actions-show-search-action-end"
+        name="show-search-action-end"
+      />
+      <Checkbox
+        label="Show loading state"
+        isChecked={isLoading}
+        onChange={() => setIsLoading(!isLoading)}
+        id="search-actions-drawer-is-loading"
+        name="drawer-is-loading"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => 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={<div>Drawer content</div>}
+        hasDrawerHeadDivider={hasDrawerHeadDivider}
+        isLoading={isLoading}
+        searchActionStart={
+          showSearchActionStart ? (
+            <Tooltip content="Filter options" aria="none" aria-live="off">
+              <Button
+                variant="control"
+                aria-label="Filter options"
+                // eslint-disable-next-line no-console
+                onClick={() => console.log('Filter button clicked')}
+                icon={<FilterIcon />}
+              />
+            </Tooltip>
+          ) : undefined
+        }
+        searchActionEnd={
+          showSearchActionEnd ? (
+            <Select
+              id="sort-select"
+              isOpen={isSortSelectOpen}
+              selected={selectedSort}
+              onSelect={onSortSelect}
+              shouldFocusToggleOnSelect
+              onOpenChange={(isOpen) => setIsSortSelectOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <Tooltip aria="none" aria-live="off" content={`Sort - ${sortLabels[selectedSort]}`}>
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsSortSelectOpen(!isSortSelectOpen)}
+                    isExpanded={isSortSelectOpen}
+                    variant="plain"
+                    aria-label={`${sortLabels[selectedSort]}, Sort conversations`}
+                    icon={
+                      <SortAmountDownIcon
+                        style={{
+                          transform:
+                            selectedSort === 'oldest' || selectedSort === 'alphabetical-asc' ? 'scaleY(-1)' : 'none'
+                        }}
+                      />
+                    }
+                  />
+                </Tooltip>
+              )}
+            >
+              <SelectList>
+                {Object.keys(sortLabels).map((currentLabel) => (
+                  <SelectOption key={currentLabel} value={currentLabel}>
+                    {sortLabels[currentLabel]}
+                  </SelectOption>
+                ))}
+              </SelectList>
+            </Select>
+          ) : undefined
+        }
+      />
+    </>
+  );
+};