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

package/src/views/Chat/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
-import { Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Badge, IconButton } from '@citric/ui'
+import { Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
+import { Badge, IconButton, Tooltip } from '@citric/ui'
 import { agentClient } from '@stack-spot/portal-network'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -185,7 +185,10 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
   const [agent] = agentClient.agentById.useStatefulQuery({ agentId, builtIn: !!entry?.agent?.builtIn }, { enabled: !!agentId  })
+  const [copied, setCopied] = useState(false)
+  const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
 
+  
   useChatScrollToBottomEffect(ref, [entry])
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
@@ -250,6 +253,12 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   )}
   </>, [entry, isLast, runAction])
 
+  const handleCopy = () => {
+    onCopyAll(entry, chat)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
   const renderContent = () => {
     if (entry.type === 'md') {
       return <>
@@ -277,9 +286,13 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
     widget.set('panel', 'tools')
   }
 
+
   return (entry.content || entry.error || !!entry.steps?.length) && (
-    <li key={entry.messageId} className={entry.agentType} ref={ref}>
-      <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
+    <li key={entry.messageId} className={entry.agentType} ref={ref} 
+    >
+      <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}
+        onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
+        onMouseLeave={entry.agentType === 'user' ? () => setShowUserButtonCopy(false) : undefined}>
         <div className={`user-info ${entry.agentType}`}>{userInfo}</div>
         {beforeMessage && createElement(beforeMessage, { message })}
         {(entry.content || entry.steps) && <div className={listToClass(['message-content', entry.card && 'card', entry.type])}>
@@ -290,13 +303,14 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
          
           {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
         </div>}
+        
+        {entry.error && (
+          <div className="error">
+            <IconBox size="xs"><TimesCircle /></IconBox>
+            <Text appearance="microtext1">{entry.error}</Text>
+          </div>
+        )}
       </div>
-      {entry.error && (
-        <div className="error">
-          <IconBox size="xs"><TimesCircle /></IconBox>
-          <Text appearance="microtext1">{entry.error}</Text>
-        </div>
-      )}
       {afterMessage && createElement(afterMessage, { message })}
       {!!entry.tools?.length && <StackedBadge
         aria-label={t.openToolsPanel}
@@ -319,12 +333,37 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           </li>
         ))}</ul>
       </div>}
-      {shouldShowFooter && <div className="message-footer">
+   
+      {shouldShowFooter && <div className="message-footer"
+        onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
+        onMouseLeave={entry.agentType === 'user' ? () => setShowUserButtonCopy(false) : undefined}>
+      
         {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
+
           {entry.type === 'md' && (
-            <IconButton appearance="square" color="light" title={t.copy} aria-label={t.copy} onClick={() => onCopyAll(entry, chat)}>
-              <Copy />
-            </IconButton>
+            copied ? (
+              <Tooltip text={t.copied} position={'right'}>
+                <IconButton
+                  appearance="square"
+                  colorBg="light"
+                  title={t.copied}
+                  aria-label={t.copied}
+                  onClick={handleCopy}
+                >
+                  <Check />
+                </IconButton>
+              </Tooltip>
+            ) : (
+              <IconButton
+                appearance="square"
+                color="light"
+                title={t.copy}
+                aria-label={t.copy}
+                onClick={handleCopy}
+              >
+                <Copy />
+              </IconButton>
+            )
           )}
           {entry.messageId && (
             <>
@@ -337,6 +376,40 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
             </>
           )}
         </div>}
+
+        {entry.agentType === 'user' && (
+          <div className="message-actions">
+            {copied ? (
+              <Tooltip text={t.copied} position={'left'}>
+                <IconButton
+                  appearance="square"
+                  colorBg="light"
+                  title={t.copied}
+                  aria-label={t.copied}
+                  size="sm"
+                >
+                  <Check />
+                </IconButton>
+              </Tooltip>
+            ) : (
+              showUserButtonCopy && (
+                <div className="action-bar">
+                  <IconButton
+                    appearance="square"
+                    color="light"
+                    title={t.copy}
+                    aria-label={t.copy}
+                    onClick={handleCopy}
+                    size="sm"
+                  >
+                    <Copy className="copy-btn"/>
+                  </IconButton>
+                </div>
+              )
+            )}
+          </div>
+        )}
+
         <Text as="label" appearance="microtext1" className="chat-date">
           {dateFormatter.formatForChatMessage(date)}
         </Text>
@@ -352,6 +425,7 @@ const dictionary = {
     dislike: 'Dislike',
     tools: 'Tools',
     openToolsPanel: 'Open the tools panel to see more details.',
+    copied: 'Copied',
   },
   pt: {
     copy: 'Copiar',
@@ -359,5 +433,6 @@ const dictionary = {
     dislike: 'Não gostei',
     tools: 'Ferramentas',
     openToolsPanel: 'Abrir o painel de ferramentas para ver mais detalhes.',
+    copied: 'Copiado',
   },
 } satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -61,11 +61,14 @@ export const ChatList: IStyledComponentBase<
   .message-footer {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 8px;
 
     .message-actions {
       display: flex;
       flex-direction: row;
       gap: 4px;
+      height: 26px;
     }
 
     .chat-date {

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,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]};
       }
     }
   }