input suggestsions classes

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

@@ -73,7 +73,7 @@ export const MentionInput = forwardRef<MentionInputRef, MentionInputProps>(
       editable: !disabled && !readOnly,
       editorProps: {
         attributes: {
-          class: cn('p-1', classes, className),
+          class: cn(classes, className),
         },
       },
       onUpdate: ({ editor }) => {

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

@@ -1,6 +1,7 @@
 import { Command } from 'cmdk';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
+import { cn } from '@/lib/utils';
 import type { MentionInputRef } from '../MentionInput';
 import type {
   MentionInputSuggestionsOnSelectParams,
@@ -22,14 +23,15 @@ export const MentionInputSuggestions = ({
   onPressEnter,
   disabled: disabledGlobal = false,
   onStop,
-  sendIcon,
-  secondaryActions,
-  variant = 'default',
   onChange,
   ariaLabel = 'Mention Input Suggestions',
   readOnly,
   autoFocus,
   children,
+  //container
+  className,
+  inputContainerClassName,
+  suggestionsContainerClassName,
   //suggestions
   suggestionItems,
   closeSuggestionOnSelect = true,
@@ -128,8 +130,13 @@ export const MentionInputSuggestions = ({
   }, [showSuggestionList]);
 
   return (
-    <Command ref={commandRef} value={value} label={ariaLabel} className="relative">
+    <Command
-      <MentionInputSuggestionsContainer>
+      ref={commandRef}
+      value={value}
+      label={ariaLabel}
+      className={cn('relative border rounded overflow-hidden bg-background shadow', className)}
+    >
+      <MentionInputSuggestionsContainer className={inputContainerClassName}>
         <MentionInputSuggestionsMentionsInput
           ref={mentionsInputRef}
           defaultValue={defaultValue}
@@ -147,7 +154,10 @@ export const MentionInputSuggestions = ({
         />
         {children}
       </MentionInputSuggestionsContainer>
-      <MentionInputSuggestionsList show={showSuggestionList}>
+      <MentionInputSuggestionsList
+        show={showSuggestionList}
+        className={suggestionsContainerClassName}
+      >
         <MentionInputSuggestionsItemsSelector
           suggestionItems={suggestionItems}
           onSelect={onSelectItem}

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

@@ -61,14 +61,11 @@ export type MentionInputSuggestionsProps<T = string> = {
   onSubmit: (value: string) => void;
   onPressEnter: MentionInputProps['onPressEnter'];
   onStop: () => void;
-  variant?: 'default';
   autoFocus?: boolean;
   placeholder?: string;
   ariaLabel?: string;
   emptyComponent?: React.ReactNode | string | false; //if false, no empty component will be shown
   children?: React.ReactNode;
-  sendIcon?: React.ReactNode;
-  secondaryActions?: React.ReactNode;
   //mentions
   onMentionItemClick?: (params: MentionTriggerItem<T>) => void;
   mentions: MentionSuggestionExtension[];
@@ -81,13 +78,13 @@ export type MentionInputSuggestionsProps<T = string> = {
   onSuggestionItemClick?: (params: Omit<MentionInputSuggestionsOnSelectParams, 'onClick'>) => void;
   addSuggestionValueToInput?: boolean; //defaults to true
   closeSuggestionOnSelect?: boolean; //defaults to true
+  className?: string;
+  inputContainerClassName?: string;
+  suggestionsContainerClassName?: string;
 } & Pick<React.ComponentProps<typeof Command>, 'filter' | 'shouldFilter'>;
 
 export type MentionInputSuggestionsContainerProps = {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-} & Pick<
+} & Pick<MentionInputSuggestionsProps, 'submitting' | 'disabled' | 'onStop' | 'onSubmit'>;
-  MentionInputSuggestionsProps,
-  'sendIcon' | 'secondaryActions' | 'submitting' | 'disabled' | 'onStop' | 'onSubmit' | 'variant'
->;

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

@@ -11,7 +11,7 @@ export const MentionInputSuggestionsContainer: React.FC<
   return (
     <div
       data-testid="mention-input-suggestions-container"
-      className={cn('flex flex-col border rounded overflow-hidden', className)}
+      className={cn('flex flex-col overflow-hidden px-5 py-3', className)}
       style={style}
     >
       {children}

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

@@ -1,5 +1,6 @@
 import { Command } from 'cmdk';
 import type React from 'react';
+import { cn } from '@/lib/utils';
 
 interface MentionInputSuggestionsListProps {
   className?: string;
@@ -16,7 +17,7 @@ export const MentionInputSuggestionsList = ({
 }: MentionInputSuggestionsListProps) => {
   if (!show) return null;
   return (
-    <Command.List className={className} style={style}>
+    <Command.List className={cn('border-t px-3 py-1.5', className)} style={style}>
       {children}
     </Command.List>
   );