@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/MessageInput/styled.ts

@@ -1,27 +1,82 @@
-import { IconButton } from '@citric/ui'
+import { Flex } from '@citric/core'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
-const INFO_BAR_HEIGHT = 42
-const INFO_BAR_DISPLACEMENT = 4
-export const MAX_INPUT_HEIGHT = 300
+const CONTEXT_BAR_HEIGHT = 38
+const CONTEXT_BAR_DISPLACEMENT = 4
+const UPLOAD_BAR_HEIGHT = 60
+const UPLOAD_BAR_DISPLACEMENT = 4
 export const MIN_INPUT_HEIGHT = 24
 
+export const SelectionBarWrapper = styled.div`
+  display: inline-flex;
+  justify-content: space-between;
+  position: relative;
+  padding: 8px;
+  background-color: ${theme.color.light[500]};
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top: none;
+
+  .selection-list {
+    opacity: 0;
+    transition: height 0.4s, opacity 0.3s;
+  }
+  .visible {
+    opacity: 1;
+  }
+
+  .selection-list-content {
+    background-color: ${theme.color.light[500]};
+  }
+  
+  ul { 
+    list-style: none;
+    padding: 0;
+    margin: 12px;
+    min-width: 225px;
+  }
+  li {
+    cursor: pointer;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+    &:hover {
+      background-color: ${theme.color.light[600]}
+    }
+    a:hover {
+      background-color: ${theme.color.light[600]}
+    }
+  }
+`
+
 export const MessageInputBox = styled.div`
   display: flex;
   flex-direction: column;
 
   > .info-bar {
-    margin-top: 8px;
     position: relative;
     overflow: hidden;
 
     &.visible {
       > .space {
-        height: ${INFO_BAR_HEIGHT - INFO_BAR_DISPLACEMENT}px;
+        height: var(--space-height, 'auto');
       }
     }
 
+    > .aria-live {
+       position: absolute;
+       width: 1px;
+       height: 1px;
+       margin: -1px;
+       padding: 0;
+       overflow: hidden;
+       clip: rect(0 0 0 0);
+       white-space: nowrap;
+       border: 0;
+    }
+
     > .space {
       height: 0;
       transition: height 0.4s;
@@ -32,18 +87,19 @@ export const MessageInputBox = styled.div`
       top: 0;
       left: 0;
       right: 0;
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
-      height: ${INFO_BAR_HEIGHT}px;
-      padding: 0 4px;
+      height: var(--content-height, 'auto');
+      padding-top: 8px;
       background-color: ${theme.color.light[500]};
       display: flex;
       flex-direction: row;
