@stack-spot/ai-chat-widget 0.11.0 → 1.0.0

package/src/views/ChatHistory/HistoryItem.tsx

@@ -1,6 +1,7 @@
 import { IconBox, Input } from '@citric/core'
 import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
 import { IconButton, LoadingCircular } from '@citric/ui'
+import { focusNextIgnoringChildren } from '@stack-spot/portal-components'
 import { aiClient } from '@stack-spot/portal-network'
 import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
 import { theme } from '@stack-spot/portal-theme'
@@ -26,6 +27,7 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
   const [isDeleted, setDeleted] = useState(false)
   const renameInput = useRef<HTMLInputElement>(null)
   const widget = useWidget()
+  const overlayRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (isRenaming) renameInput.current?.focus() 
@@ -52,6 +54,7 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
   }
 
   const onDownload = useCallback(async () => {
+    setTimeout(() => focusNextIgnoringChildren(overlayRef.current), 10)
     setLoading(true)
     try {
       const content = await aiClient.downloadChat.mutate({ conversationId: item.id })
@@ -65,6 +68,7 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
 
   const onDelete = useCallback(async () => {
     setDeleted(true)
+    setTimeout(() => overlayRef.current?.focus(), 10)
     try {
       await aiClient.deleteChat.mutate({ conversationId: item.id })
       aiClient.chats.invalidate()
@@ -124,14 +128,19 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
             ref={renameInput}
             value={renamed}
             onChange={e => setRenamed(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && onSubmitRename()}
+            onKeyDown={(e) => {
+              if (['Enter', 'Escape'].includes(e.key)) {
+                e.key === 'Enter' ? onSubmitRename() : setRenaming(false)
+                setTimeout(() => overlayRef.current?.focus(), 10)
+              }
+            }}
           />
           <IconButton onClick={onSubmitRename}><Check /></IconButton>
         </>
       ) : (
         <>
           <button className="label" onClick={onSelect} disabled={isLoading}>{title}</button>
-          {isLoading ? <LoadingCircular size="xs" /> : <OverlayMenu actions={actions} position="left">
+          {isLoading ? <LoadingCircular size="xs" /> : <OverlayMenu actions={actions} position="left" ref={overlayRef}>
             <IconBox><EllipsisHorizontal /></IconBox>
           </OverlayMenu>}
         </>

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -0,0 +1,210 @@
+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 { 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 { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { quickCommandRegex } from '../../regex'
+import { getUrlToStackSpotAI } from '../../utils/url'
+
+interface Props {
+  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)
+  const chat = useCurrentChat()
+  const [visibility, setVisibility] = useState<VisibilityLevelEnum | undefined>()
+
+  const onSelectQC = useCallback((slug: string) => {
+    const newValue = `/${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>
+  )
+}
+
+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 shouldRender = 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/index.tsx

@@ -4,10 +4,12 @@ import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
 import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { MessageInputFeatures } from '../../features'
+import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ButtonGroup } from './ButtonGroup'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
+import { QuickCommandSelector } from './QuickCommandSelector'
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 
 interface Props {
@@ -23,14 +25,14 @@ export const MessageInput = ({ features }: Props) => {
   const isLoading = useCurrentChatState('isLoading') ?? false
   const value = useCurrentChatState('nextMessage') ?? ''
   const isMinimized = useWidgetState('isMinimized')
-  const elementRef = useRef<HTMLDivElement>(null)
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
 
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
     if (!message) return
     const code = chat.get('codeSelection')
     const language = chat.get('codeLanguage')
-    const prompt = code && !message.startsWith('/') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
+    const prompt = code && !quickCommandRegex.test(message) ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
     chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
     chat.set('nextMessage', '')
     setFocused(false)
@@ -44,15 +46,17 @@ export const MessageInput = ({ features }: Props) => {
   }, [onSend])
 
   useEffect(() => {
-    if (!isLoading) elementRef.current?.querySelector('textarea')?.focus()
+    if (!isLoading) textAreaRef.current?.focus()
   }, [isLoading])
 
   return (
-    <MessageInputBox ref={elementRef} aria-busy={isLoading} className="message-input">
+    <MessageInputBox aria-busy={isLoading} className="message-input">
       <ProgressBar visible={isLoading} shimmer />
       <InfoBar />
       <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
+        <QuickCommandSelector inputRef={textAreaRef} />
         <AdaptiveTextArea
+          ref={textAreaRef}
           disabled={isLoading}
           placeholder={t.placeholder}
           onChange={e => chat.set('nextMessage', e.target.value)}

package/src/views/MessageInput/styled.ts

@@ -82,6 +82,7 @@ export const MessageInputBox = styled.div`
 
   .action-box {
     display: flex;
+    position: relative;
     flex-direction: row;
     gap: 4px;
     align-items: end;
@@ -201,4 +202,140 @@ 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;
+          }
+        }
+      }
+    }
+  }
 `