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

package/src/components/Code.tsx

@@ -2,7 +2,8 @@
  * Copied from the extension's webview.
  */
 
-import { AddCode, ChevronDoubleDown, Collapse, Copy } from '@citric/icons'
+import { Text } from '@citric/core'
+import { AddCode, ChevronDoubleDown, Collapse, Copy, Download } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { theme, useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -12,6 +13,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import styled from 'styled-components'
 import { WithChildren } from '../types'
+import { languages } from '../utils/programming-languages'
 
 export type CodeAction = (
   code: string,
@@ -53,23 +55,28 @@ const CodeBox = styled.code`
     }
   }
 
-  .action-bar {
+  .header-code {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     background: ${theme.color.light[600]};
     padding: 4px 6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 
-    button {
-      background: transparent;
-      border: none;
-      opacity: 0.75;
-      transition: opacity 0.2s;
+    .action-bar {
+      display: flex;
+      flex-direction: row;
+     
+      button {
+        background: transparent;
+        border: none;
+        opacity: 0.75;
+        transition: opacity 0.2s;
 
-      &:hover {
-        opacity: 1;
+        &:hover {
+          opacity: 1;
+        }
       }
     }
   }
@@ -108,6 +115,7 @@ export const Code = ({
   const match = /language-(\w+)/.exec(className || '')
   const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt'
   const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim()
+  const languageExtension = languages.find(l => l.value === computedLanguage)?.extensions?.[0] ?? '.txt'
 
   function onClickInsert() {
     onInsertCode?.(content, computedLanguage)
@@ -137,47 +145,75 @@ export const Code = ({
   return (
     <CodeBox className={['code-box', themeKind, className].join(' ')}>
       {showActionBar && (
-        <div className="action-bar" role="toolbar">
-          <IconButton
-            aria-label={showLines ? t.hideLines : t.showLines}
-            title={showLines ? t.hideLines : t.showLines}
-            onClick={() => setShowLines(v => !v)}
-            style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
-          >
-            <Collapse />
-          </IconButton>
-          <IconButton
-            aria-label={t.copy}
-            title={t.copy}
-            onClick={onClickCopy}
-            style={{ position: 'relative' }}
-          >
-            <Copy />
-          </IconButton>
-          {onInsertCode
-            ? (
-              <IconButton
-                aria-label={t.insert}
-                title={t.insert}
-                onClick={onClickInsert}
-                style={{ position: 'relative' }}
-              >
-                <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
-              </IconButton>
-            )
-            : null}
-          {onNewFile
-            ? (
-              <IconButton
-                aria-label={t.newFile}
-                title={t.newFile}
-                onClick={onClickNewFile}
-                style={{ position: 'relative' }}
-              >
-                <AddCode />
-              </IconButton>
-            )
-            : null}
+        <div className="header-code">
+          <div>
+            <Text appearance="code2">{computedLanguage ?? ''}</Text>
+          </div>
+          <div className="action-bar" role="toolbar">
+            <IconButton
+              aria-label={showLines ? t.hideLines : t.showLines}
+              title={showLines ? t.hideLines : t.showLines}
+              onClick={() => setShowLines(v => !v)}
+              style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
+            >
+              <Collapse />
+            </IconButton>
+            <IconButton
+              aria-label={t.downloadCode}
+              title={t.downloadCode}
+              onClick={() => {
+                try {
+                  const extension = languageExtension
+                  const filename = `download${extension}`
+                  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+                  const link = document.createElement('a')
+                  link.href = URL.createObjectURL(blob)
+                  link.download = filename
+                  document.body.appendChild(link)
+                  link.click()
+                  document.body.removeChild(link)
+                  URL.revokeObjectURL(link.href)
+                } catch (e) {
+                  // eslint-disable-next-line no-console
+                  console.error(t.downloadError, e)
+                }
+              }}
+            >
+              <Download />
+            </IconButton>
+            <IconButton
+              aria-label={t.copy}
+              title={t.copy}
+              onClick={onClickCopy}
+              style={{ position: 'relative' }}
+            >
+              <Copy />
+            </IconButton>
+            {onInsertCode
+              ? (
+                <IconButton
+                  aria-label={t.insert}
+                  title={t.insert}
+                  onClick={onClickInsert}
+                  style={{ position: 'relative' }}
+                >
+                  <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
+                </IconButton>
+              )
+              : null}
+            {onNewFile
+              ? (
+                <IconButton
+                  aria-label={t.newFile}
+                  title={t.newFile}
+                  onClick={onClickNewFile}
+                  style={{ position: 'relative' }}
+                >
+                  <AddCode />
+                </IconButton>
+              )
+              : null}
+          </div>
         </div>
       )}
       <div>
@@ -205,6 +241,8 @@ const dictionary = {
     newFile: 'Creates a new file with this code as its content',
     hideLines: 'Hide line numbers',
     showLines: 'Show line numbers',
+    downloadCode: 'Download the code',
+    downloadError: 'Error downloading code',
   },
   pt: {
     copy: 'Copiar código para a área de transferência',
@@ -212,5 +250,7 @@ const dictionary = {
     newFile: 'Criar um novo arquivo com este código como conteúdo',
     hideLines: 'Esconder números das linhas',
     showLines: 'Mostrar números das linhas',
+    downloadCode: 'Fazer download do código',
+    downloadError: 'Erro ao fazer download do código',
   },
 } satisfies Dictionary

package/src/components/QuickStartButton.tsx

@@ -1,66 +1,18 @@
-import { IconBox, Text } from '@citric/core'
-import { theme, WithStyle } from '@stack-spot/portal-theme'
-import { styled } from 'styled-components'
+import { Button, IconBox, Text } from '@citric/core'
+import { WithStyle } from '@stack-spot/portal-theme'
 import { ButtonAction } from '../types'
-import { FadingOverflow } from './FadingOverflow'
 
-interface Props extends ButtonAction, WithStyle {
-  background?: string,
-  /**
-   * Whether or not the vertical overflow of this button should be managed by the component {@link FadingOverflow}.
-   * @default false
-   */
-  manageOverflow?: boolean,
-}
-
-/**
- * A button for quick starting a conversation.
- */
-const QuickButton = styled.button<{ $color?: string, $bg?: string }>`
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  gap: 12px;
-  background-color: ${theme.color.light[500]};
-  border: none;
-  color: inherit;
-  flex: 1;
-  border-radius: 4px;
-  border: 2px solid;
-  border-color: ${theme.color.light[500]};
-  transition: border-color 0.3s;
-  cursor: pointer;
-  text-align: left;
-
-  &:hover {
-    border-color: ${theme.color.light[600]};
-  }
-  
-  i {
-    border-radius: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${({ $bg }) => $bg || 'transparent'};
-    ${({ $color }) => $color
-    ? `
-      svg {
-        fill: ${$color};
-      }`
-    : ''
-};
-  }
-`
+interface Props extends ButtonAction, WithStyle { }
 
-export const QuickStartButton = ({ label, onClick, background, className, color, icon, style, manageOverflow }: Props) => {
+export const QuickStartButton = ({ label, onClick, className, icon, style }: Props) => {
   const content = <>
-    {icon && <IconBox aria-hidden>{icon}</IconBox>}
-    <Text>{label}</Text>
+    {icon && <IconBox color="light" aria-hidden>{icon}</IconBox>}
+    <Text nowrapEllipsis>{label}</Text>
   </>
 
   return (
-    <QuickButton className={className} style={style} onClick={onClick} $color={color} $bg={background}>
-      {manageOverflow ? <FadingOverflow sides={['top', 'bottom']} scroll="wheel">{content}</FadingOverflow> : content}
-    </QuickButton>
+    <Button colorScheme="light" size="md" className={className} style={style} onClick={onClick}>
+      {content}
+    </Button>
   )
 }

package/src/components/TabManager.tsx

@@ -1,5 +1,6 @@
 /* Tabs to select chat and add new chats */
 
+import { Button, IconBox } from '@citric/core'
 import { TimesMini } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { listToClass, theme } from '@stack-spot/portal-theme'
@@ -188,18 +189,33 @@ export function TabManager<T, Key extends React.Key>(
     </li>
   )), [tabs, active])
 
-  const extras = useMemo(() => buttons.map(({ label, onClick, icon, className, style }) => (
-    <IconButton
-      key={label}
-      aria-label={label}
-      title={label}
-      className={listToClass([className, 'extra'])}
-      style={style}
-      onClick={onClick}
-    >
-      {icon}
-    </IconButton>
-  )), [buttons])
+  const extras = useMemo(() => buttons.map(({ ariaLabel, label, onClick, icon, className, style }) => (
+    <>
+      {label ? 
+        <Button 
+          sx={{ paddingLeft: 0, marginRight: '4px', fontWeight: '400' }}
+          colorScheme="light"
+          size="md"
+          key={ariaLabel} 
+          title={label} 
+          style={style} 
+          onClick={onClick}>
+          <IconBox size="sm" sx={{ width: '32px', height: '16px', paddingInline: '8px' }} >
+            {icon} 
+          </IconBox>
+          {label} 
+        </Button> : 
+        <IconButton
+          key={ariaLabel}
+          aria-label={ariaLabel}
+          title={label}
+          className={listToClass([className, 'extra'])}
+          style={style}
+          onClick={onClick}
+        >
+          {icon}
+        </IconButton>}
+    </>)), [buttons])
 
   // when a new tab is added, we should scroll to it if there are more tabs that we can show.
   useEffect(() => {

package/src/layout.css

@@ -52,7 +52,6 @@
     .home-page {
       .title {
         margin-top: 40px;
-        font-size: 18px;
       }
       .subtitle {
         font-size: 14px;
@@ -100,6 +99,23 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  .agent-list .agent-card {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    border-radius: 4px;
+    padding: 10px 8px;
+    img {
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+    }
+    h6 {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 14px;
+    }
+  }
 }
 
 .chat-content {

package/src/types.ts

@@ -9,7 +9,8 @@ export type PropsOf<T extends React.FunctionComponent> = T extends React.Functio
 export interface ButtonAction extends WithStyle {
   icon?: React.ReactElement,
   color?: string,
-  label: string,
+  label?: string,
+  ariaLabel?: string,
   onClick: () => any,
 }
 

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

@@ -1,6 +1,7 @@
 import { FadingOverflow } from '@stack-spot/portal-components/FadingOverflow'
 import { styled } from 'styled-components'
 import { AgentCard } from '../../components/AgentCard'
+import { AgentCardCreate } from '../../components/AgentCard/AgentCardCreate'
 import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useCurrentChatState } from '../../context/hooks'
 import { BuiltInAgent } from './BuiltInAgent'
@@ -17,12 +18,6 @@ const AgentList = styled.ul`
   
   li {
     flex-shrink: 0;
-    &:first-child {
-      margin-left: auto;
-    }
-    &:last-child {
-      margin-right: auto;
-    }
   }
 `
 
@@ -31,7 +26,7 @@ const AgentList = styled.ul`
  * 
  * The home page can be replaced by providing children to the component `StackspotAIWidget`.
  */
-export const Home = ({ initialAgents, ...props }: HomeProps) => {
+export const Home = ({ initialAgents, onClickCreateAgent, ...props }: HomeProps) => {
   const agent = useCurrentChatState('agent')
   const isAgentEnabled = useCurrentChatState('features').agent
     
@@ -41,6 +36,7 @@ export const Home = ({ initialAgents, ...props }: HomeProps) => {
       {!!initialAgents && isAgentEnabled && (
         <FadingOverflow enableHorizontalScrollWithVerticalWheel sides={['left', 'right']} scroll="arrows">
           <AgentList className="agent-list">
+            {onClickCreateAgent && <li><AgentCardCreate onClickCreateAgent={onClickCreateAgent} /></li>}
             {initialAgents.map((agent) => <li key={agent.id}><AgentCard agent={agent} /></li>)}
           </AgentList>
         </FadingOverflow>

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,36 @@ 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;
+        max-width: 30vw;
+        i {
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+        }
+        &:hover, &:visited, &:active, &:focus {
+          background-color: ${theme.color.light[600]}
+        }
+    }
   }
 
   .avatar, .avatar svg {
@@ -45,14 +57,16 @@ export const HomeBox = styled.div`
     gap: 20px;
 
     .shortcuts {
-      margin-top: 10px;
+      display: inline-block;
+      text-align: center;
       button {
-        padding: 16px;
-        height: 100px;
-        line-height: 24px;
+        margin-bottom: 10px;
+        margin-left: 4px;
+        margin-right: 4px;
         p {
           overflow: hidden;
         }
+        
       }
     }
   }

package/src/views/Home/types.ts

@@ -9,4 +9,8 @@ export interface HomeProps {
    * Initial agents to show in home.
    */
   initialAgents?: LabeledAgent[],
+  /**
+   *  Function onClick of "Create Agent" button
+   */
+  onClickCreateAgent?: VoidFunction,
 }

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'
@@ -52,6 +52,7 @@ export const SelectContent = () => {
   return (
     <>
       <IconButton
+        id="button-content-select"
         color="light"
         appearance="square"
         role="button"
@@ -59,7 +60,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>
   )
 }