fixes css

Author: aileenvl

apps/site/.env

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_ORAMA_PROJECT_ID=939d8d74-dbb7-4098-ac46-00325a783e17
+NEXT_PUBLIC_ORAMA_API_KEY=p_LQfqxMtf0j8RIpkgohqP0PGZxN7ooPR4XKnqB8ZhojD
+NEXT_PUBLIC_ORAMA_DATASOURCE_ID=59bbae6c-07f9-49f7-a062-3de1c7b6e2b6
+NEXT_PUBLIC_ORAMA_PUBLIC_PROJECT_ID=939d8d74-dbb7-4098-ac46-00325a783e17
+NEXT_PUBLIC_ORAMA_PUBLIC_API_KEY=c1_dRV3iUW4GpJkKffpYXgCEamhWLf$_X9gfYdiVhZkVD4MCr105K0qb$BiGdg

apps/site/components/Common/Searchbox/Chat/ChatInput/index.module.css

@@ -1,9 +1,37 @@
+.container {
+  @apply pb-2;
+  @apply pt-6;
+}
+
 .promptWrapperCustom {
   @apply relative;
+  @apply mx-8;
+  @apply flex;
+  @apply items-center;
+  @apply gap-2;
+  @apply rounded-2xl;
+  @apply border;
+  @apply border-[rgb(64,64,64)];
+  @apply bg-[rgb(38,38,38)];
+  @apply px-4;
+  @apply py-3;
+  @apply text-base;
+  @apply text-white;
 }
 
 .promptFieldCustom {
   font-family: inherit !important;
+
+  @apply m-0;
+  @apply w-full;
+  @apply resize-none;
+  @apply border-none;
+  @apply bg-transparent;
+  @apply p-0;
+  @apply font-normal;
+  @apply leading-relaxed;
+  @apply text-white;
+  @apply outline-none;
 }
 
 .promptButtonCustom {
@@ -24,19 +52,25 @@
   @apply justify-center;
   @apply min-h-8;
   @apply min-w-8;
-}
 
-.promptButtonCustom:hover:not(:disabled) {
-  @apply bg-green-600;
-}
+  &:hover:not(:disabled) {
+    @apply bg-green-600;
+  }
 
-.promptButtonCustom:disabled {
-  @apply bg-gray-200;
-  @apply text-gray-500;
-  @apply cursor-not-allowed;
-  @apply opacity-60;
+  &:disabled {
+    @apply bg-gray-200;
+    @apply text-gray-500;
+    @apply cursor-not-allowed;
+    @apply opacity-60;
+  }
 }
 
 .slidingPanelFooter {
   @apply flex;
+  @apply flex-row;
+  @apply items-center;
+  @apply justify-center;
+  @apply pt-1;
+  @apply text-xs;
+  @apply text-neutral-400;
 }

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

