@stack-spot/ai-chat-widget 3.0.0-beta.1 → 3.0.2-beta.1

package/src/views/Chat/StepsList.tsx

@@ -3,11 +3,11 @@ import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
 import { ChatStep, StepChatStep, ToolChatStep } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { findLastIndex } from 'lodash'
-import React, { useMemo } from 'react'
+import { findLast, findLastIndex } from 'lodash'
+import React, { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { Markdown } from '../../components/Markdown'
-import { useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
+import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { planningToolDictionaryHelper } from '../../utils/planning-tool'
 import { updateToolStep } from '../../utils/update-tool-step'
@@ -17,6 +17,7 @@ interface Props {
   steps: ChatStep[],
   messageId: number,
   chatId: string,
+  userHasAlreadyAnswered?: boolean,
 }
 
 interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
@@ -52,14 +53,14 @@ const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | '
       <Badge colorScheme="inverse" appearance="square">
         {t.step} {index}
       </Badge>}
-    <Text className="step-title" appearance="body2" >
+    <Text className="step-title" appearance="body2">
       {step.input}
     </Text>
-    {step.status === 'awaiting_approval' && 
-    <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50] }}>
-      <Icon icon="Security" />
-      {t.pendingReview}
-    </Badge>}
+    {step.status === 'awaiting_approval' &&
+      <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50] }}>
+        <Icon icon="Security" />
+        {t.pendingReview}
+      </Badge>}
   </Row>
 }
 
@@ -72,12 +73,13 @@ const StyledCard = styled(Card)`
 const Step = ({ step, index, onClick, total, totalTools, isAllDone }: StepProps) => {
   const t = useTranslate(dictionary)
   const status = getStatusIcon(step.status, isAllDone)
+  const hasTools = step.attempts?.[0]?.tools && step.attempts?.[0]?.tools?.length > 0
 
   return (
     <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
       <Row gap="4px" alignItems="center">
         <div className="step-status-icon">{status}</div>
-        <StyledCard p="8px" w="75%">
+        <StyledCard p="8px" w="80%">
           <Accordion header={expand => <StepAccordionHeader step={step} index={index} expand={expand} />}>
             <Column pt="12px">
               {total ?
@@ -90,27 +92,32 @@ const Step = ({ step, index, onClick, total, totalTools, isAllDone }: StepProps)
                   <Row gap="4px">
                     <Icon icon="BorderRadius" size="sm" color="light.700" />
                     <Text color="light.700">{t.totalTools}</Text>
-                    {totalTools}
+                    {totalTools ?? 0}
                   </Row>
                 </Row>
                 : <>
-                  <Row pb="8px" gap="4px">
+                  <Row pb="8px">
                     <Icon icon="Target" size="sm" color="light.700" />
-                    <Text color="light.700">{t.stepGoal}:</Text>
-                    <Text>
+                    <Text color="light.700" tag="span" style={{ margin: '0 4px' }}>{t.stepGoal}:</Text>
+                    <Text tag="span">
                       {step.input}
                     </Text>
                   </Row>
-                  <Row gap="4px">
+                  {hasTools ? <>
+                    <Row gap="4px">
+                      <Icon icon="BorderRadius" size="sm" color="light.700" />
+                      <Text color="light.700">{t.toolsToBeExecuted}:</Text>
+                    </Row>
+                    <ul className="tools-list">
+                      {step.attempts?.[0]?.tools?.map((tool, index) => (<li key={`${tool.id}-${index}`}>
+                        <Text>{tool.name}: {tool.goal}</Text>
+                      </li>))}
+                    </ul>
+                  </> : <Row gap="4px">
                     <Icon icon="BorderRadius" size="sm" color="light.700" />
-                    <Text color="light.700">{t.toolsToBeExecuted}:</Text>
+                    <Text color="light.700">{t.noToolToBeUsed}</Text>
                   </Row>
-                  <ul className="tools-list">
-                    {step.attempts?.[0]?.tools?.map((tool) => (<li key={tool.id}>
-                      <Text>{tool.name}: {tool.goal}</Text>
-                    </li>),
-                    )}
-                  </ul>
+                  }
                 </>
               }
             </Column>
@@ -140,12 +147,12 @@ export const StepsPlaceholder = () => {
   </Card>
 }
 
-const AwaitingApproval = ({ customApproveText }: { customApproveText?: string }) => {
+const AwaitingApproval = ({ customApproveText, chatId }: { chatId: string, customApproveText?: string }) => {
   const t = useTranslate(dictionary)
-  const chat = useCurrentChat()
+  const chat = useChat(chatId)
 
   const onAnswer = (response: string) => {
-    chat.pushMessage(ChatEntry.createUserEntry(response))
+    chat.pushMessage(ChatEntry.createUserEntry('', false, undefined, undefined, response))
   }
 
   return <>
@@ -167,31 +174,30 @@ const AwaitingApproval = ({ customApproveText }: { customApproveText?: string })
   </>
 }
 
-export const ToolStepsList = ({ steps, messageId }: { steps: ToolChatStep, messageId: number }) => {
+export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
   const t = useTranslate(dictionary)
-  const toolsAwaiting = steps
   const chat = useCurrentChat()
   const messages = useCurrentChatMessages()
   const inputParsed = `\`\`\`json
-    ${JSON.stringify(toolsAwaiting?.input, null, 2)}
+    ${JSON.stringify(toolStep?.input, null, 2)}
   \`\`\``
 
   const tool = useMemo(() => {
-    if (!toolsAwaiting) return undefined
-    return toolsAwaiting.attempts?.[0].tools?.[0]
-  }, [toolsAwaiting])
+    if (!toolStep) return undefined
+    return toolStep.attempts?.[0].tools?.[0]
+  }, [toolStep])
 
