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

package/src/views/Chat/ChatMessage.tsx

@@ -69,12 +69,12 @@ interface Props extends CustomMessage {
   isLast: boolean,
 }
 
-interface RenderInputsEntryProps { 
-  isLast: boolean, 
-  entry: TextChatEntry, 
-  value: string[], 
+interface RenderInputsEntryProps {
+  isLast: boolean,
+  entry: TextChatEntry,
+  value: string[],
   setValue: Dispatch<React.SetStateAction<string[]>>,
-  labels: string[], 
+  labels: string[],
   setLabels: Dispatch<React.SetStateAction<string[]>>,
 }
 
@@ -113,7 +113,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
               <Input name={entry.name} onChange={v => setValue([v])} required style={{ height: '30px', width: '33%' }} />}
           </Row>
         )}
-      />  
+      />
     }
 
     if (entry.type === 'button-list') {
@@ -145,7 +145,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
         renderLabel={o => (
           <Row gap={3}>
             <Text>{o.label}</Text>
-            {o.hasInput && o.value && labels.findIndex((label) => label === o.value)!== -1 &&
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
               <div style={{ width: '33%' }}>
                 <Input
                   name={entry.name}
@@ -158,7 +158,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
                       const newValue = [...value]
                       newValue[customIndex] = v
                       setValue(newValue)
-                    } 
+                    }
                   }}
                   required={true}
                   style={{ height: '30px' }}
@@ -219,7 +219,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
   const isPlanning = useCurrentChatState('isPlaning') ?? false
-  
+
   // when we have a steps but we are not showing any content of the step
   // (because it is a tool and the user has already answered the question)
   // we do not want to show an avatar with empty content, so we hide the entire message
@@ -227,12 +227,12 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const messages = useChatMessages(chat.id)
   const userHasAlreadyAnswered = useMemo(() => {
     const messageIndex = messages.findIndex((messageItem) => messageItem.id === message.id)
-    if (messages.length-1 === messageIndex) return false
-    const nextMessage = messages[messageIndex+1].getValue()
+    if (messages.length - 1 === messageIndex) return false
+    const nextMessage = messages[messageIndex + 1].getValue()
     return nextMessage.agentType === 'user'
   }, [messages, messages.length])
   const isMessageHidden = toolsStep && userHasAlreadyAnswered
-  
+
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
 
@@ -277,7 +277,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     }
   }
 
-  const renderActions = useCallback(()=> <> {entry.actions?.length && (
+  const renderActions = useCallback(() => <> {entry.actions?.length && (
     <div className="actions">
       {entry.actions.map(
         (a, index) => (<>
@@ -357,7 +357,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.length  ||
+  return (entry.content || entry.error || !!entry.steps?.length ||
     entry.upload?.length) && (!isMessageHidden || !toolsStep || isPlanning) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
@@ -371,33 +371,19 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
               {!!entry.badges?.length && <div className="badges">
                 {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
-              
-              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} 
+
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id}
                 userHasAlreadyAnswered={userHasAlreadyAnswered} />}
 
               {renderContent()}
-            
+
             </div>
           )}
-          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder /> }
-          
+          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder />}
+
           {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
         {afterMessage && createElement(afterMessage, { message })}
-        {/* {!!entry.tools?.length && <StackedBadge
-          aria-label={t.openToolsPanel}
-          title={t.openToolsPanel}
-          tabIndex={0}
-          role="button"
-          className="tools-badge"
-          label={t.tools}
-          images={entry.tools.slice(0, 3).map((id) => {
-            const tool = toolById(id, toolKits)
-            return { key: id, name: tool?.name || id, icon: <Icon icon="Cog" />, url: tool?.image }
-          })}
-          onClick={openToolsPanel}
-          style={{ marginTop: '12px', width: 'fit-content' }}
-        />} */}
 
         {!!entry.knowledgeSources?.length && <div className="ks-box">
           <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
@@ -408,36 +394,40 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           ))}</ul>
         </div>}
 
-        {(!!agentsTools?.length || !!entry.tools?.length) && <div className="tools-box">
-          <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
-            {agentsTools?.map((agent) => (
-              <ImageBox key={agent.id} className="agent-info-avatar-resource">
-                <ImageWithFallback
-                  src={agent.avatar ?? undefined}
-                  fallback={<Icon icon="Agent" />}
-                  alt={agent.name}
-                  aria-label={agent.name}
-                  title={agent.name}
-                />
-              </ImageBox>
-            ))}
-            {entry.tools?.map((id) => {
-              const tool = toolById(id, toolKits)
-              return (
-                <ImageBox key={id} className="agent-info-avatar-resource">
+        {(!!agentsTools?.length || !!entry.tools?.length) && 
+          <div className="tools-box">
+            <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
+              {agentsTools?.map((agent) => (
+                <ImageBox key={agent.id} className="agent-info-avatar-resource">
                   <ImageWithFallback
-                    src={tool?.image}
-                    fallback={<Icon icon="Cog" />}
-                    alt={tool?.name}
-                    aria-label={tool?.name}
-                    title={tool?.name}
+                    src={agent.avatar ?? undefined}
+                    fallback={<Icon icon="Agent" />}
+                    alt={agent.name}
+                    aria-label={agent.name}
+                    title={agent.name}
                   />
                 </ImageBox>
-              )})}
-          </Button>
-          <ViewToolsDetails chatId={chat.id} />
-        </div>}
-    
+              ))}
+              {entry?.tools?.map((id) => {
+                if (agentsTools?.some((agent) => agent.id === id)) return null
+                const tool = toolById(id, toolKits)
+                return (
+                  <ImageBox key={id} className="agent-info-avatar-resource">
+                    <ImageWithFallback
+                      src={tool?.image}
+                      fallback={<Icon icon="Cog" />}
+                      alt={tool?.name}
+                      aria-label={tool?.name}
+                      title={tool?.name}
+                    />
+                  </ImageBox>
+                )
+              })}
+            </Button>
+            <ViewToolsDetails chatId={chat.id} />
+          </div>
+        }
+
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (

package/src/views/Chat/StepsList.tsx

@@ -50,14 +50,14 @@ const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | '
   return <Row gap="8px">
     {expand}
     {step.status === 'target' ? <Text className="step-title" appearance="body2" color="light.700">{t.planGoal}:</Text> :
-      <Badge colorScheme="inverse" appearance="square">
+      <Badge colorScheme="inverse" appearance="square" style={{ whiteSpace: 'nowrap' }}>
         {t.step} {index}
       </Badge>}
     <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] }}>
