@stack-spot/ai-chat-widget 1.6.0 → 1.7.0-beta.1

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,218 +1,34 @@
-import { IconBox, Text } from '@citric/core'
-import { ExternalLink, QuickCommand } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { useKeyboardControls } from '@stack-spot/portal-components'
+import { QuickCommand } from '@citric/icons'
 import { aiClient } from '@stack-spot/portal-network'
-import { QuickCommandListResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Fading } from '../../components/Fading'
-import { FallbackBoundary } from '../../components/FallbackBoundary'
+import { QuickCommandListResponse } from '@stack-spot/portal-network/api/ai'
+import { useCallback } from 'react'
+import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
-import { getUrlToStackSpotAI } from '../../utils/url'
 
-interface Props {
-  /**
-   * A reference to the input this quick commands panel is attached to.
-   */
-  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
-}
-
-interface ContentProps extends Props {
-  filter?: string,
-  onClose: () => void,
-}
-
-interface ListProps {
-  filter?: string,
-  visibility?: VisibilityLevelEnum,
-  onSelect: (slug: string) => void,
-}
-
-interface ItemProps {
-  qc: QuickCommandListResponse,
-  onSelect: (slug: string) => void,
-}
-
-const sections = [undefined, 'personal', 'workspace', 'account', 'shared'] as const
-
-const CommandListItem = ({ qc, onSelect }: ItemProps) => {
-  const t = useTranslate(dictionary)
-  return (
-    <li>
-      <button
-        className="qc"
-        onClick={() => onSelect(qc.slug)}
-        // the following line prevents a new line character in the message when the user presses enter to select a qc.
-        onKeyDown={e => e.key === 'Enter' && e.preventDefault()}
-        onFocus={e => e.target.closest('li')?.classList.add('focus')}
-        onBlur={e => e.target.closest('li')?.classList.remove('focus')}
-      >
-        <p className="qc-title">/{qc.slug}</p>
-        <p className="qc-description">{qc.description}</p>
-      </button>
-      <IconButton as="a" title={t.openQC} aria-label={t.openQC} href={`${getUrlToStackSpotAI()}/quick-command/${qc.slug}`} target="_blank">
-        <ExternalLink />
-      </IconButton>
-    </li>
-  )
-}
-
-const CommandList = ({ filter, visibility, onSelect }: ListProps) => {
-  const t = useTranslate(dictionary)
-  const quickCommands = aiClient.quickCommands.useQuery({ order: 'a-to-z' })
-  let filtered = quickCommands
-
-  if (visibility || filter) {
-    const lowerFilter = filter?.toLocaleLowerCase()
-    filtered = quickCommands.filter(
-      qc => (!lowerFilter || qc.slug.toLocaleLowerCase().startsWith(lowerFilter)) && (!visibility || qc.visibility_level === visibility),
-    )
-  }
-  if (!quickCommands.length) return <Text className="empty" colorScheme="light.700">{t.noData}</Text>
-  if (!filtered.length) return <Text className="empty" colorScheme="light.700">{t.noResults}</Text>
-  return (
-    <ul className="command-list">
-      {filtered.map(qc => <CommandListItem key={qc.id} qc={qc} onSelect={onSelect} />)}
-    </ul>
-  )
-}
-
-const SelectorContent = ({ filter, onClose, inputRef }: ContentProps) => {
-  const t = useTranslate(dictionary)
-  const ref = useRef<HTMLDivElement>(null)
+export const QuickCommandSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
-  const [visibility, setVisibility] = useState<VisibilityLevelEnum | undefined>()
 
-  const onSelectQC = useCallback((slug: string) => {
-    const newValue = `/${slug}`
+  const onSelectItem = useCallback((qc: QuickCommandListResponse) => {
+    const newValue = `/${qc.slug}`
     chat.set('nextMessage', newValue)
-    onClose()
+
     if (!inputRef.current) return
-    // the following line prevents bugs by setting the text area value before react gets the chance to.
     inputRef.current.value = newValue
     inputRef.current.focus()
   }, [])
 
-  useKeyboardControls({
-    querySelectors: '.tabs button, button.qc',
-    disableTabBehavior: true,
-    onPressEscape: onClose,
-    onPressArrowLeft: () => (ref.current?.querySelector('.tabs button.active') as HTMLElement)?.focus(),
-    onPressArrowRight: () => (ref.current?.querySelector('button.qc') as HTMLElement)?.focus(),
-    ref,
-  }, [])
-
-  function createSectionItem(action: VisibilityLevelEnum | undefined) {
-    return (
-      <li key={action ?? 'all'}>
-        <button className={visibility === action ? 'active' : ''} onFocus={() => setVisibility(action)}>
-          {t[action || 'all']}
-        </button>
-      </li>
-    )
-  }
-  
-  return (
-    <div ref={ref}>
-      <header>
-        <IconBox><QuickCommand /></IconBox>
-        <Text as="h3">QUICK COMMANDS</Text>
-      </header>
-      <div className="body">
-        <ul className="tabs">{sections.map(createSectionItem)}</ul>
-        <FallbackBoundary message={t.error} mini>
-          <CommandList onSelect={onSelectQC} filter={filter} visibility={visibility} />
-        </FallbackBoundary>
-      </div>
-    </div>
-  )
+  return <Selector
+    inputRef={inputRef}
+    selectorConfig={{
+      resourceName: 'Quick Command',
+      shortcut: '/',
+      icon: <QuickCommand />,
+      url: '/quick-command/',
+      regex: quickCommandRegex,
+      data: () => aiClient.quickCommands.useQuery({ order: 'a-to-z' }),
+      isEnabled: useCurrentChatState('features').quickCommands,
+      onSelect: onSelectItem,
+    }}
+  />
 }
-
-/**
- * This renders the floating Quick Commands panel that allows the user to select a quick command. This appears whenever the user types "/"
- * in the textarea.
- */
-export const QuickCommandSelector = ({ inputRef }: Props) => {
-  const value = useCurrentChatState('nextMessage') ?? ''
-  const filter = useMemo(() => value === '/' || quickCommandRegex.test(value) ? value.substring(1) : undefined, [value])
-  const [isClosed, setClosed] = useState(false)
-  const selectorRef = useRef<HTMLDivElement>(null)
-  const isEnabled = useCurrentChatState('features').quickCommands
-  const shouldRender = isEnabled && filter !== undefined && !isClosed
-
-  // Resets the closed state whenever the message input is cleared
-  useEffect(() => {
-    if (!value) setClosed(false)
-  }, [value])
-
-  // Creates the following behavior while the user types in the message input:
-  // auto-complete on tab; move focus to the qc panel on press up or down; and close the qc panel on esc.
-  useEffect(() => {
-    function getFirst() {
-      return selectorRef.current?.querySelector('.qc') as HTMLElement | null
-    }
-
-    function onKeyDown(event: Event) {
-      const key = (event as KeyboardEvent).key
-      if (!selectorRef.current) return
-      if (key === 'Tab') {
-        getFirst()?.click()
-        event.preventDefault()
-      }
-      else if (key === 'ArrowDown' || key === 'ArrowUp') {
-        getFirst()?.focus()
-        event.preventDefault()
-      }
-      if (key === 'Escape') {
-        setClosed(true)
-      }
-    }
-
-    inputRef.current?.addEventListener('keydown', onKeyDown)
-    return () => inputRef.current?.removeEventListener('keydown', onKeyDown)
-  }, [])
-
-  // Closes the panel when the user clicks outside the qc panel or the message input.
-  useEffect(() => {
-    if (!shouldRender) return
-    function onClickOut(e: Event) {
-      const target = e.target as HTMLElement | null
-      if (!selectorRef.current?.contains(target) && !inputRef.current?.contains(target)) setClosed(true)
-    }
-    document.addEventListener('click', onClickOut)
-    return () => document.removeEventListener('click', onClickOut)
-  }, [shouldRender])
-
-  return (
-    <Fading visible={shouldRender} ref={selectorRef} className="quick-command-selector">
-      <SelectorContent filter={filter} onClose={() => setClosed(true)} inputRef={inputRef} />
-    </Fading>
-  )
-}
-
-const dictionary = {
-  en: {
-    all: 'All',
-    personal: 'Personal',
-    account: 'Account',
-    shared: 'Shared',
-    workspace: 'Workspace',
-    error: 'Could not load the quick commands.',
-    noData: 'You don\'t have any quick command yet.',
-    noResults: 'There are no quick commands to show here.',
-    openQC: 'Open this quick command\'s settings in a new tab.',
-  },
-  pt: {
-    all: 'Todos',
-    personal: 'Pessoal',
-    account: 'Conta',
-    shared: 'Compartilhado',
-    workspace: 'Workspace',
-    error: 'Não foi possível carregar os quick commands.',
-    noData: 'Você ainda não possui quick commands.',
-    noResults: 'Não há quick commands para mostrar aqui.',
-    openQC: 'Abra as configurações deste quick command em uma nova aba.',
-  },
-} satisfies Dictionary

package/src/views/MessageInput/dictionary.ts

@@ -10,7 +10,7 @@ const dictionary = {
     collapse: 'Hide buttons',
     expand: 'Show buttons',
     send: 'Send message',
-    placeholder: 'Type your prompt',
+    placeholder: 'Message to %s',
     cancel: 'Cancel',
     removeConfig: 'Remove all the configuration',
     removeStack: 'Stop using the current stack',
@@ -18,6 +18,7 @@ const dictionary = {
     removeKS: 'Stop using this knowledge source',
     selected: 'Selected',
     removeSelection: 'Remove current code selection',
+    remove: 'Remove',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -28,7 +29,7 @@ const dictionary = {
     collapse: 'Esconder botões',
     expand: 'Mostrar botões',
     send: 'Enviar mensagem',
-    placeholder: 'Digite sua pergunta',
+    placeholder: 'Mensagem para %s',
     cancel: 'Cancelar',
     removeConfig: 'Remover todas as configurações',
     removeStack: 'Parar de usar a stack atual',
@@ -36,6 +37,7 @@ const dictionary = {
     removeKS: 'Parar de usar este knowledge source',
     selected: 'Selecionado',
     removeSelection: 'Desfazer seleção de código',
+    remove: 'Remover',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/index.tsx

@@ -5,6 +5,8 @@ import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
+import { AgentSelector } from './AgentSelector'
+import { ButtonAgent } from './ButtonAgent'
 import { ButtonGroup } from './ButtonGroup'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
@@ -26,7 +28,8 @@ export const MessageInput = () => {
   const value = useCurrentChatState('nextMessage') ?? ''
   const isMinimized = useWidgetState('isMinimized')
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
-
+  const agentLabel = useCurrentChatState('agent')?.label ?? 'Stackspot AI'
+  
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
     if (!message) return
@@ -53,12 +56,14 @@ export const MessageInput = () => {
     <MessageInputBox aria-busy={isLoading} className="message-input">
       <ProgressBar visible={isLoading} shimmer />
       <InfoBar />
+      <QuickCommandSelector inputRef={textAreaRef} />
+      <AgentSelector inputRef={textAreaRef} />
       <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
-        <QuickCommandSelector inputRef={textAreaRef} />
+        <ButtonAgent />
         <AdaptiveTextArea
           ref={textAreaRef}
           disabled={isLoading}
-          placeholder={t.placeholder}
+          placeholder={t.placeholder.replace('%s', agentLabel)}
           onChange={e => chat.set('nextMessage', e.target.value)}
           value={value}
           onFocus={() => setFocused(true)}

package/src/views/MessageInput/styled.ts

@@ -88,12 +88,12 @@ export const MessageInputBox = styled.div`
     display: flex;
     position: relative;
     flex-direction: row;
-    gap: 4px;
+    gap: 8px;
     align-items: end;
     border-radius: 4px;
     border: 1px solid ${theme.color.light[500]};
     background-color: ${theme.color.light[300]};
-    padding: 8px 10px;
+    padding: 10px 8px;
     transition: border-color 0.3s, background-color 0.3s;
 
     &.focused {
@@ -150,12 +150,16 @@ export const MessageInputBox = styled.div`
         svg {
           transform: rotate(180deg);
         }
-      }
-
-      &.agent img {
-        width: 80%;
-        height: 80%;
-        border-radius: 50%;
+      } 
+
+      &.agent {
+        border-radius: 50%; 
+        opacity: 1;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
       }
     }
 
@@ -191,6 +195,45 @@ export const MessageInputBox = styled.div`
       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;        
+          }
+      }
+    }
   }
 
   textarea {
@@ -206,140 +249,4 @@ export const MessageInputBox = styled.div`
       box-shadow: none;
     }
   }
-
-  .quick-command-selector {
-    position: absolute;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.light[600]};
-    background-color: ${theme.color.light[500]};
-    box-shadow: 0px 2px 16px 0px #0000005C;
-    display: flex;
-    flex-direction: column;
-    width: 480px;
-    bottom: 55px;
-
-    .loading, .error {
-      padding-bottom: 26px;
-      p {
-        width: 200px;
-        text-align: center;
-        line-height: 20px;
-      }
-    }
-
-    .empty {
-      padding-bottom: 26px;
-      width: 200px;
-      text-align: center;
-      line-height: 20px;
-      margin: auto;
-    }
-
-    header {
-      display: flex;
-      flex-direction: row;
-      gap: 8px;
-      align-items: center;
-      padding: 8px;
-      font-family: 'San Francisco';
-      font-weight: 500;
-      font-size: 11px;
-    }
-
-    .body {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-
-    ul.tabs {
-      display: flex;
-      flex-direction: column;
-
-      li {
-        display: flex;
-        flex-direction: column;
-      }
-
-      button {
-        box-sizing: border-box;
-        color: ${theme.color.light[700]};
-        text-align: left;
-        padding: 10px;
-        font-weight: 600;
-        font-size: 12px;
-        transition: background-color 0.3s;
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
-        background-color: transparent;
-        border: none;
-        cursor: pointer;
-        outline: none;
-
-        &:hover, &.active, &:focus {
-          background-color: ${theme.color.light[600]};
-        }
-
-        &.active {
-          border-left: 1px solid ${theme.color.light.contrastText};
-          color: ${theme.color.light.contrastText};
-        }
-      }
-    }
-
-    ul.command-list {
-      align-self: stretch;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      overflow-y: auto;
-      flex: 1;
-      max-height: 170px;
-
-      li {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-        padding: 8px;
-        border-radius: 4px;
-
-        &:hover, &.focus {
-          background-color: ${theme.color.light[600]};
-        }
-
-        button.qc {
-          flex: 1;
-          border: none;
-          text-align: left;
-          background-color: transparent;
-          text-align: left;
-          outline: none;
-          overflow: hidden;
-          cursor: pointer;
-          
-          .qc-title {
-            font-size: 11px;
-            margin: 0 0 4px 0;
-            color: ${theme.color.light.contrastText};
-            text-transform: uppercase;
-            text-overflow: ellipsis;
-            overflow: hidden;
-          }
-
-          .qc-description {
-            color: ${theme.color.light[700]};
-            font-size: 12px;
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
 `