@stack-spot/ai-chat-widget 0.10.0 → 1.0.0-dev.1768314799914

package/src/views/Agents/AgentsTab.tsx

@@ -0,0 +1,126 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, ImageWithFallback } from '@stack-spot/citric-react'
+import { Placeholder } from '@stack-spot/portal-components/Placeholder'
+import { AgentResponseWithBuiltIn, agentToolsClient, AgentVisibilityLevel, workspaceAiClient } from '@stack-spot/portal-network'
+import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
+import { debounce } from 'lodash'
+import { useCallback, useMemo, useState, useTransition } from 'react'
+import { NavigationComponent } from '../../components/ComponentNavigator'
+import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
+import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
+import { useCurrentChat } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { ChatProperties } from '../../state/ChatState'
+import { AgentDescription } from './AgentDescription'
+import { useAgentsDictionary } from './dictionary'
+import { useAgentFavorites } from './useAgentFavorites'
+
+export interface AgentTabProps {
+  visibility?: AgentVisibilityLevel,
+  workspaceId?: string,
+  agent: React.MutableRefObject<ChatProperties['agent']>,
+  showSubmitButton?: boolean,
+}
+
+export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = true }: AgentTabProps) => {
+  const t = useAgentsDictionary()
+  const { close } = useRightPanel()
+  const chat = useCurrentChat()
+  const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
+  const [submitEnabled, setSubmitEnabled] = useState(false)
+  const listFavorites = useFavorites()
+  const agentDefault = agentToolsClient.agentDefault.useQuery()
+
+  const [filter, setFilter] = useState<string | undefined>()
+  const [apiFilter, setApiFilter] = useState<string | undefined>()
+  const [isPending, startTransition] = useTransition()
+
+  const runOnChange = useCallback(
+    debounce((value?: string) => {
+      startTransition(() => {
+        setApiFilter(value)
+      })
+    }, 500),
+    [startTransition],
+  )
+
+  const data = workspaceAiClient.getAgentFromWorkspaceAi.useStatefulQuery({ workspaceId: workspaceId! },
+    { enabled: !!workspaceId })
+  const workspaceAgents = data?.[0] as AgentResponseWithBuiltIn[]
+
+  const [agentsData = [], { fetchNextPage, hasNextPage }] = agentToolsClient.agentsMultipleFilters.useInfiniteQuery({
+    filters: {
+      page: 1,
+      size: 20,
+      name: apiFilter,
+      ...(visibility?.length ? { visibility_list: [visibility] } : {}),
+    },
+  }, { enabled: !workspaceId })
+
+  const agents = workspaceId ? workspaceAgents : agentsData
+
+  const initialValue = useMemo<AgentResponseWithBuiltIn | undefined>(
+    () => {
+      const initial = agent.current
+        ? agents?.find(a => a.id === agent.current?.id)
+        : chat.get('agent') ? agents?.find(a => a.id === chat.get('agent')?.id) : agentDefault as unknown as AgentResponseWithBuiltIn
+      if (initial && !submitEnabled) setSubmitEnabled(true)
+      return initial
+    },
+    [agents],
+  )
+
+  function submit() {
+    if (agent.current) chat.set('agent', agent.current)
+    close()
+  }
+
+  return <>
+    <div className="content">
+      <DescribedRadioGroup
+        fetchNextPage={fetchNextPage}
+        hasNextPage={hasNextPage && !workspaceId}
+        options={agents}
+        initialValue={initialValue}
+        filter={workspaceId ? undefined : filter}
+        setFilter={workspaceId ? undefined : (value?: string) => {
+          setFilter(value)
+          runOnChange(value)
+        }}
+        onChange={(ag) => {
+          agent.current = ag
+            ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in' }
+            : undefined
+          setSubmitEnabled(true)
+        }}
+        isLoading={isPending}
+        data={ag => ({
+          idOrSlug: ag.id,
+          // below, "key" is important. I don't know why exactly, but sometimes the avatar doesn't update if we don't do this.
+          image: <ImageWithFallback key={ag.id} src={ag.avatar ?? undefined} fallback={<Icon icon="Agent" />} />,
+          description: <AgentDescription agentId={ag.id} />,
+          name: ag.name,
+          listFavorites,
+          onAddFavorite,
+          onRemoveFavorite,
+        })}
+        emptyResults={
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />
+        }
+        emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
+      />
+    </div>
+    {!!agents?.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
+  </>
+}
+
+export function AgentsTabWorkspace({ agent, visibility, showSubmitButton }: AgentTabProps) {
+  const workspaceTabComponents = useMemo(() => ({ agent: AgentsTab }), [agent])
+
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
+    component: 'agent',
+    props: { visibility, workspaceId: workspace.id, agent, showSubmitButton },
+  })
+
+  return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
+}

package/src/views/Agents/dictionary.ts