@@ -12,16 +12,14 @@ export const ChatInput: FC = () => {
   const t = useTranslations();
 
   return (
-    <div className="pb-2 pt-6">
-      <PromptTextArea.Wrapper
-        className={`${styles.promptWrapperCustom} mx-8 flex items-center gap-2 rounded-2xl border border-[rgb(64,64,64)] bg-[rgb(38,38,38)] px-4 py-3 text-base text-white`}
-      >
+    <div className={styles.container}>
+      <PromptTextArea.Wrapper className={styles.promptWrapperCustom}>
         <PromptTextArea.Field
           placeholder={t('components.search.chatPlaceholder')}
           rows={1}
           maxLength={500}
           autoFocus
-          className={`${styles.promptFieldCustom} m-0 w-full resize-none border-none bg-transparent p-0 font-normal leading-relaxed text-white outline-none`}
+          className={styles.promptFieldCustom}
         />
         <PromptTextArea.Button
           abortContent={<PauseCircleIcon />}
@@ -30,9 +28,7 @@ export const ChatInput: FC = () => {
           <PaperAirplaneIcon className="h-4 w-4" />
         </PromptTextArea.Button>
       </PromptTextArea.Wrapper>
-      <div
-        className={`${styles.slidingPanelFooter} flex flex-row items-center justify-center pt-1 text-xs text-neutral-400`}
-      >
+      <div className={styles.slidingPanelFooter}>
         <small>{t('components.search.disclaimer')}</small>
       </div>
     </div>

apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css

@@ -31,18 +31,18 @@
   @apply opacity-80;
 
   animation: typing 1.4s infinite ease-in-out;
-}
 
-.typingDot:nth-child(1) {
-  animation-delay: 0s;
-}
+  &:nth-child(1) {
+    animation-delay: 0s;
+  }
 
-.typingDot:nth-child(2) {
-  animation-delay: 0.2s;
-}
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
 
-.typingDot:nth-child(3) {
-  animation-delay: 0.4s;
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
 }
 
 @keyframes typing {
@@ -60,9 +60,9 @@
 }
 
 .chatAssistantMessageMain {
-  @apply mb-4,
-    text-base,
-    text-neutral-900,
+  @apply mb-4
+    text-base
+    text-neutral-900
     dark:text-neutral-200;
 }
 
@@ -71,12 +71,12 @@
 }
 
 .chatAssistantMessage {
-  @apply my-4,
-    mb-6,
-    max-w-full,
-    rounded-xl,
-    px-6,
-    py-4,
+  @apply my-4
+    mb-6
+    max-w-full
+    rounded-xl
+    px-6
+    py-4
     text-base;
 
   background: transparent;
@@ -86,73 +86,65 @@
 
   margin: 0;
   padding: 0;
-}
 
-.chatAssistantMessage p {
-  @apply font-sm-line-height,
-    mb-3,
-    text-white;
-}
+  p {
+    @apply font-sm-line-height
+      mb-3
+      text-white;
+  }
 
-.chatAssistantMessage pre {
-  @apply my-4,
-    rounded-md,
-    bg-black/20,
-    p-4,
-    text-xs,
-    text-white;
+  pre {
+    @apply my-4
+      rounded-md
+      bg-black/20
+      p-4
+      text-xs
+      text-white;
+
+    code {
+      @apply rounded-lg
+        p-3
+        text-sm;
+    }
+  }
 
   code {
-    @apply rounded-lg,
-      p-3,
-      text-sm;
+    @apply rounded
+      bg-black/30
+      p-1
+      text-white;
   }
-}
 
-.chatAssistantMessage code {
-  @apply rounded,
-    bg-black/30,
-    p-1,
-    text-white;
-}
-
-.chatAssistantMessage ul {
-  @apply list-disc,
-    pl-6;
-}
+  ul {
+    @apply list-disc
+      pl-6;
+  }
 
-.chatAssistantMessage ol {
-  @apply list-decimal,
-    pl-6;
-}
+  ol {
+    @apply list-decimal
+      pl-6;
+  }
 
-.chatAssistantMessage li {
-  @apply mb-1;
-}
+  li {
+    @apply mb-1;
+  }
 
-.chatAssistantMessage h1,
-.chatAssistantMessage h2,
-.chatAssistantMessage h3 {
-  @apply mb-2,
-    text-lg,
-    font-bold;
+  h1,
+  h2,
+  h3 {
+    @apply mb-2
+      text-lg
+      font-bold;
+  }
 }
 
 .markdownPre {
   border-radius: 0.5rem !important;
   padding: 0.1875rem 0.3125rem !important;
 }
 
-:global(pre[class*='prism']) {
-  border-radius: 0.5rem !important;
-  padding: 0.1875rem 0.3125rem !important;
-}
-
-:global(.chatAssistantMessage pre) {
-  border-radius: 0.5rem !important;
-  padding: 0.1875rem 0.3125rem !important;
-}
-
+:global(pre[class*='prism']),
+:global(.chatAssistantMessage pre),
 :global(pre[style*='background-color']) {
   border-radius: 0.5rem !important;
   padding: 0.1875rem 0.3125rem !important;