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

package/src/views/ChatTabSelection.tsx

@@ -41,13 +41,14 @@ export const ChatTabSelection = () => {
     () => {
       const actions: ButtonAction[] = [{
         icon: <Plus />,
-        label: t.newChat,
+        ariaLabel: t.newChat,
         onClick: create,
       }]
       if (chatHistory) {
         actions.push({
           icon: <Clock />,
-          label: t.openHistory,
+          label: t.history,
+          ariaLabel: t.openHistory,
           className: 'test',
           style: { marginLeft: 'auto' },
           onClick: () => widget.set('panel', 'history'),
@@ -71,10 +72,12 @@ export const ChatTabSelection = () => {
 
 const dictionary = {
   en: {
+    history: 'History',
     openHistory: 'Open chat history',
     newChat: 'New chat',
   },
   pt: {
+    history: 'Histórico',
     openHistory: 'Abrir histórico da conversa',
     newChat: 'Novo chat',
   },

package/src/views/Home/BuiltInAgent.tsx

@@ -1,6 +1,5 @@
-import { FaceSmile, KnowledgeSource, QuickCommand } from '@citric/icons'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { theme } from '@stack-spot/portal-theme'
+import { Text } from '@citric/core'
+import { FaceSmile, KnowledgeSource, QuickCommand, StackSpot } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { QuickStartButton } from '../../components/QuickStartButton'
 import { useCurrentChat } from '../../context/hooks'
@@ -21,35 +20,28 @@ export const BuiltInAgent = ({ username }: HomeProps) => {
 
   return (
     <HomeBox className="home-page">
-      <h2 className="title">{t.hello}, {username}</h2>
-      <h3 className="subtitle">{t.subtitle}</h3>
+      <Text appearance="h2" className="title">{t.hello}, {username}</Text>
+      <Text appearance="h3" className="subtitle">{t.subtitle}</Text>
       <div className="shortcuts">
         <QuickStartButton
           label={t['question.meta']}
           onClick={() => send(t['question.meta'])}
-          icon={<MiniLogo />}
-          background={theme.color.orange[50]}
+          icon={<StackSpot />}
         />
         <QuickStartButton
           label={t['question.ks']}
           onClick={() => send(t['question.ks'])}
           icon={<KnowledgeSource />}
-          background={theme.color.cyan[50]}
-          color={theme.color.cyan[600]}
         />
         <QuickStartButton
           label={t['question.agents']}
           onClick={() => send(t['question.agents'])}
           icon={<FaceSmile />}
-          background={theme.color.pink[50]}
-          color={theme.color.pink[600]}
         />
         <QuickStartButton
           label={t['question.qc']}
           onClick={() => send(t['question.qc'])}
           icon={<QuickCommand />}
-          background={theme.color.purple[50]}
-          color={theme.color.purple[600]}
         />
       </div>
     </HomeBox>
@@ -59,7 +51,7 @@ export const BuiltInAgent = ({ username }: HomeProps) => {
 const dictionary = {
   en: {
     hello: 'Hello',
-    subtitle: "Let's innovate and streamline your coding journey together. Want to lead the change? Just ask!",
+    subtitle: 'What really matters takes time, let us help you with the rest.',
     'question.meta': 'What is StackSpot AI?',
     'question.ks': 'What are Knowledge Sources?',
     'question.agents': 'How do Agents work?',
@@ -67,7 +59,7 @@ const dictionary = {
   },
   pt: {
     hello: 'Olá',
-    subtitle: 'Vamos inovar e simplificar sua jornada de programação juntos. Quer liderar a mudança? É só perguntar!',
+    subtitle: 'O que realmente importa leva tempo, deixe que a gente cuide do resto.',
     'question.meta': 'O que é a StackSpot AI?',
     'question.ks': 'O que são Knowledge Sources?',
     'question.agents': 'Como funcionam os agentes?',

package/src/views/Home/CustomAgent.tsx

@@ -1,7 +1,6 @@
 import { IconBox, Text } from '@citric/core'
 import { Agent } from '@citric/icons'
 import { agentClient } from '@stack-spot/portal-network'
-import { theme } from '@stack-spot/portal-theme'
 import { useMemo } from 'react'
 import { QuickStartButton } from '../../components/QuickStartButton'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
@@ -20,8 +19,6 @@ export const CustomAgent = () => {
       key={index}
       label={prompt}
       onClick={() => send(prompt)}
-      background={theme.color.light[500]}
-      manageOverflow
     />
   )), [agent?.suggested_prompts])
 

package/src/views/Home/index.tsx

@@ -18,10 +18,10 @@ const AgentList = styled.ul`
   li {
     flex-shrink: 0;
     &:first-child {
-      margin-left: auto;
+      /* margin-left: auto; */
     }
     &:last-child {
-      margin-right: auto;
+      /* margin-right: auto; */
     }
   }
 `

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,35 @@ 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;
+        padding-block: 8px;
+        font-weight: 400;
+        line-height: normal;
+        border: none;
+        i {
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+        }
+        &:hover, &:visited, &:active, &:focus {
+          background-color: ${theme.color.light[600]}
+        }
+    }
   }
 
   .avatar, .avatar svg {
@@ -48,11 +59,11 @@ export const HomeBox = styled.div`
       margin-top: 10px;
       button {
         padding: 16px;
-        height: 100px;
         line-height: 24px;
         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]};
       }
     }
   }