@stack-spot/ai-chat-widget 2.3.2 → 2.4.1

package/src/views/Chat/ChatMessage.tsx

@@ -69,12 +69,12 @@ interface Props extends CustomMessage {
   isLast: boolean,
 }
 
-interface RenderInputsEntryProps { 
-  isLast: boolean, 
-  entry: TextChatEntry, 
-  value: string[], 
+interface RenderInputsEntryProps {
+  isLast: boolean,
+  entry: TextChatEntry,
+  value: string[],
   setValue: Dispatch<React.SetStateAction<string[]>>,
-  labels: string[], 
+  labels: string[],
   setLabels: Dispatch<React.SetStateAction<string[]>>,
 }
 
@@ -113,7 +113,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
               <Input name={entry.name} onChange={v => setValue([v])} required style={{ height: '30px', width: '33%' }} />}
           </Row>
         )}
-      />  
+      />
     }
 
     if (entry.type === 'button-list') {
@@ -145,7 +145,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
         renderLabel={o => (
           <Row gap={3}>
             <Text>{o.label}</Text>
-            {o.hasInput && o.value && labels.findIndex((label) => label === o.value)!== -1 &&
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
               <div style={{ width: '33%' }}>
                 <Input
                   name={entry.name}
@@ -158,7 +158,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
                       const newValue = [...value]
                       newValue[customIndex] = v
                       setValue(newValue)
-                    } 
+                    }
                   }}
                   required={true}
                   style={{ height: '30px' }}
@@ -219,7 +219,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
   const isPlanning = useCurrentChatState('isPlaning') ?? false
-  
+
   // when we have a steps but we are not showing any content of the step
   // (because it is a tool and the user has already answered the question)
   // we do not want to show an avatar with empty content, so we hide the entire message
@@ -227,12 +227,12 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const messages = useChatMessages(chat.id)
   const userHasAlreadyAnswered = useMemo(() => {
     const messageIndex = messages.findIndex((messageItem) => messageItem.id === message.id)
-    if (messages.length-1 === messageIndex) return false
-    const nextMessage = messages[messageIndex+1].getValue()
+    if (messages.length - 1 === messageIndex) return false
+    const nextMessage = messages[messageIndex + 1].getValue()
     return nextMessage.agentType === 'user'
   }, [messages, messages.length])
   const isMessageHidden = toolsStep && userHasAlreadyAnswered
-  
+
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
 
@@ -277,7 +277,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     }
   }
 
