(feat:glassy) search widget

extensions/react-widget/src/components/SearchBar.tsx

@@ -17,6 +17,7 @@ import {
 } from '@radix-ui/react-icons';
 const themes = {
     dark: {
+        name: 'dark',
         bg: '#202124',
         text: '#EDEDED',
         primary: {
@@ -29,6 +30,7 @@ const themes = {
         }
     },
     light: {
+        name: 'light',
         bg: '#EAEAEA',
         text: '#171717',
         primary: {
@@ -81,12 +83,27 @@ const Container = styled.div`
     position: relative;
     display: inline-block;
 `
+const SearchOverlay = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #0000001A;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 99;
+`;
+
+
 const SearchResults = styled.div`
     position: fixed;
     display: flex;
     flex-direction: column;
-    background-color: ${props => props.theme.primary.bg};
-    border: 1px solid ${props => props.theme.bg};
+    background-color: ${props => props.theme.name === 'dark' ? 
+        'rgba(0, 0, 0, 0.15)' : 
+        'rgba(255, 255, 255, 0.4)'};
+    border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: 15px;
     padding: 8px 0px 8px 0px;
     width: 792px;
@@ -97,8 +114,12 @@ const SearchResults = styled.div`
     top: 50%;
     transform: translate(-50%, -50%);
     color: ${props => props.theme.primary.text};
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(16px);
+    
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-radius: 10px;
+    
     box-sizing: border-box;
 
     @media only screen and (max-width: 768px) {
@@ -142,6 +163,33 @@ const ContentWrapper = styled.div`
     flex-direction: column;
     gap: 12px; 
 `;
+
+
+
+const ResultWrapper = styled.div`
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px 16px;
+    cursor: pointer;
+    background-color: transparent;
+    font-family: 'Geist', sans-serif;
+    border-radius: 8px;
+
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+    }
+`;
+
 const Content = styled.div`
     display: flex;
     margin-left: 8px;
@@ -151,9 +199,10 @@ const Content = styled.div`
     font-size: 15px;
     color: ${props => props.theme.primary.text};
     line-height: 1.6;
-    border-left: 2px solid #585858;
+    border-left: 2px solid ${props => props.theme.primary.text}CC;
     overflow: hidden;
-`
+    
+`;
 const ContentSegment = styled.div`
     display: flex;
     align-items: flex-start;
@@ -165,29 +214,6 @@ const ContentSegment = styled.div`
     text-overflow: ellipsis;
 `
 
-const ResultWrapper = styled.div`
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 8px 16px;
-    cursor: pointer;
-    background-color: ${props => props.theme.primary.bg};
-    font-family: 'Geist', sans-serif;
-    transition: background-color 0.2s;
-    border-radius: 8px;
-
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    word-break: break-word;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-        background-color: ${props => props.theme.bg};
-    }
-`
 const Markdown = styled.div`
 line-height:18px;
 font-size: 11px;
@@ -280,7 +306,8 @@ const NoResults = styled.div`
   margin-top: 2rem;
   text-align: center;
   font-size: 14px;
-  color: #888;
+  color: ${props => props.theme.name === 'dark' ? '#E0E0E0' : '#505050'};
+  font-weight: 500;
 `;
 const AskAIButton = styled.button`
     display: flex;
@@ -293,25 +320,39 @@ const AskAIButton = styled.button`
     height: 50px;
     padding: 8px 24px;
     border: none;
-    border-radius: 6px;
-    background-color: ${props => props.theme.bg};
+    border-radius: 8px;
     color: ${props => props.theme.text}; 
     cursor: pointer;
-    transition: background-color 0.2s, box-shadow 0.2s;
     font-size: 16px;
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    border: 1px solid ${props => props.theme.name === 'dark' ? 
+        'rgba(255, 255, 255, 0.2)' : 
+        'rgba(0, 0, 0, 0.1)'};
+    background-color: ${props => props.theme.name === 'dark' ? 
+        'rgba(255, 255, 255, 0.05)' : 
+        'rgba(0, 0, 0, 0.03)'}; // Very subtle background for light theme
 
     &:hover {
-        opacity: 0.8;
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        background-color: ${props => props.theme.name === 'dark' ? 
+            'rgba(255, 255, 255, 0.1)' : 
+            'rgba(0, 0, 0, 0.06)'}; // Subtle hover effect for light theme
     }
-`
+`;
+
 const SearchHeader = styled.div`
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 12px;
     padding-bottom: 12px;
-    border-bottom: 1px solid ${props => props.theme.bg};
-`
+    border-bottom: 1px solid ${props => props.theme.name === 'dark' ? '#FFFFFF24' : 'rgba(0, 0, 0, 0.14)'};
+`;
+
+
 
 const TextField = styled.input`
     width: calc(100% - 32px);
@@ -327,8 +368,15 @@ const TextField = styled.input`
     &:focus {
         border-color: none;
     }
+
+    &::placeholder {
+        color: #8F8F8F !important;
+        opacity: 100%; /* Force opacity to ensure placeholder is visible */
+    }
 `
 
+
+
 const EscapeInstruction = styled.kbd`
     display: flex;
     align-items: center;
@@ -337,17 +385,21 @@ const EscapeInstruction = styled.kbd`
     padding: 4px 8px;
     border-radius: 4px;
     background-color: transparent;
-    border: 1px solid ${props => props.theme.secondary.text};
-    color: ${props => props.theme.text};
+    border: 1px solid ${props => props.theme.name === 'dark' ? 
+        'rgba(237, 237, 237, 0.6)' : 
+        'rgba(23, 23, 23, 0.6)'};
+    color: ${props => props.theme.name === 'dark' ? '#EDEDED' : '#171717'};
     font-size: 12px;
     font-family: 'Geist', sans-serif;
     white-space: nowrap;
     cursor: pointer;
     width: fit-content;
-    &:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-`
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+`;
+
+
 export const SearchBar = ({
     apiKey = "74039c6d-bff7-44ce-ae55-2973cbf13837",
     apiHost = "https://gptcloud.arc53.com",
@@ -462,6 +514,8 @@ export const SearchBar = ({
                     </SearchButton>
                     {
                         isResultVisible && (
+                            <>
+                            <SearchOverlay onClick={() => setIsResultVisible(false)} />
                             <SearchResults>
                                 <SearchHeader>
                                     <TextField
@@ -539,6 +593,7 @@ export const SearchBar = ({
                                     )}
                                 </SearchResultsScroll>
                             </SearchResults>
+                            </>
                         )
                     }
                     {