@stack-spot/ai-chat-widget 1.2.0 → 1.3.0

package/src/views/Agents/AgentsTab.tsx

@@ -0,0 +1,80 @@
+import { Button, Text } from '@citric/core'
+import { Search } from '@citric/icons'
+import { Placeholder } from '@stack-spot/portal-components/Placeholder'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { agentClient } from '@stack-spot/portal-network'
+import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/agent'
+import { useMemo, useState } from 'react'
+import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
+import { IconInput } from '../../components/IconInput'
+import { useCurrentChat } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { AgentDescription } from './AgentDescription'
+import { useAgentsDictionary } from './dictionary'
+import { AgentLabel } from './styled'
+
+export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' }) => {
+  const t = useAgentsDictionary()
+  const { close } = useRightPanel()
+  const chat = useCurrentChat()
+  const [filter, setFilter] = useState('')
+  const defaultAgent = useMemo(() => ({
+    id: '',
+    name: 'Stackspot AI',
+    description: t.defaultAgentDescription,
+    llm_config: { model_slug: 'gpt4o' },
+  } as AgentResponse), [])
+  const agents = visibility === 'BUILT-IN' ? agentClient.publicAgents.useQuery({}) : agentClient.agents.useQuery({ visibility })
+  const [value, setValue] = useState<AgentResponse | undefined>(
+    chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : defaultAgent,
+  )
+  const filtered = useMemo(
+    () => {
+      const ags = visibility === 'BUILT-IN' ? [defaultAgent as AgentResponse, ...agents] : agents
+      return filter ? ags.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : ags
+    },
+    [agents, filter, value],
+  )
+
+  function submit() {
+    if (value) {
+      chat.set('agent', value.id ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN' } : undefined)
+    }
+    close()
+  }
+
+  return (
+    <>
+      <div className="content">
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+        {!!filtered.length && <DescribedRadioGroup
+          options={filtered}
+          keygen={a => a.id}
+          value={value}
+          onChange={setValue}
+          renderLabel={({ name, avatar, id }) => (
+            <AgentLabel>
+              {id ? (avatar && <img src={avatar} />) : <MiniLogo />}
+              <Text>{name}</Text>
+            </AgentLabel>
+          )}
+          renderDescription={a => <AgentDescription
+            agentId={a.id}
+            description={a.description}
+            llm={a.llm_config?.model_slug}
+            numberOfKnowledgeSources={a.knowledge_sources_config?.knowledge_sources?.length ?? 0}
+          />}
+          optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+            ? 'filtered-out'
+            : ''
+          }
+          className="option-list"
+        />}
+        {!!agents.length && !filtered.length &&
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
+        {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+      </div>
+      {!!filtered.length && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
+    </>
+  )
+}

package/src/views/Agents/dictionary.ts

@@ -0,0 +1,36 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    title: 'Agents',
+    subtitle: 'By selecting an Agent, it will be consulted to generate the answers.',
+    personal: 'Personal',
+    builtin: 'Built-in',
+    shared: 'Shared',
+    account: 'Account',
+    apply: 'Apply',
+    noSearchResults: "Your search didn't yield results.",
+    noSearchResultsDescription: 'Please, try another search term.',
+    noData: 'There are no agents in this category yet.',
+    noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
+    defaultAgentDescription: 'The StackSpot CodeGen is an advanced artificial intelligence agent designed to optimize and accelerate software development. Integrated directly into your integrated development environment, StackSpot CodeGen offers real-time code suggestions, helping developers write high-quality code more efficiently. With robust features such as creating Stacks AI, customized knowledge sources, and quick commands, StackSpot CodeGen contextualizes your development needs to provide the best answers and code suggestions.',
+    description: 'Description',
+  },
+  pt: {
+    title: 'Agentes',
+    subtitle: 'Ao selecionar um Agente, ele será consultado para gerar as respostas.',
+    personal: 'Pessoal',
+    builtin: 'Embutido',
+    shared: 'Compartilhado',
+    account: 'Conta',
+    apply: 'Aplicar',
+    noSearchResults: 'Sua busca não produziu resultados.',
+    noSearchResultsDescription: 'Por favor, tente outra busca.',
+    noData: 'Ainda não há agentes nesta categoria.',
+    noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
+    defaultAgentDescription: 'O StackSpot CodeGen é um agente de inteligência artificial avançado projetado para otimizar e acelerar o desenvolvimento de software. Integrado diretamente ao seu ambiente de desenvolvimento, o StackSpot CodeGen oferece sugestões de código em tempo real, ajudando os desenvolvedores a escreverem código de alta qualidade de forma mais eficiente. Com recursos robustos, como a criação de Stacks AI, Knowledge Sources personalizadas e comandos rápidos, o StackSpot CodeGen contextualiza suas necessidades de desenvolvimento para fornecer as melhores respostas e sugestões de código.',
+    description: 'Descrição',
+  },
+} satisfies Dictionary
+
+export const useAgentsDictionary = () => useTranslate(dictionary)

