fix bg on web search messages

HumeAI · May 14, 2024 · 29b1047 · 29b1047
1 parent cfea7d1
commit 29b1047
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/components/SearchInProgress/_.stories.tsx b/src/components/SearchInProgress/_.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
+import { OnAir } from '@/components/OnAir';
 import type { SearchInProgressProps } from '.';
 import { SearchInProgress } from '.';
 
@@ -13,6 +14,7 @@ export default {
 const Template: StoryFn<SearchInProgressProps> = (args) => {
   return (
     <div className="h-svh w-screen bg-black p-8">
+      <OnAir />
       <SearchInProgress {...args} />
     </div>
   );

diff --git a/src/components/SearchInProgress/index.tsx b/src/components/SearchInProgress/index.tsx
@@ -27,21 +27,21 @@ export const SearchInProgress: FC<SearchInProgressProps> = ({ message }) => {
   return (
     <AnimatePresence>
       <motion.div
-        className="my-4 ml-auto flex w-fit items-center justify-center gap-2 bg-black text-neutral-200"
+        className="z-10 my-4 ml-auto flex w-fit items-center justify-center gap-2 rounded-3xl bg-black p-4 text-neutral-200"
         data-tool-call-id={toolCallId}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
+        initial={{ opacity: 0, x: 0 }}
+        animate={{ opacity: 1, x: 10 }}
         exit={{ opacity: 0 }}
         transition={{ duration: 0.1 }}
       >
         <Search size={20} />
         {query ? (
-          <span>
+          <div className="bg-black">
             <span>Searching the web for </span>
             <span className="font-mono text-neutral-400">
               &ldquo;{query}&rdquo;
             </span>
-          </span>
+          </div>
         ) : (
           <span>Searching the web ...</span>
         )}

diff --git a/src/components/SearchSucceeded/index.tsx b/src/components/SearchSucceeded/index.tsx
@@ -12,10 +12,10 @@ export const SearchSucceeded: FC<SearchSucceededProps> = ({ message }) => {
   return (
     <AnimatePresence>
       <motion.div
-        className="-mt-2 mb-4 ml-auto flex w-fit items-center justify-center gap-2 bg-black text-neutral-200"
+        className="z-10 -mt-2 mb-4 ml-auto flex w-fit items-center justify-center gap-2 rounded-3xl bg-black p-4 text-neutral-200"
         data-tool-call-id={toolCallId}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
+        initial={{ opacity: 0, x: 0 }}
+        animate={{ opacity: 1, x: 10 }}
         exit={{ opacity: 0 }}
         transition={{ duration: 0.1 }}
       >