@@ -0,0 +1,45 @@
+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',
+    favorites: 'Favorites',
+    tools: 'Tools',
+    spots: 'Spots',
+    multiAgent: 'Multi-agents',
+  },
+  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',
+    favorites: 'Favoritos',
+    tools: 'Ferramentas',
+    spots: 'Spots',
+    multiAgent: 'Multi-agents',
+
+  },
+} 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,69 @@
+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;
+  background-color: ${theme.color.light[400]};
+  margin-top: 16px;
+
+  section {
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    > .title {
+      display: block;
+      margin-bottom: 6px;
+    }
+
+    .card-agent-info {
+      background-color: ${theme.color.light[500]};
+      border: 1px solid ${theme.color.light[600]};
+      border-radius: 3px;
+      padding: 4px;
+      width: 100%;
+    }
+  }
+  
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    white-space: nowrap;
+
+    li {
+      margin-bottom: 3px;
+      display: flex;
+      width: 100%;
+    }
+  }
+
+  .ks-skeleton {
+    width: 100px;
+    height: 12px;
+    mix-blend-mode: color-dodge;
+  }
+`

package/src/views/Agents/useAgentFavorites.ts

@@ -0,0 +1,63 @@
+/* eslint-disable filenames/match-regex */
+import { agentToolsClient } from '@stack-spot/portal-network'
+
+export function useAgentFavorites() {
+  const useFavorites = () => agentToolsClient.agentsMultipleFilters.useQuery({ filters: { visibility_list: ['favorite'] } })?.items
+  const [addFavorite, pendingAddFav] = agentToolsClient.addFavorite.useMutation()
+  const [removeFavorite, pendingRemoveFav] = agentToolsClient.removeFavorite.useMutation()
+
+  const removeFavoriteAgent = async (idOrSlug?: string) => {
+    try {
+      await removeFavorite({ agentId: idOrSlug || '' })
+      await agentToolsClient.agentsMultipleFilters.invalidate({ filters: { visibility_list: ['favorite'] } })
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  const addFavoriteAgent = async (idOrSlug?: string) => {
+    try {
+      await addFavorite({ agentId: idOrSlug || '' })
+      await agentToolsClient.agentsMultipleFilters.invalidate({ filters: { visibility_list: ['favorite'] } })
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onRemoveFavorite = (idOrSlug?: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await removeFavoriteAgent(idOrSlug)
+      if (!pendingRemoveFav){
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    } 
+  })
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onAddFavorite = (idOrSlug?: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await addFavoriteAgent(idOrSlug)
+      if (!pendingAddFav){
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    } 
+  }) 
+  
+
+  return {
+    useFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav,
+  }
+}

package/src/views/Chat/AgentInfo.tsx

@@ -1,17 +1,22 @@
-import { Text } from '@citric/core'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { Icon } from '@stack-spot/citric-icons'
+import { ImageWithFallback, Text } from '@stack-spot/citric-react'
 import { LabeledWithImage } from '../../state/types'
 
 interface Props {
   agent?: LabeledWithImage,
+  icon?: React.ReactElement,
 }
 
-export const AgentInfo = ({ agent }: Props) => (
+/**
+ * Renders the avatar of an agent in a message.
+ */
+export const AgentInfo = ({ agent, icon }: Props) => (
   <>
-    {agent?.image
-      ? <img src={agent.image} className="custom-agent-image" />
-      : <div className="default-image-wrapper"><MiniLogo className="agent-image" /></div>
-    }
-    <Text appearance="body2">{agent?.label || 'Stackspot AI'}</Text>
+    <ImageWithFallback
+      src={agent?.image ?? ''}
+      className="custom-agent-image"
+      fallback={<div className="default-image-wrapper">{icon ?? <Icon icon="Agent" className="agent-image" />}</div>}
+    />
+    <Text appearance="body2">{agent?.label}</Text>
   </>
 )

package/src/views/Chat/ButtonExecutionDetail.tsx

@@ -0,0 +1,46 @@
+import { LoadingCircular } from '@citric/ui'
+import { Button, Icon, Row } from '@stack-spot/citric-react'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo } from 'react'
+import { useChatMessages, useWidget } from '../../context/hooks'
+
+export const ButtonExecutionDetail = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
+  const t = useTranslate(dictionary)
+  const messages = useChatMessages(chatId)
+  const widget = useWidget()
+
+  const isRunning = useMemo(() => {
+    const messageEntry = messages?.find((message) => message.id === messageId)
+    return !messageEntry?.getValue().steps?.find((step) => step.type === 'answer' && step.status !== 'running')
+  }, [messageId, messages])
+
+  function openToolsPanel() {
+    if (messageId) {
+      widget.set('currentMessageInPanel', { chatId, messageId })
+      widget.set('panel', 'steps')
+    }
+  }
+
+  useEffect(() => {
+    isRunning && openToolsPanel()
+  }, [isRunning])
+
+  return <>
+    <Row className="step-actions">
+      {isRunning && <LoadingCircular colorScheme="inverse" size="xs" />}
+      <Button colorScheme="light" size="sm" appearance="none" className="icon-button details" onClick={openToolsPanel}>
+        <Icon group="outline" icon="Expand" size="xs" />
+        {t.detailed}
+      </Button>
+    </Row>
+  </>
+}
+
+const dictionary = {
+  en: {
+    detailed: 'View execution details',
+  },
+  pt: {
+    detailed: 'Ver detalhes da execução',
+  },
+} satisfies Dictionary