feat(search-component): update class names to include 'trieve-mode-' prefix for better styling consistency

Author: skeptrunedev

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.4.58",
+  "version": "0.4.59",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/TrieveModal/Chat/ChatInput.tsx

@@ -86,7 +86,7 @@ export const ChatInput = ({
           <input
             ref={chatInput}
             value={currentQuestion}
-            className={`${props.inline ? "inline-input " : ""}${mode} tv-rounded-md tv-mb-0 tv-max-w-full`}
+            className={`${props.inline ? "inline-input " : ""}trieve-mode-${mode} tv-rounded-md tv-mb-0 tv-max-w-full`}
             onChange={(e) => setCurrentQuestion(e.target.value)}
             disabled={props.previewTopicId != undefined}
             placeholder={

clients/search-component/src/TrieveModal/ModeSwitch.tsx

@@ -10,7 +10,7 @@ export const ChatModeSwitch = () => {
   return (
     <div
       className={cn(
-        `mode-switch-wrapper tv-flex tv-items-center tv-px-2 tv-gap-2 tv-justify-end tv-mt-2 tv-font-medium ${mode}${
+        `mode-switch-wrapper tv-flex tv-items-center tv-px-2 tv-gap-2 tv-justify-end tv-mt-2 tv-font-medium trieve-mode-${mode}${
           query ? " has-query" : ""
         }${props.inline ? "" : " mode-switch-popup"}${" " + props.type}`.trim(),
       )}

clients/search-component/src/TrieveModal/Search/SearchInput.tsx

@@ -21,7 +21,7 @@ export const SearchInput = () => {
   } = useModalState();
 
   return (
-    <div className={`input-wrapper ${props.type} tv-pt-2 ${mode}`}>
+    <div className={`input-wrapper ${props.type} tv-pt-2 trieve-mode-${mode}`}>
       <div className="input-flex group-focus:tv-border has-[:focus]:tv-border has-[:focus]:tv-border-[var(--tv-prop-brand-color)] sm:tv-text-sm sm:tv-leading-6 tv-py-1.5 tv-px-4 tv-items-center tv-flex tv-justify-between tv-w-full tv-rounded-lg tv-border-[1px]">
         <input
           ref={inputRef}

clients/search-component/src/TrieveModal/index.css

@@ -37,6 +37,7 @@ body {
       padding: 0;
       font-size: inherit;
       display: inherit;
+      border: none;
 
       &.mic-button-container,
       &.image-button-container,
@@ -128,8 +129,8 @@ body {
         @apply tv-top-2.5 tv-z-30;
       }
 
-      &.docs.chat,
-      &.pdf.chat {
+      &.docs.trieve-mode-chat,
+      &.pdf.trieve-mode-chat {
         @apply tv-top-0;
       }
 
@@ -677,14 +678,14 @@ body {
         color: var(--tv-zinc-400);
       }
 
-      &.chat {
+      &.trieve-mode-chat {
         .back-icon {
           @apply tv-top-[0.825rem] tv-left-5 tv-absolute tv-z-20;
         }
       }
     }
 
-    input.chat {
+    input.trieve-mode-chat {
       @apply tv-block tv-w-full tv-rounded-lg tv-border-[1px] tv-py-1.5 tv-shadow-sm tv-ring-0 tv-outline-none sm:tv-text-sm sm:tv-leading-6 tv-pl-3 tv-pr-[5rem] tv-h-12 tv-z-10 tv-relative;
       color: var(--tv-zinc-900);
       background-color: var(--tv-zinc-50);
@@ -1090,9 +1091,9 @@ body {
           }
         }
 
-        &.docs.search,
-        &.pdf.search,
-        &.ecommerce.search {
+        &.docs.trieve-mode-search,
+        &.pdf.trieve-mode-search,
+        &.ecommerce.trieve-mode-search {
           background-color: var(--tv-zinc-900);
           color: var(--tv-zinc-50);
           outline: none;