@stack-spot/ai-chat-widget 1.21.2 → 1.22.0-beta.0

package/src/views/Home/styled.ts

@@ -1,12 +1,10 @@
+import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
 export const HomeBox = styled.div`
   margin: auto 0;
 
   .title, .subtitle {
-    font-family: 'San Francisco';
-    font-size: 26px;
-    font-weight: 600;
     margin: 0;
   }
 
@@ -14,22 +12,34 @@ export const HomeBox = styled.div`
     display: inline-block;
     background: linear-gradient(72.81deg, #FF9900 0.96%, #FF6633 100%);
     background-clip: text;
-    margin-bottom: 10px;
     color: transparent;
   }
 
   .subtitle {
     color: #A0A0A0;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
   }
 
   .shortcuts {
     display: flex;
     flex-direction: row;
-    gap: 15px;
     li {
       flex: 1;
     }
+      button {
+        padding-left: 0;
+        border-radius: 50px;
+        padding-inline: 16px;
+        font-weight: 400;
+        i {
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+        }
+        &:hover, &:visited, &:active, &:focus {
+          background-color: ${theme.color.light[600]}
+        }
+    }
   }
 
   .avatar, .avatar svg {
@@ -53,6 +63,7 @@ export const HomeBox = styled.div`
         p {
           overflow: hidden;
         }
+        
       }
     }
   }

package/src/views/MessageInput/ButtonBar.tsx

@@ -15,20 +15,16 @@ interface SelectionBarProps {
    * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
    */
   isLoading?: boolean,
-  /**
-   * State to determine whether the input is focused
-   */
-  focused?: boolean,
 }
 
-export const ButtonBar = ({ onSend, isLoading, focused }: SelectionBarProps) => {
+export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()
   const widget = useWidget()
   const features = useCurrentChatState('features')
 
   return (
-    <SelectionBarWrapper className="button-group" $inputFocused={focused}>
+    <SelectionBarWrapper className="button-group">
       <Flex sx={{ gap: '4px' }}>
         <SelectContent />
         {features.editor && (

package/src/views/MessageInput/SelectContent.tsx

@@ -1,4 +1,4 @@
-import { Clip, KnowledgeSource, Spaces, Stack } from '@citric/icons'
+import { KnowledgeSource, Plus, Spaces, Stack } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { SelectionList } from '@stack-spot/portal-components/SelectionList'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -59,7 +59,7 @@ export const SelectContent = () => {
         data-test-hint="button-options"
         aria-label={visibleMenu ? t.collapse : t.expand}
         onClick={() => setVisibleMenu(state => !state)}>
-        <Clip />
+        <Plus />
       </IconButton>
       <SelectionList
         style={{

package/src/views/MessageInput/index.tsx

@@ -81,9 +81,9 @@ export const MessageInput = () => {
         </div>
       </div>
       <ProgressBar visible={true} animate={isLoading} 
-        backgroundColor={isLoading || !focused ? theme.color.light[600] : theme.color.primary[500]} />
+        backgroundColor={isLoading || !focused ? theme.color.light[500] : theme.color.primary[500]} />
       <InfoBar />
-      <ButtonBar focused={focused} onSend={onSend} isLoading={isLoading} />
+      <ButtonBar onSend={onSend} isLoading={isLoading} />
     </MessageInputBox>
   )
 }

package/src/views/MessageInput/styled.ts

@@ -7,7 +7,7 @@ const INFO_BAR_DISPLACEMENT = 4
 export const MAX_INPUT_HEIGHT = 300
 export const MIN_INPUT_HEIGHT = 24
 
-export const SelectionBarWrapper = styled.div<{$inputFocused?: boolean}>`
+export const SelectionBarWrapper = styled.div`
   display: inline-flex;
   justify-content: space-between;
   position: relative;
@@ -15,7 +15,6 @@ export const SelectionBarWrapper = styled.div<{$inputFocused?: boolean}>`
   background-color: ${theme.color.light[500]};
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  border: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
   border-top: none;
 
   .selection-list {
@@ -137,19 +136,19 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       align-items: end;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
-      border: 2px solid ${theme.color.light[500]};
+      border: 2px solid ${theme.color.light[300]};
       
-      background-color: ${theme.color.light[500]};
+      background-color: ${theme.color.light[300]};
       padding: 10px 8px;
       transition: border-color 0.3s, background-color 0.3s;
 
       &.focused {
-        border: 2px solid ${theme.color.light[600]};
+        border: 2px solid ${theme.color.light[300]};
       }
 
       
       &.disabled {
-        background-color: ${theme.color.light[500]};
+        background-color: ${theme.color.light[300]};
       }
     }
   }