-  const renderActions = useCallback(()=> <> {entry.actions?.length && (
+  const renderActions = useCallback(() => <> {entry.actions?.length && (
     <div className="actions">
       {entry.actions.map(
         (a, index) => (<>
@@ -357,7 +357,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.length  ||
+  return (entry.content || entry.error || !!entry.steps?.length ||
     entry.upload?.length) && (!isMessageHidden || !toolsStep || isPlanning) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
@@ -371,33 +371,19 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
               {!!entry.badges?.length && <div className="badges">
                 {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
-              
-              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} 
+
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id}
                 userHasAlreadyAnswered={userHasAlreadyAnswered} />}
 
               {renderContent()}
-            
+
             </div>
           )}
-          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder /> }
-          
+          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder />}
+
           {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
         {afterMessage && createElement(afterMessage, { message })}
-        {/* {!!entry.tools?.length && <StackedBadge
-          aria-label={t.openToolsPanel}
-          title={t.openToolsPanel}
-          tabIndex={0}
-          role="button"
-          className="tools-badge"
-          label={t.tools}
-          images={entry.tools.slice(0, 3).map((id) => {
-            const tool = toolById(id, toolKits)
-            return { key: id, name: tool?.name || id, icon: <Icon icon="Cog" />, url: tool?.image }
-          })}
-          onClick={openToolsPanel}
-          style={{ marginTop: '12px', width: 'fit-content' }}
-        />} */}
 
         {!!entry.knowledgeSources?.length && <div className="ks-box">
           <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
@@ -408,36 +394,40 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           ))}</ul>
         </div>}
 
-        {(!!agentsTools?.length || !!entry.tools?.length) && <div className="tools-box">
-          <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
-            {agentsTools?.map((agent) => (
-              <ImageBox key={agent.id} className="agent-info-avatar-resource">
-                <ImageWithFallback
-                  src={agent.avatar ?? undefined}
-                  fallback={<Icon icon="Agent" />}
-                  alt={agent.name}
-                  aria-label={agent.name}
-                  title={agent.name}
-                />
-              </ImageBox>
-            ))}
-            {entry.tools?.map((id) => {
-              const tool = toolById(id, toolKits)
-              return (
-                <ImageBox key={id} className="agent-info-avatar-resource">
+        {(!!agentsTools?.length || !!entry.tools?.length) && 
+          <div className="tools-box">
+            <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
+              {agentsTools?.map((agent) => (
+                <ImageBox key={agent.id} className="agent-info-avatar-resource">
                   <ImageWithFallback
-                    src={tool?.image}
-                    fallback={<Icon icon="Cog" />}
-                    alt={tool?.name}
-                    aria-label={tool?.name}
-                    title={tool?.name}
+                    src={agent.avatar ?? undefined}
+                    fallback={<Icon icon="Agent" />}
+                    alt={agent.name}
+                    aria-label={agent.name}
+                    title={agent.name}
                   />
                 </ImageBox>
-              )})}
-          </Button>
-          <ViewToolsDetails chatId={chat.id} />
-        </div>}
-    
+              ))}
+              {entry?.tools?.map((id) => {
+                if (agentsTools?.some((agent) => agent.id === id)) return null
+                const tool = toolById(id, toolKits)
+                return (
+                  <ImageBox key={id} className="agent-info-avatar-resource">
+                    <ImageWithFallback
+                      src={tool?.image}
+                      fallback={<Icon icon="Cog" />}
+                      alt={tool?.name}
+                      aria-label={tool?.name}
+                      title={tool?.name}
+                    />
+                  </ImageBox>
+                )
+              })}
+            </Button>
+            <ViewToolsDetails chatId={chat.id} />
+          </div>
+        }
+
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (

package/src/views/Chat/StepsList.tsx

@@ -271,8 +271,8 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
   const isLastStepDone = actualSteps[actualSteps.length - 1]?.status !== 'running' &&
     actualSteps[actualSteps.length - 1]?.status !== 'pending'
   const totalTools = useMemo(() => actualSteps?.reduce((sum, step) => {
-    const firstAttempt = step.attempts && step.attempts[0]
-    const toolsCount = firstAttempt.tools?.length ?? 0
+    const firstAttempt = step?.attempts && step.attempts[0]
+    const toolsCount = firstAttempt?.tools?.length ?? 0
     return sum + toolsCount
   }, 0), [steps])
 
@@ -302,7 +302,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
         <Column gap="8px" mt="8px">
           <Divider colorScheme="light" />
           <Text color="light.700">{planning?.[0]?.user_question}</Text>
-          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' &&  <AwaitingApproval chatId={chatId} />}
+          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
         </Column>
 
         {userHasAlreadyAnswered && planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} />}
@@ -310,7 +310,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
       </div>
     </AnimatedHeight> : null}
 
-    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered && 
+    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered &&
       <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
   </>
   )