+      <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50], whiteSpace: 'nowrap' }}>
         <Icon icon="Security" />
         {t.pendingReview}
       </Badge>}
@@ -199,7 +199,7 @@ export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolC
   return <>
     {toolStep && tool ? <AnimatedHeight>
       <div className="steps">
-        <Badge colorPalette="yellow" appearance="square">
+        <Badge colorPalette="yellow" appearance="square" style={{ whiteSpace: 'nowrap' }}>
           <Icon icon="StopWatch" />
           <Text>{tool.name} {t.keepWorking}</Text>
         </Badge>
@@ -271,8 +271,8 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
   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])
 
@@ -302,7 +302,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
         <Column gap="8px" mt="8px">
           <Divider colorScheme="light" />
           <Text color="light.700">{planning?.[0]?.user_question}</Text>
-          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' &&  <AwaitingApproval chatId={chatId} />}
+          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
         </Column>
 
         {userHasAlreadyAnswered && planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} />}
@@ -310,7 +310,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
       </div>
     </AnimatedHeight> : null}
 
-    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered && 
+    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered &&
       <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
   </>
   )
@@ -331,7 +331,7 @@ export const ViewToolsDetails = ({ chatId }: { chatId: string }) => {
 
   function openToolsPanel() {
     const messageId = getPlanningMessageId()
-   
+
     if (messageId) {
       widget.set('currentMessageInPanel', { chatId, messageId })
       widget.set('panel', 'steps')

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

package/src/views/MessageInput/ButtonBar.tsx

@@ -30,7 +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 />
+      {features.showLLMSelect && <ModelSwitcher />}
       {isLoading ? (
         <IconButton
           icon="Stop"

package/src/views/MessageInput/index.tsx

@@ -24,7 +24,7 @@ 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 }: 
+export const MessageInput = ({ chatWindowRef, customInputMessage }:
   { chatWindowRef?: React.RefObject<HTMLElement>, customInputMessage?: string }) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
@@ -96,7 +96,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage }:
     if (!checkSendRequirements()) return
 
     // Compose prompt with code block if needed
-    const prompt = code && !quickCommandRegex.test(message ?? '') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message 
+    const prompt = code && !quickCommandRegex.test(message ?? '') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
 
     // Validate prompt length
     if (!checkPromptMaxLength(prompt || '')) return

package/src/views/Resources.tsx

@@ -1,4 +1,4 @@
-import { Accordion, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
+import { Accordion, Column, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -27,9 +27,16 @@ export const Resources = () => {
 }
 
 const StyledAccordion = styled(Accordion)`
+  padding: 8px;
+  margin: 8px;
   &[data-citric="accordion"] {
     background-color: ${theme.color.light[400]};
   }
+  label {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 `
 
 const ResourcesPanel = () => {
@@ -50,11 +57,11 @@ const ResourcesPanel = () => {
   const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId, toolKits])
 
   const header = (image?: string, label?: string) => (
-    <Row gap="10px">
-      <ImageBox>
+    <Row>
+      <ImageBox >
         <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
       </ImageBox>
-      <Text>{label}</Text>
+      <Text style={{ marginLeft: '8px' }}>{label}</Text>
     </Row>
   )
   
@@ -64,23 +71,25 @@ const ResourcesPanel = () => {
         {[...(tools || []), ...(customTools || [])].map(
           (tool) =>
             tool && (
-              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card">
+              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card" maxHeight={120}>
                 {tool?.description}
               </StyledAccordion>
             ))}
       </>
       {
         hasAgentTool && 
-        <>
+        <Column>
           {message?.tools?.map((id) => {
             const agentTool = agentsTools?.find((agent) => agent.id === id)
             return (
-              <StyledAccordion key={id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
-                <AgentDescription  agentId={id} />
+              <StyledAccordion key={agentTool?.id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
+                <Row>
+                  <AgentDescription  agentId={id} />
+                </Row>
               </StyledAccordion>
             )},
           )}
-        </>
+        </Column>
       }
     </>
   )