fixup!

Author: avivkeller

packages/ui-components/src/Common/Search/Chat/Input/index.module.css

@@ -58,42 +58,3 @@
     sm:text-sm
     dark:text-neutral-500;
 }
-
-.suggestionsWrapper {
-  @apply mb-4
-    flex
-    items-center
-    justify-center
-    gap-2
-    overflow-x-auto
-    px-1
-    text-sm;
-
-  &::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
-
-.suggestionsItem {
-  @apply flex
-    size-max
-    cursor-pointer
-    rounded-full
-    border
-    border-neutral-300
-    bg-neutral-200
-    px-3
-    py-1
-    whitespace-nowrap
-    text-neutral-900
-    duration-300
-    hover:bg-neutral-300
-    focus:bg-neutral-300
-    focus:outline-none
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:bg-neutral-950
-    dark:text-neutral-200
-    dark:hover:bg-neutral-900
-    dark:focus:bg-neutral-900;
-}

packages/ui-components/src/Common/Search/Chat/Input/index.tsx

@@ -1,11 +1,12 @@
 import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { PauseCircleIcon } from '@heroicons/react/24/solid';
-import { PromptTextArea, Suggestions } from '@orama/ui/components';
+import { PromptTextArea } from '@orama/ui/components';
 import { useChat } from '@orama/ui/hooks';
 import type { FC, PropsWithChildren } from 'react';
 import { useEffect, useRef } from 'react';
 
 import styles from './index.module.css';
+import SearchSuggestions from '../../Suggestions';
 
 type ChatInputProps = {
   suggestions: Array<string>;
@@ -36,15 +37,7 @@ const ChatInput: FC<PropsWithChildren<ChatInputProps>> = ({
 
   return (
     <>
-      {!!interactions?.length && (
-        <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-          {suggestions.map(suggestion => (
-            <Suggestions.Item className={styles.suggestionsItem}>
-              {suggestion}
-            </Suggestions.Item>
-          ))}
-        </Suggestions.Wrapper>
-      )}
+      {!interactions?.length && <SearchSuggestions suggestions={suggestions} />}
       <div className={styles.textareaContainer}>
         <PromptTextArea.Wrapper className={styles.textareaWrapper}>
           <PromptTextArea.Field

packages/ui-components/src/Common/Search/Results/Empty/index.module.css

@@ -1,51 +1,5 @@
 @reference "../../../../styles/index.css";
 
-.suggestionsWrapper {
-  @apply flex
-    min-h-0
-    flex-1
-    flex-col
-    overflow-y-auto
-    pb-4
-    text-neutral-900
-    dark:text-neutral-200;
-}
-
-.suggestionsList {
-  @apply mt-1
-    space-y-1;
-}
-
-.suggestionsTitle {
-  @apply my-3
-    text-xs
-    font-semibold
-    text-neutral-800
-    uppercase
-    dark:text-neutral-500;
-}
-
-.suggestionItem {
-  @apply flex
-    cursor-pointer
-    items-center
-    gap-2
-    rounded-lg
-    border
-    border-transparent
-    py-2
-    text-sm
-    text-green-600
-    focus-visible:border-green-600
-    focus-visible:outline-none
-    dark:text-green-400
-    dark:focus-visible:border-green-400;
-
-  svg {
-    @apply size-5;
-  }
-}
-
 .noResultsWrapper {
   @apply flex
     h-full

packages/ui-components/src/Common/Search/Suggestions/index.tsx

@@ -6,7 +6,7 @@ import styles from './index.module.css';
 
 type SearchSuggestionsProps = {
   suggestions: Array<string>;
-  label: string;
+  label?: string;
 } & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
 
 const SearchSuggestions: FC<SearchSuggestionsProps> = ({
@@ -15,9 +15,9 @@ const SearchSuggestions: FC<SearchSuggestionsProps> = ({
   ...props
 }) => (
   <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-    <p className={styles.suggestionsTitle}>{label}</p>
-    {suggestions.map(suggestion => (
-      <Suggestions.Item {...props} className={styles.suggestionItem}>
+    {label && <p className={styles.suggestionsTitle}>{label}</p>}
+    {suggestions.map((suggestion, i) => (
+      <Suggestions.Item {...props} key={i} className={styles.suggestionItem}>
         <SparklesIcon />
         {suggestion}
       </Suggestions.Item>