@@ -331,7 +331,7 @@ export const ViewToolsDetails = ({ chatId }: { chatId: string }) => {
 
   function openToolsPanel() {
     const messageId = getPlanningMessageId()
-   
+
     if (messageId) {
       widget.set('currentMessageInPanel', { chatId, messageId })
       widget.set('panel', 'steps')

package/src/views/Chat/styled.ts

@@ -220,7 +220,7 @@ export const ChatList: IStyledComponentBase<
 
   .tools-box {
     
-    > ul {
+    > button {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
@@ -229,15 +229,11 @@ export const ChatList: IStyledComponentBase<
       margin-top: 8px;
       padding: 0;
       list-style: none;
-      gap: 6px;
+      gap: 0px;
       
       &:hover{
-        cursor: pointer;
-        
-        .agent-info-avatar-resource {
-          transition: margin-left 0.3s ease-in;
-          margin-left: 0px;
-        }
+        transition: gap 0.3s ease-in;
+        gap: 6px;
       }
     }
   }

package/src/views/MessageInput/ButtonBar.tsx

@@ -1,6 +1,7 @@
 import { IconButton, Row } from '@stack-spot/citric-react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
+import { ModelSwitcher } from './ModelSwitcher'
 import { SelectContent } from './SelectContent'
 import { SelectionBarWrapper } from './styled'
 
@@ -29,6 +30,7 @@ export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
           <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
         )}
       </Row>
+      <ModelSwitcher />
       {isLoading ? (
         <IconButton
           icon="Stop"

package/src/views/MessageInput/ModelSwitcher/index.tsx

@@ -0,0 +1,68 @@
+import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
+import { AsyncContent, Button, Column, FieldGroup, Icon, Input, Row } from '@stack-spot/citric-react'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { agentToolsClient, genAiInferenceClient } from '@stack-spot/portal-network'
+import { useMemo, useState } from 'react'
+import { CSSProperties } from 'styled-components'
+import { useCurrentChat, useCurrentChatState } from '../../../context/hooks'
+import { useMessageInputDictionary } from '../dictionary'
+import { RowWrapperStyled, stylesModelSwitcher } from '../styled'
+import { getListModelsData, handleFilterTypeModel, providerIcon } from './utils'
+
+export const ModelSwitcher = () => {
+  const t = useMessageInputDictionary()
+  const agentCurrentChat = useCurrentChatState('agent')
+  const chat = useCurrentChat()
+  const [filter, setFilter] = useState('')
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  const [agentData, isLoadingAgentData] = agentToolsClient.agent.useStatefulQuery({ agentId: agentCurrentChat?.id || '' })
+  const [models, isLoadingModels] = 
+    genAiInferenceClient.listModels.useStatefulQuery({ pageSize: 999, active: true })
+
+  const { modelName, modelProviderType, listItemsData } = 
+    getListModelsData(chat, setVisibleMenu, agentData, models)
+
+  const data = useMemo(() => {
+    const items = listItemsData ?? []
+    return handleFilterTypeModel(items, t, filter)
+  }, [agentCurrentChat?.id, listItemsData, filter])
+
+  return (
+    <RowWrapperStyled>
+      <AsyncContent loading={isLoadingAgentData && isLoadingModels}>
+        <Button
+          className="button-select-model"
+          colorScheme="light"
+          size="sm"
+          aria-label={t.agent}
+          title={t.agent}
+          onClick={() => setVisibleMenu(state => !state)}
+        >
+          <Icon
+            icon={providerIcon[modelProviderType as CitricIconOutline | CitricIconSocial]} 
+            group={modelProviderType === 'stackspot' ? 'outline' : 'social'} 
+          />
+          {modelName}
+          <Icon icon="ChevronDown" group="fill" size="sm" />
+        </Button>
+      </AsyncContent>
+      <SelectionList
+        id="menuModelSwitcher"
+        items={data || []}
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        showListAsCard
+        style={stylesModelSwitcher.selection as CSSProperties}
+        before={
+          <Column>
+            <FieldGroup fullWidth style={{ marginTop: '8px' }}>
+              <Icon icon="Search" />
+              <Input type="search" value={filter} onChange={(value) => (setFilter(value))} />
+            </FieldGroup>
+            {!data.length ? <Row m="16px 8px">{t.nothingFound}</Row> : undefined}
+          </Column>
+        }
+      />
+    </RowWrapperStyled>
+  )
+}

package/src/views/MessageInput/ModelSwitcher/utils.tsx

@@ -0,0 +1,143 @@
+import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
+import { IconBox } from '@stack-spot/citric-react'
+import { AgentModel } from '@stack-spot/portal-network/api/agent-tools'
+import { LlmModelsResponse, PaginatedResponseLlmModelsResponse } from '@stack-spot/portal-network/api/genAiInference'
+import { theme } from '@stack-spot/portal-theme'
+import { Dispatch, ReactElement } from 'react'
+import { ChatState } from '../../../state/ChatState'
+
+export interface ItemProps {
+    active?: boolean, 
+    label?: string, 
+    icon?: ReactElement, 
+    self_hosted?: boolean,
+    onClick?: VoidFunction, 
+  }
+
+export const providerIcon: Record<string, CitricIconSocial | CitricIconOutline> = {
+  openai: 'OpenAI',
+  bedrock: 'AWSBedrock',
+  azure: 'Azure',
+  stackspot: 'StackSpot',
+  gemini: 'Gemini',
+  deepseek: 'DeepSeek',
+  anthropic: 'Anthropic',
+}
+
+export function getListModelsData(
+  chat: ChatState, 
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  agent?: AgentModel,
+  models?: PaginatedResponseLlmModelsResponse) {
+
+  const chatSelectedModelId = chat.get('selected_model_id')
+  
+  const listModelsToShow = agent?.visibility_level !== 'built_in' && !!agent?.model_id ? 
+    models?.items.filter((model) => agent?.available_llm_models?.find((modelAvailable) => modelAvailable.model_id === model.id)) : 
+    models?.items
+
+  const modelAvailableDefault = agent?.available_llm_models?.find((model) => (model.is_default || model.model_id === agent.model_id))
+  const modelListData = parseModelList(chat, setVisibleMenu, listModelsToShow, modelAvailableDefault?.model_id)
+  
+  if (agent?.visibility_level === 'built_in' || !agent?.model_id) {
+    
+    const modelDefaultProviderType = models?.items.find((modelAccount) => 
+      chatSelectedModelId ? modelAccount.id === chatSelectedModelId : 
+        modelAccount.resources.find((resource) => resource.is_default))?.model_configuration.provider.provider_type
+    
+    const modelDefaultActive = modelListData.find((model) => model?.active)
+    
+    return { modelName: modelDefaultActive?.label, modelProviderType: modelDefaultProviderType, listItemsData: modelListData }
+  }
+
+  const modelAccount = models?.items.find((modelAccount) => modelAccount.id === (chatSelectedModelId || agent.model_id))
+  const modelProviderType = modelAccount?.model_configuration.provider.provider_type
+  const modelSelectedName = modelAccount?.display_name || modelAvailableDefault?.model_name || agent?.model_name
+
+  const listItemsData = 
+    modelListData && modelListData?.length > 0 ? modelListData : 
+      [{ 
+        active: true, 
+        label: modelSelectedName || '', 
+        icon: <IconBox icon={providerIcon[modelProviderType || 'stackspot']} 
+          appearance="square"
+          group={modelProviderType === 'stackspot' ? 'outline' : 'social'} />, 
+        self_hosted: modelAccount?.self_hosted || false,
+        onClick: () => {
+          chat.set('selected_model_id', modelAvailableDefault?.model_id)
+          setVisibleMenu(false)
+        },
+      }]
+
+
+  return { modelName: modelSelectedName, modelProviderType, listItemsData }
+}
+
+function parseModelList(
+  chat: ChatState,
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  listModel?: LlmModelsResponse[], 
+  modelAvailableDefaultId?: string,
+) {
+
+  const data = Array<ItemProps>()
+  const chatModelId = chat.get('selected_model_id')
+
+  listModel?.forEach((model) => {
+    data.push({
+      active: chatModelId ? chatModelId === model.id : modelAvailableDefaultId === model.id || 
+        model.resources?.some((resource) => resource.is_default && resource.name === 'agents'),
+      label: model?.display_name || 'LLM',
+      icon: <IconBox 
+        style={{ backgroundColor: theme.color.light[300] }}
+        appearance="square"
+        icon={providerIcon[model.model_configuration.provider.provider_type]} 
+        group={model.model_configuration.provider.provider_type === 'stackspot' ? 'outline' : 'social'} 
+      />,
+      self_hosted: model.self_hosted,
+      onClick: () => {
+        chat.set('selected_model_id', model.id)
+        setVisibleMenu(false)
+      },
+    })
+  })
+  return data
+}
+
+export function handleFilterTypeModel(items: ItemProps[], t: Record<string, string>, filter?: string) {
+  const filterLower = filter?.toLocaleLowerCase()
+  const filteredItens = items.filter((item) => filterLower ? item?.label?.toLocaleLowerCase().includes(filterLower) : item)
+
+  const { selfHosted, hosted } = filteredItens.reduce(
+    (acc, model) => {
+      if (model?.self_hosted) {
+        acc.selfHosted.push(model)
+      } else {
+        acc.hosted.push(model)
+      }
+      return acc
+    },
+    { selfHosted: [], hosted: [] } as { selfHosted: typeof items, hosted: typeof items },
+  )
+
+  const sections = [
+    { 
+      label: t.hosted, 
+      children:  hosted,
+    },
+    { 
+      label: t.selfHosted, 
+      children:  selfHosted, 
+    },
+  ]
+
+  const filteredByHavingItens = sections
+    .filter(section => section.children.length > 0)
+    .map(section => ({
+      type: 'section',
+      label: section.label,
+      children: section.children,
+    }))
+
+  return filteredByHavingItens
+}

package/src/views/MessageInput/dictionary.ts

@@ -35,6 +35,9 @@ const dictionary = {
     chatAgent: 'Agents',
     uploadSuccessStatus: 'File sent successfully',
     chatViewMenu: 'Chat options menu',
+    nothingFound: 'Nothing Found',
+    hosted: 'Hosted',
+    selfHosted: 'Self Hosted',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -70,6 +73,9 @@ const dictionary = {
     chatAgent: 'Agentes',
     uploadSuccessStatus: 'Arquivo anexado com sucesso',
     chatViewMenu: 'Menu de opções do chat',
+    nothingFound: 'Nada encontrado',
+    hosted: 'Hospedado',
+    selfHosted: 'Auto-hospedado',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/styled.ts

@@ -1,3 +1,4 @@
+import { Flex } from '@citric/core'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -302,3 +303,39 @@ export const MessageInputBox = styled.div`
     }
   }
 `
+
+export const stylesModelSwitcher = {
+  selection: {
+    minHeight: '300px',
+    position: 'absolute',
+    bottom: 'calc(100% + 10px)',
+    right: '0',
+    margin: '0',
+  },
+}
+
+export const RowWrapperStyled = styled(Flex)`
+  width: 100%;
+  justify-content: end;
+  margin-right: 4px;
+  ul {
+    margin: 0;
+  }
+  .button-select-model {
+    border-radius: 15px !important;
+  }
+  #menuModelSwitcher {
+    background-color: ${theme.color.light[500]};
+  }
+
+  .selection-list-content {
+    .action :hover {
+      cursor: pointer;
+      background-color: ${theme.color.light[600]};
+    }
+    ul :hover {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+`

package/src/views/Resources.tsx

@@ -1,4 +1,4 @@
-import { Accordion, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
+import { Accordion, Column, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -27,9 +27,16 @@ export const Resources = () => {
 }
 
 const StyledAccordion = styled(Accordion)`
+  padding: 8px;
+  margin: 8px;
   &[data-citric="accordion"] {
     background-color: ${theme.color.light[400]};
   }
+  label {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 `
 
 const ResourcesPanel = () => {
@@ -50,11 +57,11 @@ const ResourcesPanel = () => {
   const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId, toolKits])
 
   const header = (image?: string, label?: string) => (
-    <Row gap="10px">
-      <ImageBox>
+    <Row>
+      <ImageBox >
         <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
       </ImageBox>
-      <Text>{label}</Text>
+      <Text style={{ marginLeft: '8px' }}>{label}</Text>
     </Row>
   )
   
@@ -64,23 +71,25 @@ const ResourcesPanel = () => {
         {[...(tools || []), ...(customTools || [])].map(
           (tool) =>
             tool && (
-              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card">
+              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card" maxHeight={120}>
                 {tool?.description}
               </StyledAccordion>
             ))}
       </>
       {
         hasAgentTool && 
-        <>
+        <Column>
           {message?.tools?.map((id) => {
             const agentTool = agentsTools?.find((agent) => agent.id === id)
             return (
-              <StyledAccordion key={id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
-                <AgentDescription  agentId={id} />
+              <StyledAccordion key={agentTool?.id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
+                <Row>
+                  <AgentDescription  agentId={id} />
+                </Row>
               </StyledAccordion>
             )},
           )}
-        </>
+        </Column>
       }
     </>
   )