@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

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