@stack-spot/ai-chat-widget 2.3.1 → 2.4.0

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

@@ -39,7 +39,6 @@ const ResourcesPanel = () => {
     const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
     return chat?.getMessages().find(m => m.id === messageId)?.getValue()
   }, [messageId])
-
   const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
   const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
     { enabled: !!message?.agent?.id })