@stack-spot/ai-chat-widget 2.3.0-alpha.1 → 2.3.1-beta.1

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 getModelData(
+  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 modelDefaultFromList = modelListData.find((model) => model?.active)
+    
+    return { modelName: modelDefaultFromList?.label, modelProviderType: modelDefaultProviderType, listItemsData: modelListData }
+  }
+
+  const modelFromListModelsAccount = models?.items.find((modelAccount) => modelAccount.id === (chatSelectedModelId || agent.model_id))
+  const modelProviderType = modelFromListModelsAccount?.model_configuration.provider.provider_type
+  const modelSelectedName = modelFromListModelsAccount?.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: modelFromListModelsAccount?.self_hosted || false,
+        onClick: () => {
+          chat.set('selected_model_id', modelAvailableDefault?.model_id)
+          setVisibleMenu(false)
+        },
+      }]
+
+
+  return { modelName: modelSelectedName, modelProviderType, listItemsData }
+}
+
+function parseModelList(
+  chat: any,
+  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 handleFilter(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/QuickCommandSelector.tsx

@@ -14,7 +14,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   const isQuickCommandEnabled =  useCurrentChatState('features').quickCommands
   const spotId = useWidgetState('features')?.workspaceId
 
-  const useFavorites = () => aiClient.allQuickCommands.useQuery({ visibility: 'favorite' }, { enabled: isQuickCommandEnabled })
+  const useFavorites = () => aiClient.allQuickCommands.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = aiClient.addFavoriteQuickCommand.useMutation()
   const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteQuickCommand.useMutation()
 

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

@@ -24,8 +24,8 @@ import { UploadDragNDrop, useUploadDragDrop } from './UploadDragNDrop'
  * going to be used for the question and the buttons to send, cancel, set the workspace, among others. This also includes the Quick
  * Commands panel for auto completing.
  */
-export const MessageInput = ({ chatWindowRef, customInputMessage, customButtonBarItems }: 
-  { chatWindowRef?: React.RefObject<HTMLElement>, customInputMessage?: string, customButtonBarItems?: React.ReactNode}) => {
+export const MessageInput = ({ chatWindowRef, customInputMessage }: 
+  { chatWindowRef?: React.RefObject<HTMLElement>, customInputMessage?: string }) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
   const [, setExpanded] = useState(true)
@@ -152,7 +152,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage, customButtonBa
               placeholder={
                 agentLabel
                   ? customInputMessage ?? interpolate(t.placeholder, agentLabel)
-                  : customInputMessage ?? t.typing
+                  : t.typing
               }
               onChange={v => chat.set('nextMessage', v)}
               value={value}
@@ -168,7 +168,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage, customButtonBa
         <ProgressBar className="progress-bar" progress={isLoading ? undefined : (focused ? 100 : 0)} speed="fast" />
         <ContextBar />
         {chat.get('features').upload && <UploadBar />}
-        <ButtonBar onSend={onSend} isLoading={isLoading} customButtonBarItems={customButtonBarItems} />
+        <ButtonBar onSend={onSend} isLoading={isLoading} />
       </MessageInputBox>
       <UploadDragNDrop isDragging={isDragging} onDrop={handleDrop} onDragLeave={handleDragLeave} />
     </UploadProvider>

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 })

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>}