set empty state

apps/web/src/components/features/input/BusterChatInput/BusterChatInput.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MentionInputSuggestions } from '@/components/ui/inputs/MentionInputSuggestions';
+
+export const BusterChatInput = () => {
+  return <div>BusterChatInput</div>;
+};

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestions.tsx

@@ -45,8 +45,9 @@ export const MentionInputSuggestions = ({
 }: MentionInputSuggestionsProps) => {
   const [hasClickedSelect, setHasClickedSelect] = useState(false);
   const [value, setValue] = useState(valueProp ?? defaultValue);
-  const commandListNavigatedRef = useRef(false);
+  const [hasResults, setHasResults] = useState(false);
 
+  const commandListNavigatedRef = useRef(false);
   const commandRef = useRef<HTMLDivElement>(null);
   const mentionsInputRef = useRef<MentionInputRef>(null);
 
@@ -83,6 +84,7 @@ export const MentionInputSuggestions = ({
       onClick?.();
       if (closeSuggestionOnSelect) setHasClickedSelect(true);
       onSuggestionItemClick?.(params);
+      setHasResults(false);
     }
   );
 
@@ -135,6 +137,8 @@ export const MentionInputSuggestions = ({
       value={value}
       label={ariaLabel}
       className={cn('relative border rounded overflow-hidden bg-background shadow', className)}
+      shouldFilter={shouldFilter}
+      filter={filter}
     >
       <MentionInputSuggestionsContainer className={inputContainerClassName}>
         <MentionInputSuggestionsMentionsInput
@@ -146,27 +150,30 @@ export const MentionInputSuggestions = ({
           mentions={mentions}
           value={value}
           onChange={onChangeInputValue}
-          shouldFilter={shouldFilter}
-          filter={filter}
           onMentionItemClick={onMentionItemClick}
           onPressEnter={onPressEnter || onSubmit}
           commandListNavigatedRef={commandListNavigatedRef}
         />
         {children}
       </MentionInputSuggestionsContainer>
+      {hasResults && <div className="border-b mb-1.5" />}
       <MentionInputSuggestionsList
         show={showSuggestionList}
-        className={suggestionsContainerClassName}
+        className={cn(suggestionsContainerClassName, hasResults && 'pb-1.5')}
       >
         <MentionInputSuggestionsItemsSelector
           suggestionItems={suggestionItems}
           onSelect={onSelectItem}
           addValueToInput={addSuggestionValueToInput}
           closeOnSelect={closeSuggestionOnSelect}
+          hasResults={hasResults}
+          setHasResults={setHasResults}
+        />
+
+        <MentionInputSuggestionsEmpty
+          setHasResults={setHasResults}
+          emptyComponent={emptyComponent}
         />
-        {emptyComponent && (
-          <MentionInputSuggestionsEmpty>{emptyComponent}</MentionInputSuggestionsEmpty>
-        )}
       </MentionInputSuggestionsList>
     </Command>
   );

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsEmpty.tsx

@@ -1,17 +1,35 @@
 import { Command } from 'cmdk';
 import type React from 'react';
+import { useMount } from '@/hooks/useMount';
 import { cn } from '@/lib/utils';
 
 export const MentionInputSuggestionsEmpty = ({
-  children,
+  emptyComponent,
-  ...props
+  setHasResults,
-}: React.ComponentPropsWithoutRef<typeof Command.Empty>) => {
+  className,
+}: {
+  setHasResults: (hasResults: boolean) => void;
+  className?: string;
+  emptyComponent: React.ReactNode;
+}) => {
   return (
     <Command.Empty
-      className={cn('text-gray-light py-6 text-center text-base', props.className)}
+      className={cn(
-      {...props}
+        'text-gray-light py-6 text-center text-base',
+        !emptyComponent && 'hidden',
+        className
+      )}
     >
-      {children}
+      {emptyComponent}
+      <SetHasResults setHasResults={setHasResults} />
     </Command.Empty>
   );
 };
+
+const SetHasResults = ({ setHasResults }: { setHasResults: (hasResults: boolean) => void }) => {
+  useMount(() => {
+    setHasResults(false);
+  });
+
+  return null;
+};

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx

@@ -1,13 +1,19 @@
 import { Command } from 'cmdk';
 import type React from 'react';
+import { useMount } from '@/hooks/useMount';
 import { cn } from '@/lib/utils';
-import type { MentionInputSuggestionsDropdownItem, MentionInputSuggestionsOnSelectParams } from './MentionInputSuggestions.types';
+import type {
+  MentionInputSuggestionsDropdownItem,
+  MentionInputSuggestionsOnSelectParams,
+} from './MentionInputSuggestions.types';
 
 export type MentionInputSuggestionsItemProps = {
   onSelect: (d: MentionInputSuggestionsOnSelectParams) => void;
 } & MentionInputSuggestionsDropdownItem & {
     className?: string;
     style?: React.CSSProperties;
+    hasResults: boolean;
+    setHasResults: (hasResults: boolean) => void;
   };
 
 export const MentionInputSuggestionsItem = ({
@@ -23,6 +29,8 @@ export const MentionInputSuggestionsItem = ({
   type,
   addValueToInput,
   onSelect,
+  hasResults,
+  setHasResults,
   ...props
 }: MentionInputSuggestionsItemProps) => {
   return (
@@ -47,6 +55,21 @@ export const MentionInputSuggestionsItem = ({
       }}
     >
       {label}
+      {!hasResults && <SetHasResults hasResults={hasResults} setHasResults={setHasResults} />}
     </Command.Item>
   );
 };
+
+const SetHasResults = ({
+  hasResults,
+  setHasResults,
+}: {
+  hasResults: boolean;
+  setHasResults: (hasResults: boolean) => void;
+}) => {
+  useMount(() => {
+    if (!hasResults) setHasResults(true);
+  });
+
+  return null;
+};

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItemSelector.tsx

@@ -1,7 +1,7 @@
 import type {
-  MentionInputSuggestionsProps,
-  MentionInputSuggestionsOnSelectParams,
   GroupOverrideProps,
+  MentionInputSuggestionsOnSelectParams,
+  MentionInputSuggestionsProps,
 } from './MentionInputSuggestions.types';
 import { MentionInputSuggestionsGroup } from './MentionInputSuggestionsGroup';
 import { MentionInputSuggestionsItem } from './MentionInputSuggestionsItem';
@@ -12,16 +12,19 @@ export const MentionInputSuggestionsItemSelector = ({
   onSelect,
   addValueToInput,
   closeOnSelect,
+  ...rest
 }: {
   item: MentionInputSuggestionsProps['suggestionItems'][number];
   onSelect: (params: MentionInputSuggestionsOnSelectParams) => void;
+  hasResults: boolean;
+  setHasResults: (hasResults: boolean) => void;
 } & GroupOverrideProps) => {
   if (item.type === 'separator') {
     return <MentionInputSuggestionsSeparator />;
   }
 
   if (item.type === 'group') {
-    return <MentionInputSuggestionsGroup {...item} onSelect={onSelect} />;
+    return <MentionInputSuggestionsGroup {...item} onSelect={onSelect} {...rest} />;
   }
 
   return (
@@ -30,28 +33,23 @@ export const MentionInputSuggestionsItemSelector = ({
       onSelect={onSelect}
       addValueToInput={item?.addValueToInput ?? addValueToInput}
       closeOnSelect={item?.closeOnSelect ?? closeOnSelect}
+      {...rest}
     />
   );
 };
 
 export const MentionInputSuggestionsItemsSelector = ({
   suggestionItems,
-  onSelect,
+  ...rest
-  addValueToInput,
-  closeOnSelect,
 }: {
   suggestionItems: MentionInputSuggestionsProps['suggestionItems'];
   onSelect: (params: MentionInputSuggestionsOnSelectParams) => void;
+  hasResults: boolean;
+  setHasResults: (hasResults: boolean) => void;
 } & GroupOverrideProps) => {
   if (!suggestionItems) return null;
   return suggestionItems.map((item, index) => (
-    <MentionInputSuggestionsItemSelector
+    <MentionInputSuggestionsItemSelector key={keySelector(item, index)} item={item} {...rest} />
-      key={keySelector(item, index)}
-      item={item}
-      onSelect={onSelect}
-      addValueToInput={addValueToInput}
-      closeOnSelect={closeOnSelect}
-    />
   ));
 };
 

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsList.tsx

@@ -16,8 +16,9 @@ export const MentionInputSuggestionsList = ({
   show = true,
 }: MentionInputSuggestionsListProps) => {
   if (!show) return null;
+
   return (
-    <Command.List className={cn('border-t px-3 py-1.5', className)} style={style}>
+    <Command.List className={cn('px-3', className)} style={style}>
       {children}
     </Command.List>
   );

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx

@@ -6,13 +6,7 @@ import type { MentionInputSuggestionsProps } from './MentionInputSuggestions.typ
 
 export type MentionInputSuggestionsMentionsInputProps = Pick<
   MentionInputSuggestionsProps,
-  | 'mentions'
+  'mentions' | 'value' | 'placeholder' | 'defaultValue' | 'onMentionItemClick'
-  | 'value'
-  | 'placeholder'
-  | 'defaultValue'
-  | 'shouldFilter'
-  | 'filter'
-  | 'onMentionItemClick'
 > & {
   onChange: MentionInputProps['onChange'];
   onPressEnter: MentionInputProps['onPressEnter'];
@@ -26,10 +20,11 @@ export type MentionInputSuggestionsMentionsInputProps = Pick<
 export const MentionInputSuggestionsMentionsInput = forwardRef<
   MentionInputRef,
   MentionInputSuggestionsMentionsInputProps
->(({ value: valueProp, placeholder, defaultValue, mentions, value, ...props }, ref) => {
+>(({ mentions, ...props }, ref) => {
+  const { value } = props;
   return (
     <React.Fragment>
-      <MentionInput ref={ref} mentions={mentions} defaultValue={value} {...props} />
+      <MentionInput ref={ref} mentions={mentions} {...props} />
       <Command.Input
         value={value}
         autoFocus={false}

apps/web/src/components/ui/inputs/MentionInputSuggestions/index.ts

@@ -0,0 +1 @@
+export * from './MentionInputSuggestions';