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

package/src/views/Chat/styled.ts

@@ -243,20 +243,27 @@ export const ChatList: IStyledComponentBase<
   }
 
   .steps {
-    ul {
+    .steps-list {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 6px;
+    }
 
-      li {
-        display: flex;
-        flex-direction: row;
-        gap: 4px;
-        align-items: center;
+    .tools-list {
+      list-style: disc;
+      margin: 0;
+      padding-left: 24px;
+      display: block;
+      ::marker {
+        color: ${theme.color.light.contrastText};
+      }
+    }
 
+    ul {
+      li {
         &[role="button"] {
           cursor: pointer;
         }
@@ -275,7 +282,6 @@ export const ChatList: IStyledComponentBase<
         }
 
         .step-title {
-          line-height: 0.75rem;
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
@@ -285,8 +291,10 @@ export const ChatList: IStyledComponentBase<
       }
     }
 
-    .step-actions {
-      margin-top: 8px;
+  }
+
+  .step-actions {
+      margin-top: 16px;
       display: flex;
       gap: 6px;
 
@@ -296,7 +304,6 @@ export const ChatList: IStyledComponentBase<
         align-items: center;
       }
     }
-  }
 
   .markdown img {
     max-width: 70%;

package/src/views/MessageInput/AgentSelector.tsx

@@ -56,20 +56,15 @@ export const AgentSelector = ({ inputRef, isTrial }: {
 
   const getAgents = () => {
     if (spotId) {
-      return workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId: spotId }, { 
-        enabled: isAgentEnabled }) as AgentResponseWithBuiltIn[]
+      return workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId: spotId }) as AgentResponseWithBuiltIn[]
     }
 
     if (isTrial) {
-      return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in', 'recently_used'] }, {
-        enabled: isAgentEnabled,
-      })
+      return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in', 'recently_used'] })
     }
 
     return agentToolsClient.allAgents.useQuery({
       visibilities: ['account', 'shared', 'personal', 'built_in', 'recently_used', 'workspace'],
-    }, {
-      enabled: isAgentEnabled,
     })
   }
 

package/src/views/MessageInput/ButtonAgent.tsx

@@ -8,11 +8,11 @@ import { useMessageInputDictionary } from './dictionary'
 
 export const ButtonAgent = () => {
   const t = useMessageInputDictionary()
+  const agentDefault = agentToolsClient.agentDefault.useQuery()
   const widget = useWidget()
   const chat = useCurrentChat()
   const agent = useCurrentChatState('agent')
   const features = useCurrentChatState('features')
-  const [agentDefault] = agentToolsClient.agentDefault.useStatefulQuery({ enabled: features.agent })
 
   const setAgentDefault = () => {
     agentDefault && chat.set(

package/src/views/MessageInput/ButtonBar.tsx

@@ -13,10 +13,9 @@ interface SelectionBarProps {
    * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
    */
   isLoading?: boolean,
-  customButtonBarItems?: React.ReactNode,
 }
 
-export const ButtonBar = ({ onSend, isLoading, customButtonBarItems }: SelectionBarProps) => {
+export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()
   const widget = useWidget()
@@ -29,7 +28,6 @@ export const ButtonBar = ({ onSend, isLoading, customButtonBarItems }: Selection
         {features.editor && (
           <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
         )}
-        {customButtonBarItems}
       </Row>
       {isLoading ? (
         <IconButton

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