@stack-spot/ai-chat-widget 2.2.1 → 2.2.2-beta.1

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

@@ -0,0 +1,149 @@
+import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
+import { Icon, IconBox } from '@stack-spot/citric-react'
+import { AgentLlmModelDto, 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'
+
+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 getModelData(
+  chat: any, 
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  agent?: AgentModel,
+  models?: PaginatedResponseLlmModelsResponse) {
+
+  const listModelsToShow = agent?.visibility_level !== 'built_in' && !!agent?.model_id ? agent?.available_llm_models : models?.items
+
+  const modelListData = parseModelList(chat, setVisibleMenu, listModelsToShow, models?.items)
+
+  const modelAvailableDefault = agent?.available_llm_models?.find((model) => model.is_default)
+  const modelFromListAccount = models?.items.find((modelAccount) => modelAccount.active)
+  const modelProviderType = modelFromListAccount?.model_configuration.provider.provider_type
+
+  if (agent?.visibility_level === 'built_in' || !agent?.model_id) {
+    const modelDefaultFromList = modelListData.find((model) => model?.active)
+    
+    return { modelName: modelDefaultFromList?.label, modelProviderType, listItemsData: modelListData }
+  }
+
+  const listItemsData = 
+    modelListData && modelListData?.length > 0 ? modelListData : 
+      [{ 
+        active: true, 
+        label: modelAvailableDefault?.model_name || agent?.model_name || '', 
+        icon: <IconBox icon={providerIcon[modelProviderType || 'stackspot']} 
+          appearance="square"
+          group={modelProviderType === 'stackspot' ? 'outline' : 'social'} />, 
+        self_hosted: modelFromListAccount?.self_hosted || false,
+        onClick: () => {
+          chat.set('selected_model_id', modelAvailableDefault?.model_id)
+          setVisibleMenu(false)
+        },
+      }]
+
+  const modelSelectedName = chat.get('selected_model_id') || agent?.model_name || modelAvailableDefault?.model_name
+
+  return { modelName: modelSelectedName, modelProviderType, listItemsData }
+}
+
+function parseModelList(
+  chat: any,
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  listModelToShow?: Array<AgentLlmModelDto | LlmModelsResponse>, 
+  listModelAccount?: LlmModelsResponse[], 
+) {
+
+  const data = Array<ItemProps>()
+
+  const chatModelId = chat.get('selected_model_id')
+
+  listModelToShow?.forEach((model) => {
+    if ('model_id' in model) {
+      const modelFromListModels = listModelAccount?.find((modelAccount) => model.model_id === modelAccount.id)
+      data.push({
+        active: chatModelId === model.model_id || model.is_default,
+        label: model?.model_name || 'LLM',
+        icon: <Icon icon="Bookmark"/>,
+        self_hosted: modelFromListModels?.self_hosted || false,
+        onClick: () => {
+          chat.set('selected_model_id', model.model_id)
+          setVisibleMenu(false)
+        },
+      })
+    }
+    else {
+      data.push({
+        active: chatModelId === model.id || model.resources[0]?.is_default,
+        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 handleFilter(items: ItemProps[], 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: 'Hosted', 
+      children:  hosted,
+    },
+    { 
+      label: 'Self Hosted', 
+      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,7 @@ const dictionary = {
     chatAgent: 'Agents',
     uploadSuccessStatus: 'File sent successfully',
     chatViewMenu: 'Chat options menu',
+    nothingFound: 'Nothing Found',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -70,6 +71,7 @@ const dictionary = {
     chatAgent: 'Agentes',
     uploadSuccessStatus: 'Arquivo anexado com sucesso',
     chatViewMenu: 'Menu de opções do chat',
+    nothingFound: 'Nada encontrado',
   },
 } 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/Steps/FlowChart/NodeStep.tsx

@@ -37,7 +37,7 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
         {!!step.attempts[0].tools?.length && <StackedBadge
           label={t.tools}
           images={step.attempts[0].tools?.slice(0, 3).map(
-            tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Icon icon="Cog" /> }),
+            tool => ({ key: tool.id, name: tool.name ?? '', url: tool.image, icon: <Icon icon="Cog" /> }),
           )}
         />}
       </div>}

package/src/views/Steps/FlowChart/layout.ts

@@ -8,6 +8,7 @@ const nodesSizes = {
   step: stepNodeSize,
   planning: planningNodeSize,
   answer: answerNodeSize,
+  tool: stepNodeSize,
 }
 
 export function useLayoutedElements(nodes: NodeWithoutLayout[], edges: Edge[]) {

package/src/views/Steps/FlowChart/types.ts

@@ -9,6 +9,6 @@ export interface NodeData {
 
 export interface NodeWithoutLayout {
   id: string,
-  type: 'step' | 'planning' | 'answer',
+  type: 'step' | 'planning' | 'answer' | 'tool',
   data?: NodeData,
 }

package/src/views/Steps/StepModal.tsx

@@ -127,7 +127,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
 
   const tools = step?.type === 'step' ? step.attempts[attempt]?.tools?.map(tool => (
     <div className="tool" key={tool.id}>
-      <ToolBadge name={tool.name} duration={tool.duration} image={tool.image} description={tool.description} />
+      <ToolBadge name={tool.name ?? ''} duration={tool.duration} image={tool.image} description={tool.description} />
       {tool.input && <>
         <Text appearance="microtext1" color="light.700">{t.input}:</Text>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
@@ -191,7 +191,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
               {!!s.attempts[0].tools?.length && <ul className="side-by-side-tools">
                 {s.attempts[0].tools.map((tool) => (
                   <li key={tool.id}>
-                    <ToolBadge name={tool.name} image={tool.image} />
+                    <ToolBadge name={tool.name ?? ''} image={tool.image} />
                   </li>
                 ))}
               </ul>}