-  useMemo(() => {
-    if (!toolsAwaiting) return undefined
-    const executionId = toolsAwaiting.attempts?.[0].tools?.[0].executionId
+  useEffect(() => {
+    if (!toolStep) return undefined
+    const executionId = toolStep.attempts?.[0]?.tools?.[0]?.executionId
     if (!executionId) return
 
-    updateToolStep(messages, executionId, steps.status)
-    
-  }, [messages, toolsAwaiting, steps.status])
+    updateToolStep(messages, executionId, toolStep.status)
+
+  }, [messages, toolStep, toolStep.status])
 
   return <>
-    {toolsAwaiting && tool ? <AnimatedHeight>
+    {toolStep && tool ? <AnimatedHeight>
       <div className="steps">
         <Badge colorPalette="yellow" appearance="square">
           <Icon icon="StopWatch" />
@@ -204,7 +210,7 @@ export const ToolStepsList = ({ steps, messageId }: { steps: ToolChatStep, messa
           </Row>
 
           <Text>
-            {toolsAwaiting.user_question}
+            {toolStep.user_question}
           </Text>
 
           <Accordion header={expand => <Row gap="8px" mb="4px">
@@ -216,54 +222,62 @@ export const ToolStepsList = ({ steps, messageId }: { steps: ToolChatStep, messa
             </Markdown>
           </Accordion>
 
-          {toolsAwaiting.status === 'awaiting_approval' && <AwaitingApproval customApproveText={t.approveTool} />}
-
+          <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />
         </Card>
       </div>
     </AnimatedHeight> : null}
   </>
 }
 
-export const StepsList = ({ steps, chatId, messageId }: Props) => {
+export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }: Props) => {
   const t = useTranslate(dictionary)
-  const actualSteps = steps.filter(s => s.type === 'step')
+
+  const filteredSteps = steps.filter(s => s.type === 'step')
+  const actualSteps = useMemo(() => filteredSteps.filter((item) => {
+    const messageIdForStep = planningToolDictionaryHelper.getMessageIdFromStepId(item.id)
+    if (!messageIdForStep) {
+      planningToolDictionaryHelper.setMessageIdForStepId(messageId, item.id)
+      return true
+    } else if (messageIdForStep === messageId) {
+      return true
+    }
+    // If a step is from a planning and it is already inserted in the planningToolDictionaryHelper it means the step is already in a 
+    // previous message and we do not want to show it again (for instance, when required a approval in the planning, we will have 
+    // two messages with the same step id one for the planning awaiting and one for the planning end, so we want to show only one) 
+    return false
+  }), [filteredSteps])
+
   const planning = steps.filter(s => s.type === 'planning')
-  
-  useMemo(() => {
+
+  useEffect(() => {
     actualSteps.map((item) => {
-      const executionId = item.attempts[0]?.tools?.[0].executionId 
+      const executionId = item.attempts[0]?.tools?.[0]?.executionId
       if (executionId) {
         planningToolDictionaryHelper.setMessageIdPlanningStepToolExecutionId(`${messageId}`, executionId)
       }
     })
   }, [actualSteps, messageId])
 
-  const toolsStep = steps.filter(s => s.type === 'tool')
-  
-  useMemo(() => {
-    const executionId = toolsStep?.[0]?.attempts?.[0]?.tools?.[0]?.executionId
+  const toolsStep = findLast(steps, s => s.type === 'tool')
+
+  useEffect(() => {
+    const executionId = toolsStep?.attempts?.[0]?.tools?.[0]?.executionId
     if (executionId) {
       planningToolDictionaryHelper.setMessageIdToolStepToolExecutionId(`${messageId}`, executionId)
     }
   }, [toolsStep, messageId])
 
-  const planningGoal = steps.filter(s => s.type === 'planning')?.[0]?.goal
+  const planningGoal = planning?.[0]?.goal
   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])
 
   let currentStepIndex = findLastIndex(actualSteps, s => s.status === 'running' || s.status === 'success')
   if (currentStepIndex === -1) currentStepIndex = 0
-  const widget = useWidget()
-
-  function openToolsPanel() {
-    widget.set('currentMessageInPanel', { chatId, messageId })
-    widget.set('panel', 'steps')
-  }
 
   return (<>
     {actualSteps.length > 0 ? <AnimatedHeight>
@@ -272,12 +286,10 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
           <Icon icon="Target" size="sm" color="light.600" />
           <Text>{t.executionPlan}</Text>
         </Row>
+
         <ul className="steps-list">
-          <Step
-            step={actualSteps[currentStepIndex]}
-            index={currentStepIndex + 1}
-          />
-          
+          {actualSteps.map((s, i) => <Step step={s} key={i} index={i + 1} />)}
+
           <Step
             step={{ status: 'target', input: planningGoal, attempts: [] }}
             index={currentStepIndex + 1}
@@ -290,23 +302,52 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
         <Column gap="8px" mt="8px">
           <Divider colorScheme="light" />
           <Text color="light.700">{planning?.[0]?.user_question}</Text>
-          {planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval />}
+          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
         </Column>
 
-        {isLastStepDone && <div className="step-actions">
-          <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
-            <Icon group="fill" icon="Play" size="xs" />
-            {t.detailed}
-          </Button>
-        </div>}
+        {userHasAlreadyAnswered && planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} />}
+
       </div>
     </AnimatedHeight> : null}
 
-    {toolsStep?.length > 0 && <ToolStepsList steps={toolsStep[0]} messageId={messageId} />}
+    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered &&
+      <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
   </>
   )
 }
 
+export const ViewToolsDetails = ({ chatId }: { chatId: string }) => {
+  const t = useTranslate(dictionary)
+  const messages = useChatMessages(chatId)
+  const widget = useWidget()
+  const getPlanningMessageId = () => {
+    const messageWithPlanning = findLast(messages, (message) => {
+      const steps = message.getValue().steps
+      const planningStep = steps?.find((step) => step.type === 'planning' && step.status === 'success')
+      return planningStep ? true : false
+    })
+    return messageWithPlanning?.id
+  }
+
+  function openToolsPanel() {
+    const messageId = getPlanningMessageId()
+
+    if (messageId) {
+      widget.set('currentMessageInPanel', { chatId, messageId })
+      widget.set('panel', 'steps')
+    }
+  }
+
+  return <>
+    <div className="step-actions">
+      <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
+        <Icon group="fill" icon="Play" size="xs" />
+        {t.detailed}
+      </Button>
+    </div>
+  </>
+}
+
 const dictionary = {
   en: {
     step: 'Step',
@@ -326,6 +367,7 @@ const dictionary = {
     viewDetails: 'View details',
     approveTool: 'Approve execution',
     pendingReview: 'Pending review',
+    noToolToBeUsed: 'No tool will be needed',
   },
   pt: {
     step: 'Passo',
@@ -345,5 +387,6 @@ const dictionary = {
     viewDetails: 'Ver detalhes',
     approveTool: 'Aprovar execução',
     pendingReview: 'Revisão pendente',
+    noToolToBeUsed: 'Nenhuma tool será necessária',
   },
 } satisfies Dictionary

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;
       }
     }
   }
@@ -282,7 +278,6 @@ export const ChatList: IStyledComponentBase<
         }
 
         .step-title {
-          line-height: 0.75rem;
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
@@ -292,8 +287,10 @@ export const ChatList: IStyledComponentBase<
       }
     }
 
-    .step-actions {
-      margin-top: 8px;
+  }
+
+  .step-actions {
+      margin-top: 16px;
       display: flex;
       gap: 6px;
 
@@ -303,7 +300,6 @@ export const ChatList: IStyledComponentBase<
         align-items: center;
       }
     }
-  }
 
   .markdown img {
     max-width: 70%;

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/SelectContent.tsx

@@ -83,7 +83,7 @@ export const SelectContent = () => {
   if (!hasFeatureButtons) return null
 
   return itemConfigs.length > 1 ? (
-    <MenuOverlay items={listItems} position="top" bgLevel={500} spaced roundedItems>
+    <MenuOverlay items={listItems} position="right" bgLevel={500} roundedItems  menuClass="menu-citric-hr" alignment="end">
       <IconButton icon="Plus" />
     </MenuOverlay>
   ) : (

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