@stack-spot/ai-chat-widget 2.1.1 → 2.2.0-beta.1

package/src/views/MessageInput/ModelSwitcher.tsx

@@ -0,0 +1,127 @@
+import { Button, Icon } from '@stack-spot/citric-react'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { agentToolsClient, genAiInferenceClient } from '@stack-spot/portal-network'
+import { AgentLlmModelDto, AgentModel } from '@stack-spot/portal-network/api/agent-tools'
+import { LlmModelsResponse, PaginatedResponseLlmModelsResponse } from '@stack-spot/portal-network/api/genAiInference'
+import { Dispatch, ReactElement, useState } from 'react'
+import { CSSProperties } from 'styled-components'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+import { RowWrapperStyled } from './styled'
+
+const styles = {
+  selection: {
+    position: 'absolute',
+    bottom: 'calc(100% + 10px)',
+    right: '0',
+    margin: '0',
+    'ul': {
+      margin: '0px',
+    },
+  },
+}
+
+export const ModelSwitcher = () => {
+  const t = useMessageInputDictionary()
+  const agent = useCurrentChatState('agent')
+  const chat = useCurrentChat()
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  const [agentData] = agentToolsClient.agent.useStatefulQuery({ agentId: agent?.id || '' })
+  const [selectedLLMName, setSelectedLLMName] = useState<string | undefined>()
+  const [models] = genAiInferenceClient.listModels.useStatefulQuery({ pageSize: 999 })
+
+  const { modelName, listItems } = getModelData(chat, setSelectedLLMName, setVisibleMenu, selectedLLMName, agentData, models)
+
+  return (
+    <RowWrapperStyled>
+      <Button
+        className="button-select-model"
+        colorScheme="light"
+        size="sm"
+        aria-label={t.agent}
+        title={t.agent}
+        onClick={() => setVisibleMenu(state => !state)}
+      >
+        {modelName}
+        <Icon icon="ChevronDown" group="fill" size="sm" />
+      </Button>
+      <SelectionList
+        id="menuModelSwitcher"
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        items={listItems || []}
+        style={styles.selection as CSSProperties}
+      />
+    </RowWrapperStyled>
+  )
+}
+
+
+function getModelData(
+  chat: any, 
+  setSelectedModelName: Dispatch<React.SetStateAction<string | undefined>>, 
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  selectedModelName?: string,
+  agent?: AgentModel,
+  models?: PaginatedResponseLlmModelsResponse) {
+
+  const modelListData = parseModelList(
+    setSelectedModelName, setVisibleMenu, chat,
+    agent?.visibility_level !== 'built_in' && !!agent?.model_id ? agent?.available_llm_models : models?.items,
+  )
+
+  if (agent?.visibility_level === 'built_in' || !!agent?.model_id) {
+    const modelDefaultFromList = modelListData.find((model) => model.active)
+    return { modelName: modelDefaultFromList?.label, listItems: modelListData }
+  }
+
+  const listItems = 
+    modelListData && modelListData?.length > 0 ? modelListData : 
+      [{ 
+        active: true, 
+        label: agent?.model_name || agent?.available_llm_models?.find((model) => model.is_default)?.model_name || '', 
+        icon: <Icon icon="StackSpot" />, 
+      }]
+
+  const modelSelectedName = selectedModelName || agent?.model_name || 
+    agent?.available_llm_models?.find((model) => model.is_default)?.model_name
+
+  return { modelName: modelSelectedName, listItems }
+}
+
+function parseModelList(
+  setSelectedModelName: Dispatch<React.SetStateAction<string | undefined>>, 
+  setVisibleMenu: Dispatch<React.SetStateAction<boolean>>, 
+  chat: any,
+  listModel?: Array<AgentLlmModelDto | LlmModelsResponse>, 
+) {
+  const data = Array<{active?: boolean, label: string, icon: ReactElement, onClick: VoidFunction  }>()
+
+  listModel?.forEach((model) => {
+    if ('model_id' in model) {
+      data.push({
+        active: chat.get('selected_model_id') ? chat.get('selected_model_id') === model.model_id : model.is_default,
+        label: model?.model_name || 'LLM',
+        icon: <Icon icon="Bookmark"/>,
+        onClick: () => {
+          setSelectedModelName(model.model_name)
+          chat.set('selected_model_id', model.model_id)
+          setVisibleMenu(false)
+        },
+      })
+    }
+    else {
+      data.push({
+        active: chat.get('selected_model_id') ? chat.get('selected_model_id') === model.id : model.resources[0]?.is_default,
+        label: model?.display_name || 'LLM',
+        icon: <Icon icon="Bookmark"/>,
+        onClick: () => {
+          setSelectedModelName(model.display_name)
+          chat.set('selected_model_id', model.id)
+          setVisibleMenu(false)
+        },
+      })
+    }
+  })
+  return data
+}

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/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,14 @@ export const MessageInputBox = styled.div`
     }
   }
 `
+export const RowWrapperStyled = styled(Flex)`
+  width: 100%;
+  justify-content: end;
+  margin-right: 4px;
+  ul {
+    margin: 0;
+  }
+  .button-select-model {
+    border-radius: 15px !important;
+  }
+`

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