feat(orama): mobile ui

apps/site/components/Common/Searchbox/ChatInteractions/index.module.css

@@ -5,9 +5,11 @@
     mb-6
     flex
     h-full
+    w-[95%]
     flex-1
     flex-col
     items-start
+    self-center
     overflow-auto
     px-1;
 
@@ -39,7 +41,7 @@
 
 .scrollDownButton {
   @apply absolute
-    bottom-28
+    bottom-36
     left-1/2
     inline-flex
     -translate-x-1/2
@@ -49,10 +51,10 @@
     bg-neutral-200
     p-2
     text-neutral-900
-    duration-300
     focus:bg-neutral-300
     focus:outline-none
     motion-safe:transition-colors
+    lg:bottom-28
     dark:bg-neutral-900
     dark:text-neutral-200
     focus:dark:bg-neutral-800;

apps/site/components/Common/Searchbox/ChatSources/index.module.css

@@ -27,15 +27,15 @@
 .chatSourceLink {
   @apply w-3xs
     rounded-xl
-    bg-neutral-100
+    bg-white
     px-4
     py-2
     text-neutral-900
-    duration-300
     hover:bg-neutral-200
     focus:bg-neutral-200
     focus:outline-none
     motion-safe:transition-colors
+    lg:bg-neutral-100
     dark:bg-neutral-950
     dark:text-neutral-200
     hover:dark:bg-neutral-900

apps/site/components/Common/Searchbox/index.tsx

@@ -52,6 +52,7 @@ const Searchbox: FC = () => {
               t('components.search.suggestionThree'),
             ]}
             label={t('components.search.suggestions')}
+            onClick={() => setMode('chat')}
           />
         </SearchResults>
       </div>

apps/site/package.json

@@ -42,8 +42,8 @@
     "@opentelemetry/instrumentation": "~0.206.0",
     "@opentelemetry/resources": "~1.30.1",
     "@opentelemetry/sdk-logs": "~0.206.0",
-    "@orama/core": "^1.2.14",
-    "@orama/ui": "^1.5.3",
+    "@orama/core": "^1.2.15",
+    "@orama/ui": "^1.5.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/postcss": "~4.1.17",

packages/ui-components/package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@orama/ui": "^1.5.2",
+    "@orama/ui": "^1.5.4",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "~2.1.16",
@@ -53,7 +53,7 @@
     "tailwindcss": "catalog:"
   },
   "devDependencies": {
-    "@orama/core": "^1.2.14",
+    "@orama/core": "^1.2.15",
     "@storybook/addon-styling-webpack": "^3.0.0",
     "@storybook/addon-themes": "^10.1.4",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.2",

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

@@ -19,7 +19,6 @@
     rounded-full
     p-2
     text-neutral-800
-    duration-300
     hover:bg-neutral-300
     focus:bg-neutral-300
     focus:outline-none

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

@@ -33,7 +33,6 @@
     bg-green-600
     p-2
     text-white
-    duration-300
     focus:bg-green-600/75
     focus:outline-none
     disabled:cursor-not-allowed
@@ -58,3 +57,41 @@
     sm:text-sm
     dark:text-neutral-500;
 }
+
+.suggestionsWrapper {
+  @apply mb-4
+    flex
+    items-center
+    gap-2
+    overflow-x-auto
+    px-1
+    text-sm
+    lg:justify-center;
+
+  &::-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
+    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

@@ -39,7 +39,13 @@ const ChatInput: FC<PropsWithChildren<ChatInputProps>> = ({
 
   return (
     <>
-      {!interactions?.length && <SearchSuggestions suggestions={suggestions} />}
+      {!interactions?.length && (
+        <SearchSuggestions
+          suggestions={suggestions}
+          wrapper={styles.suggestionsWrapper}
+          className={styles.suggestionsItem}
+        />
+      )}
       <div className={styles.textareaContainer}>
         <PromptTextArea.Wrapper className={styles.textareaWrapper}>
           <PromptTextArea.Field

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

@@ -24,7 +24,6 @@
     bg-transparent
     p-3
     text-sm
-    duration-300
     hover:bg-neutral-300
     focus-visible:border-green-600
     focus-visible:outline-none

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

@@ -23,6 +23,8 @@
     bg-white
     p-1.5
     text-neutral-900
+    hover:bg-neutral-100
+    motion-safe:transition-colors
     dark:border-neutral-900
     dark:bg-neutral-950
     dark:text-neutral-200;
@@ -79,35 +81,39 @@
     items-start
     justify-center
     bg-white/70
-    pt-[5vh]
+    lg:pt-[5vh]
     dark:bg-zinc-950/70;
 }
 
 .modalInner {
   @apply fixed
-    top-auto
-    bottom-auto
+    top-0
+    bottom-0
     mx-auto
     my-0
     flex
-    h-auto
-    w-full
-    max-w-3xl
-    bg-neutral-100
-    dark:bg-neutral-950;
-
-  > section {
-    @apply w-full;
-  }
+    h-full
+    max-w-none
+    bg-white
+    lg:top-auto
+    lg:bottom-auto
+    lg:h-auto
+    lg:max-w-3xl
+    lg:bg-neutral-100
+    dark:bg-zinc-950
+    lg:dark:bg-neutral-950;
 }
 
 .modalContent {
   @apply flex
-    h-auto
-    max-h-[70vh]
+    h-full
+    w-screen
     flex-col
-    rounded-xl
-    border
     border-neutral-200
+    lg:h-auto
+    lg:max-h-[70vh]
+    lg:w-auto
+    lg:rounded-xl
+    lg:border
     dark:border-neutral-900;
 }

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

@@ -12,17 +12,16 @@
     py-2
     text-sm
     text-neutral-900
-    duration-300
     outline-none
     hover:bg-neutral-200
     focus:bg-neutral-200
     focus-visible:border-green-600
     focus-visible:bg-transparent
     motion-safe:transition-colors
-    dark:bg-neutral-950
+    dark:bg-zinc-950
     dark:text-neutral-200
-    hover:dark:bg-neutral-900
-    focus:dark:bg-neutral-900;
+    dark:hover:bg-neutral-900
+    lg:dark:bg-neutral-950;
 
   svg {
     @apply size-5;

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

@@ -20,7 +20,6 @@
     px-3
     py-1
     text-sm
-    duration-300
     focus:outline-none
     focus-visible:bg-neutral-300
     motion-safe:transition-colors

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

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