-      align-items: center;
-      gap: 6px;
+      gap: 4px;
 
       .list-overflow {
-        max-width: calc(100% - 30px); // close button + gap
+        max-width: calc(100% - var(--list-margins, 0px));
+        height: 24px;
+        &:first-child {
+          margin-left: 0.25rem; // space added to the left when the close all button isn't rendered
+        }
       }
 
       ul {
@@ -55,51 +111,79 @@ export const MessageInputBox = styled.div`
         align-items: center;
         gap: 6px;
       }
+    }
+  }
 
-      .info-badge > span {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 4px;
-        line-height: 0.75rem;
-        white-space: nowrap;
-
-        ${IconButton} {
-          padding: 4px 0;
-          background: none;
-          border: none;
-          width: auto;
-          height: auto;
+  > .context-bar {
+    --space-height: ${CONTEXT_BAR_HEIGHT - CONTEXT_BAR_DISPLACEMENT}px;
+    --content-height: ${CONTEXT_BAR_HEIGHT}px;
+    --list-margins: 30px; // close button width + gap
 
-          svg {
-            width: auto;
-            height: 12px;
-          }
+    .context-badge > span {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4px;
+      line-height: 0.75rem;
+      white-space: nowrap;
+
+      /* $ {IconButton} {
+        padding: 4px 0;
+        background: none;
+        border: none;
+        width: auto;
+        height: auto;
+
+        svg {
+          width: auto;
+          height: 12px;
         }
-      }
+      } */
     }
   }
 
-  .action-box {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: end;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.light[500]};
-    background-color: ${theme.color.light[300]};
-    padding: 8px 10px;
-    transition: border-color 0.3s, background-color 0.3s;
+  > .upload-bar {
+    --space-height: ${UPLOAD_BAR_HEIGHT - UPLOAD_BAR_DISPLACEMENT}px;
+    --content-height: ${UPLOAD_BAR_HEIGHT}px;
+    --list-margins: 12px; // margins from .list-overflow
 
-    &.focused {
-      border-color: ${theme.color.primary[500]};
+    .list-overflow {
+      margin: 0 6px !important;
+      .scroll-to-left, .scroll-to-right {
+        top: 11px;
+      }
     }
 
-    &.disabled {
-      background-color: ${theme.color.light[500]};
+    input[type="file"] {
+      display: none;
+    }
+  }
+
+  .wrapper-action {
+    position: relative;
+
+    .action-box {
+      display: flex;
+      position: relative;
+      flex-direction: row;
+      gap: 8px;
+      align-items: end;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border: 2px solid ${theme.color.light[300]};
+      
+      background-color: ${theme.color.light[300]};
+      padding: 10px 8px;
+      transition: border-color 0.3s, background-color 0.3s;
     }
   }
 
+  [data-citric="progress-bar"] {
+    background-color: ${theme.color.light[500]};
+    border: 0;
+    padding: 0;
+  }
+
   .button-group {
     display: flex;
     flex-direction: row;
@@ -110,48 +194,18 @@ export const MessageInputBox = styled.div`
     button {
       border: none;
       border-radius: 2px;
-      opacity: 0.6;
       transition: background-color 0.2s, opacity 0.2s;
-      background-color: transparent;
       padding: 0;
 
-      svg {
-        fill: ${theme.color.light[700]};
-        width: 16px;
-        height: 16px;
-      }
-
-      &:hover {
-        background-color: ${theme.color.light[500]};
-      }
-
-      &.send {
-        background-color: ${theme.color.inverse[500]};
-        &:hover {
-          opacity: 1;
-        }
-        svg {
-          fill: ${theme.color.inverse.contrastText};
-        }
-      }
-
-      &.expand {
-        svg {
-          transition: transform 0.3s;
-        }
-      }
-
-      &.collapsed {
-        svg {
-          transform: rotate(180deg);
+      &.agent {
+        border-radius: 50%; 
+        opacity: 1;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
         }
       }
-
-      &.agent img {
-        width: 80%;
-        height: 80%;
-        border-radius: 50%;
-      }
     }
 
     .feature-buttons {
@@ -182,9 +236,56 @@ export const MessageInputBox = styled.div`
       }
     }
 
-    ${IconButton} {
+    /* $ {IconButton} {
       width: 24px;
       height: 24px;
+    } */
+
+    .group-agent {
+      display: flex;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;     
+      
+        button  {
+          margin-right: -0.5rem;
+          margin-left: -0.5rem;
+          border-radius: 50%;
+          background-color: ${theme.color.light[300]};
+          border: 1px solid ${theme.color.light[600]};
+          display: flex;
+
+          &.agent-selected:hover:before  {
+            content: '';
+            width: 22px;
+            height: 22px;
+            position: absolute;
+            background-color: ${theme.color.light[300]};
+            border-radius: 100%;
+            opacity: 0.4;
+          }
+
+          .icon-remove {
+            display: none;
+            fill: ${theme.color.light.contrastText};
+            position: absolute;          
+          }   
+
+          &:hover .icon-remove {
+            display: flex;            
+          }
+
+          .image {
+            margin: 1px;        
+          }
+      }
+    }
+  }
+
+  .message-menu {
+    position: absolute;
+    bottom: 34px;
+    .upload-item {
+      border-top: 1px solid ${theme.color.light[600]};
     }
   }
 
@@ -198,7 +299,47 @@ export const MessageInputBox = styled.div`
     transition: height 0.3s;
     background-color: transparent;
     &:focus {
-      box-shadow: none;
+      box-shadow: none !important;
+    }
+    &:disabled {
+      background-color: transparent !important;
+      opacity: 0.6;
+    }
+  }
+`
+
+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/MinimizedHeader.tsx

@@ -1,12 +1,10 @@
-import { Text } from '@citric/core'
-import { ChevronDown, Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useRef, useState } from 'react'
 import { styled } from 'styled-components'
 import { FadingOverflow } from '../components/FadingOverflow'
-import { useChatState, useChatTabs } from '../context/hooks'
+import { useCurrentChatState } from '../context/hooks'
 import { MinimizedActions } from '../types'
 
 const Header = styled.header`
@@ -24,6 +22,7 @@ const Header = styled.header`
     white-space: nowrap;
     max-width: calc(100% - 78px); // size of the button-group + gap
     height: 15px; // fixes weird problem where the text has 14px instead of 15px of height
+    line-height: 1;
   }
 
   .button-group {
@@ -47,10 +46,13 @@ const Header = styled.header`
   }
 `
 
+/**
+ * When the chat is minimized, there's no chat selection, i.e. the tabs are not rendered. In place of the tabs this header with the current
+ * chat name and buttons to collapse and close is rendered.
+ */
 export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActions) => {
   const t = useTranslate(dictionary)
-  const { active } = useChatTabs()
-  const label = useChatState(active, 'label')
+  const label = useCurrentChatState('label')
   const [collapsed, setCollapsed] = useState(false)
   const ref = useRef<HTMLElement>(null)
   const showButtons = onClose || onCollapse || onExpand
@@ -66,14 +68,13 @@ export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActi
       <FadingOverflow className="title"><Text title={label}>{label}</Text></FadingOverflow>
       {showButtons && <div className="button-group">
         {(onExpand || onCollapse) && <IconButton
+          icon="ChevronDown"
           title={collapsed ? t.expand : t.collapse}
           aria-label={collapsed ? t.expand : t.collapse}
           className={listToClass(['collapse', collapsed && 'collapsed'])}
           onClick={toggleCollapsed}
-        >
-          <ChevronDown />
-        </IconButton>}
-        {onClose && <IconButton title={t.close} aria-label={t.close} onClick={onClose}><Times /></IconButton>}
+        />}
+        {onClose && <IconButton icon="Times" title={t.close} aria-label={t.close} onClick={onClose} />}
       </div>}
     </Header>
   )

package/src/views/Resources.tsx

@@ -0,0 +1,108 @@
+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'
+import { useEffect, useMemo } from 'react'
+import { styled } from 'styled-components'
+import { useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { toolById } from '../utils/tools'
+import { AgentDescription } from './Agents/AgentDescription'
+
+export const Resources = () => {
+  const t = useTranslate(dictionary)
+  const panel = useWidgetState('panel')
+  const message = useWidgetState('currentMessageInPanel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'resources' && message) open(
+      <ResourcesPanel key={message.messageId} />,
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+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 = () => {
+  const { chatId, messageId } = useWidgetState('currentMessageInPanel') ?? {}
+  const widget = useWidget()
+  const message = useMemo(() => {
+    const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
+    return chat?.getMessages().find(m => m.id === messageId)?.getValue()
+  }, [messageId])
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
+    { enabled: !!message?.agent?.id })
+  const toolkits = useMemo(() => [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ], [agent])
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolkits)), [messageId, toolkits])
+  const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery({ searchAgentsRequest:{ ids: message?.tools || [] } })
+  const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId])
+
+  const header = (image?: string, label?: string) => (
+    <Row>
+      <ImageBox>
+        <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
+      </ImageBox>
+      <Text style={{ marginLeft: '8px' }}>{label}</Text>
+    </Row>
+  )
+
+  return !!tools?.length && (
+    <>
+      <>
+        {tools.map(
+          (tool) =>
+            tool && (
+              <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={agentTool?.id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
+                <Row>
+                  <AgentDescription  agentId={id} />
+                </Row>
+              </StyledAccordion>
+            )},
+          )}
+        </Column>
+      }
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Resources',
+    description: 'These are the resources used to generate this answer.',
+  },
+  pt: {
+    title: 'Recursos',
+    description: 'Esses são os recursos usados pra gerar essa resposta.',
+  },
+} satisfies Dictionary