package/src/views/Agents/index.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { useWidget, useWidgetState } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { AgentsPanel } from './AgentsPanel'
+import { useAgentsDictionary } from './dictionary'
+
+/**
+ * Renders the panel to select an agent of this panel is opened.
+ */
+export const Agents = () => {
+  const t = useAgentsDictionary()
+  const panel = useWidgetState('panel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'agent') open(
+      <AgentsPanel />,
+      { title: t.title, description: t.subtitle, onClose: () => widget.set('panel', undefined) },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+

package/src/views/Agents/styled.ts

@@ -0,0 +1,59 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const AgentLabel = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+
+  img, svg {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+`
+
+export const AgentDescriptionBox = styled.div`
+  color: ${theme.color.light[700]};
+  line-height: 18px;
+
+  section {
+    border-bottom: 1px solid ${theme.color.light[600]};
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    .title {
+      display: block;
+      margin-bottom: 6px;
+    }
+  }
+  
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    gap: 6px;
+
+    li {
+      margin: 3px 0;
+    }
+  }
+
+  .ks-skeleton {
+    width: 100px;
+    height: 12px;
+    mix-blend-mode: color-dodge;
+  }
+`

package/src/views/Chat/ChatMessage.tsx

@@ -86,21 +86,23 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
             ? <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
             : <p className="plain-text">{entry.content}</p>
           }
-          {entry.actions?.length && <div className="actions">
-            {entry.actions.map(
-              (a, index) => (
-                <Button
-                  key={index}
-                  appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
-                  colorScheme="inverse"
-                  onClick={() => runAction(a)}
-                  disabled={!isLast}
-                >
-                  {a.title}
-                </Button>
-              ),
-            )}
-          </div>}
+          {entry.actions?.length && (
+            <div className="actions">
+              {entry.actions.map(
+                (a, index) => (
+                  <Button
+                    key={index}
+                    appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
+                    colorScheme="inverse"
+                    onClick={() => runAction(a)}
+                    disabled={!isLast}
+                  >
+                    {a.title}
+                  </Button>
+                ),
+              )}
+            </div>
+          )}
         </div>}
       </div>
       {entry.error && (
@@ -111,8 +113,8 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
       )}
       {!!entry.knowledgeSources?.length && <div className="ks-box">
         <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
-        <ul>{entry.knowledgeSources.map(ks => (
-          <li key={ks.slug}>
+        <ul>{entry.knowledgeSources.map((ks, index) => (
+          <li key={index}>
             <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
           </li>
         ))}</ul>

package/src/views/Chat/index.tsx

@@ -13,5 +13,5 @@ interface Props {
  */
 export const Chat = ({ username }: Props) => {
   const { active } = useChatTabs()
-  return <ChatMessages key={active} chatId={active} username={username} />
+  return <ChatMessages key={active.id} chatId={active.id} username={username} />
 }

package/src/views/Chat/styled.ts

@@ -132,12 +132,12 @@ export const ChatList = styled.ul`
 
     &.user {
       align-items: end;
+      margin-left: 15%;
 
       .chat-message {
         display: flex;
         flex-direction: row;
         gap: 8px;
-        align-items: center;
         
         .message-content {
           padding: 10px;

package/src/views/ChatTabSelection.tsx

@@ -2,13 +2,9 @@ import { Clock, Plus } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { TabManager } from '../components/TabManager'
-import { useChatState, useChatTabs, useWidget } from '../context/hooks'
+import { useChatState, useChatTabs, useWidget, useWidgetState } from '../context/hooks'
 import { ButtonAction } from '../types'
 
-interface Props {
-  history?: boolean,
-}
-
 const TabLabel = ({ id }: { id: string }) => {
   const label = useChatState(id, 'label')
   return <div title={label}>{label}</div>
@@ -17,9 +13,10 @@ const TabLabel = ({ id }: { id: string }) => {
 /**
  * This renders the top-most part of the layout, which includes the chat selection through tabs.
  */
-export const ChatTabSelection = ({ history }: Props) => {
+export const ChatTabSelection = () => {
   const t = useTranslate(dictionary)
   const widget = useWidget()
+  const { chatHistory } = useWidgetState('features') ?? {}
   const { active, chats } = useChatTabs()
 
   const buttons = useMemo<ButtonAction[]>(
@@ -29,7 +26,7 @@ export const ChatTabSelection = ({ history }: Props) => {
         label: t.newChat,
         onClick: () => widget.createChat(),
       }]
-      if (history) {
+      if (chatHistory) {
         actions.push({
           icon: <Clock />,
           label: t.openHistory,
@@ -40,11 +37,12 @@ export const ChatTabSelection = ({ history }: Props) => {
       }
       return actions
     },
-    [history],
+    [chatHistory],
   )
+  
   return <TabManager
     tabs={chats}
-    active={active}
+    active={active.id}
     renderLabel={({ id }) => <TabLabel id={id} />}
     keygen={({ id }) => id}
     onRemove={({ id }) => widget.chatTabs.remove(id)}

package/src/views/Editor.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@citric/core'
 import { LoadingCircular } from '@citric/ui'
 import MonacoEditor, { OnMount } from '@monaco-editor/react'
+import { delay } from '@stack-spot/portal-components'
 import { Select } from '@stack-spot/portal-components/Select'
 import { useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -9,6 +10,7 @@ import { IDisposable } from 'monaco-editor'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { styled } from 'styled-components'
 import { useCurrentChat, useCurrentChatState, useWidget, useWidgetState } from '../context/hooks'
+import { panelAnimationTime } from '../right-panel/constants'
 import { useRightPanel } from '../right-panel/hooks'
 import { defaultLanguage, languages } from '../utils/programming-languages'
 
@@ -92,11 +94,12 @@ const EditorPanel = () => {
   const chat = useCurrentChat()
   const selectionObserver = useRef<IDisposable | undefined>()
 
-  const setup: OnMount = useCallback((editor) => {
+  const setup: OnMount = useCallback(async (editor) => {
     selectionObserver.current = editor.onDidChangeCursorSelection(debounce((e) => {
       const selectedText = editor.getModel()?.getValueInRange(e.selection)
       chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
     }, MIN_SELECTION_UPDATE_MS))
+    await delay(panelAnimationTime)
     editor.focus()
   }, [])
 

package/src/views/{Home.tsx → Home/BuiltInAgent.tsx}

@@ -2,57 +2,16 @@ import { FaceSmile, KnowledgeSource, QuickCommand } from '@citric/icons'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { styled } from 'styled-components'
-import { QuickStartButton } from '../components/QuickStartButton'
-import { useCurrentChat } from '../context/hooks'
-import { ChatEntry } from '../state/ChatEntry'
-
-interface Props {
-  /**
-   * The name of the user currently logged in.
-   */
-  username: string,
-}
-
-const HomeBox = styled.div`
-  margin: auto;
-
-  .title, .subtitle {
-    font-family: 'San Francisco';
-    font-size: 26px;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  .title {
-    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;
-  }
-
-  .shortcuts {
-    display: flex;
-    flex-direction: row;
-    gap: 15px;
-    li {
-      flex: 1;
-    }
-  }
-`
+import { QuickStartButton } from '../../components/QuickStartButton'
+import { useCurrentChat } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { HomeBox } from './styled'
+import { HomeProps } from './types'
 
 /**
- * Renders the default home page for the chat. This shows up when no message has been sent yet.
- * 
- * The home page can be replaced by providing children to the component `StackspotAIWidget`.
+ * This is the home rendered when the agent is built-in.
  */
-export const Home = ({ username }: Props) => {
+export const BuiltInAgent = ({ username }: HomeProps) => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
 

package/src/views/Home/CustomAgent.tsx

@@ -0,0 +1,39 @@
+import { Text } from '@citric/core'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+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'
+import { ChatEntry } from '../../state/ChatEntry'
+import { HomeBox } from './styled'
+
+/**
+ * This is the home rendered when the agent is custom.
+ */
+export const CustomAgent = () => {
+  const { id, label, image } = useCurrentChatState('agent') ?? {}
+  const [agent] = agentClient.agent.useStatefulQuery({ agentId: id! })
+  const chat = useCurrentChat()
+  const suggestions = useMemo(() => agent?.suggested_prompts?.map((prompt, index) => (
+    <QuickStartButton
+      key={index}
+      label={prompt}
+      onClick={() => send(prompt)}
+      background={theme.color.light[500]}
+      manageOverflow
+    />
+  )), [agent?.suggested_prompts])
+
+  function send(message: string) {
+    chat.pushMessage(ChatEntry.createUserEntry(message))
+  }
+
+  return (
+    <HomeBox className="home-page custom-agent">
+      {image ? <img src={image} className="avatar" /> : <MiniLogo className="avatar" />}
+      <Text appearance="h3">{label}</Text>
+      <div className="shortcuts">{suggestions?.length ? suggestions : null}</div>
+    </HomeBox>
+  )
+}

package/src/views/Home/index.tsx

@@ -0,0 +1,20 @@
+import { FallbackBoundary } from '../../components/FallbackBoundary'
+import { useCurrentChatState } from '../../context/hooks'
+import { BuiltInAgent } from './BuiltInAgent'
+import { CustomAgent } from './CustomAgent'
+import { HomeProps } from './types'
+
+/**
+ * Renders the default home page for the chat. This shows up when no message has been sent yet.
+ * 
+ * The home page can be replaced by providing children to the component `StackspotAIWidget`.
+ */
+export const Home = (props: HomeProps) => {
+  const agent = useCurrentChatState('agent')
+
+  return (
+    <FallbackBoundary>
+      {agent && !agent.builtIn ? <CustomAgent /> : <BuiltInAgent {...props} />}
+    </FallbackBoundary>
+  )
+}

package/src/views/Home/styled.ts

@@ -0,0 +1,59 @@
+import { styled } from 'styled-components'
+
+export const HomeBox = styled.div`
+  margin: auto;
+
+  .title, .subtitle {
+    font-family: 'San Francisco';
+    font-size: 26px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .title {
+    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;
+  }
+
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    li {
+      flex: 1;
+    }
+  }
+
+  .avatar {
+    width: 74px;
+    height: 74px;
+    border-radius: 50%;
+  }
+
+  &.custom-agent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+
+    .shortcuts {
+      margin-top: 10px;
+      button {
+        padding: 16px;
+        height: 100px;
+        line-height: 24px;
+        p {
+          overflow: hidden;
+        }
+      }
+    }
+  }
+`

package/src/views/Home/types.ts

@@ -0,0 +1,6 @@
+export interface HomeProps {
+  /**
+   * The name of the user currently logged in.
+   */
+  username: string,
+}

package/src/views/KnowledgeSources.tsx

@@ -105,9 +105,9 @@ const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
         {!!knowledgeSources.length && !filtered.length && (
           <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />
         )}
-        {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+        {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
       </div>
-      <Button onClick={onSubmit}>{t.apply}</Button>
+      {!!filtered.length && <Button onClick={onSubmit}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/MessageInput/ButtonGroup.tsx

@@ -4,14 +4,9 @@ import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useRef } from 'react'
 import { useCurrentChatState, useWidget } from '../../context/hooks'
-import { MessageInputFeatures } from '../../features'
 import { useMessageInputDictionary } from './dictionary'
 
 interface ButtonGroupProps {
-  /**
-   * The features enabled and accessible through the message input.
-   */
-  features: MessageInputFeatures,
   /**
    * Whether or not the button group is expanded.
    */
@@ -38,19 +33,27 @@ interface ButtonGroupProps {
  * Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
  * editor, change the agent, the stack, etc.
  */
-export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
+export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
   const t = useMessageInputDictionary()
   const widget = useWidget()
   const featureButtonsWidth = useRef<number | undefined>()
   const featureButtons = useRef<HTMLDivElement>(null)
   const agent = useCurrentChatState('agent')
-  const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack
+  const features = useCurrentChatState('features')
+  const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack || features.editor
 
-  useEffect(() => {
-    if (! featureButtons.current) return
-    featureButtonsWidth.current = featureButtons.current.clientWidth
-    featureButtons.current.style.width = `${featureButtonsWidth.current}px`
-  }, [])
+  useEffect(
+    () => {
+      if (!featureButtons.current) return
+      const isHidden = featureButtons.current.style.width === '0px'
+      featureButtons.current.style.width = 'auto'
+      featureButtonsWidth.current = featureButtons.current.clientWidth
+      if (isHidden) featureButtons.current.style.width = '0px'
+      else featureButtons.current.style.width = `${featureButtonsWidth.current}px`
+    },
+    // don't use the whole features object here, it would make every chat tab change rerun this effect.
+    [features.agent, features.workspace, features.knowledgeSource, features.stack, features.editor],
+  )
 
   return (
     <div className="button-group">