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

package/src/state/ChatState.ts

@@ -1,4 +1,6 @@
 import { dropRight, last, pull } from 'lodash'
+import { ulid } from 'ulid'
+import { AbortedError } from '../AbortedError'
 import { ChatEntry } from './ChatEntry'
 import { ObservableState } from './ObservableState'
 import { Labeled, LabeledWithImage } from './types'
@@ -27,7 +29,9 @@ export interface ChatProperties {
 
 type ChatMessagesListener = (chat: ChatEntry[]) => void
 
-export type MessageInterceptor = (entry: ChatEntry, chat: ChatState) => boolean | undefined | void | Promise<boolean | undefined | void>
+export type MessageInterceptor = (
+  entry: ChatEntry, chat: ChatState, signal: AbortSignal,
+) => boolean | undefined | void | Promise<boolean | undefined | void>
 
 interface Options {
   id: string,
@@ -41,6 +45,8 @@ export class ChatState extends ObservableState<ChatProperties> {
   private entries: ChatEntry[]
   private messagesListeners: ChatMessagesListener[] = []
   private readonly interceptors: MessageInterceptor[]
+  interceptorMemory = new Map<string, any>()
+  private abortions: AbortController[] = []
 
   /**
    * @param id the id of the chat.
@@ -62,10 +68,18 @@ export class ChatState extends ObservableState<ChatProperties> {
   }
 
   private async runInterceptors(entry: ChatEntry) {
+    const abort = new AbortController()
+    this.abortions.push(abort)
     for (const interceptor of this.interceptors) {
-      const result = await interceptor(entry, this)
-      if (result === false) break
+      try {
+        const result = await interceptor(entry, this, abort.signal)
+        if (result === false) break
+      } catch (error) {
+        pull(this.abortions, abort)
+        throw error
+      }
     }
+    pull(this.abortions, abort)
   }
 
   pushMessage(...entries: ChatEntry[]) {
@@ -90,4 +104,28 @@ export class ChatState extends ObservableState<ChatProperties> {
       pull(this.messagesListeners, listener)
     }
   }
+
+  /**
+   * Aborts all currently running chat interceptors.
+   */
+  abort() {
+    this.abortions.forEach(a => a.abort(new AbortedError()))
+    this.abortions = []
+  }
+
+  /**
+   * Creates a chat that has the same state value and interceptors as this one.
+   * 
+   * All abortions from this chat will be transferred to the new chat. The abortions of this chat will be cleared.
+   */
+  transferToNewChat(label: string) {
+    const newChat = new ChatState({
+      id: ulid(),
+      initial: { ...this.state, label },
+      interceptors: this.interceptors,
+    })
+    newChat.abortions = this.abortions
+    this.abortions = []
+    return newChat
+  }
 }

package/src/state/ObservableState.ts

@@ -7,7 +7,7 @@ type Listeners<T> = {
 }
 
 export class ObservableState<T> {
-  private state: T
+  protected state: T
   private listeners: Listeners<T> = {}
 
   constructor(initial: T) {

package/src/utils/chat.ts

@@ -2,6 +2,7 @@ import { FixedChatRequest } from '@stack-spot/portal-network'
 import { ulid } from 'ulid'
 import { ChatState, MessageInterceptor } from '../state/ChatState'
 import { WidgetState } from '../state/WidgetState'
+import { defaultLanguage } from './programming-languages'
 
 let next = 1
 
@@ -17,13 +18,13 @@ export function buildConversationContext(state: ChatState): FixedChatRequest['co
     workspace: state.get('workspace')?.id,
     conversation_id: state.id,
     stack_id: state.get('stack')?.id,
-    language: state.get('codeLanguage'),
+    language: state.get('codeLanguage') || (state.get('codeSelection') ? defaultLanguage : undefined),
     knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
     agent_id: state.get('agent')?.id,
     agent_built_in: state.get('agent')?.builtIn,
     os: navigator.userAgent,
     platform: 'web-widget',
     platform_version: navigator.userAgent,
-    stackspot_ai_version: 'alpha',
+    stackspot_ai_version: '1.0.0',
   }
 }

package/src/utils/knowledge-source.ts

@@ -1,4 +1,4 @@
-import { DocumentResponse, SourceKnowledgeSource4, SourceProjectFile4, SourceStackAi } from '@stack-spot/portal-network/api/ai'
+import { DocumentResponse, SourceKnowledgeSource, SourceProjectFile4, SourceStackAi } from '@stack-spot/portal-network/api/ai'
 import { KnowledgeSource } from '../state/ChatEntry'
 
 function attemptToParseMalFormedJson(str: string) {
@@ -44,12 +44,10 @@ export function extractCodeFromKSDocument(document: DocumentResponse): { languag
 }
 
 export function genericSourcesToKnowledgeSources(
-  sources: (SourceStackAi | SourceKnowledgeSource4 | SourceProjectFile4)[] | undefined,
+  sources: (SourceStackAi | SourceKnowledgeSource | SourceProjectFile4)[] | undefined,
 ): KnowledgeSource[] | undefined {
-  return sources?.filter(s => s.type === 'knowledge_source').map(ks => ({
-    documentId: ks.document_id,
-    documentScore: ks.document_score,
-    name: ks.name,
-    slug: ks.slug,
-  }))
+  return sources?.filter(s => s.type === 'knowledge_source').map(ks => {
+    const { document_id: documentId, document_score: documentScore, name, slug } = ks as SourceKnowledgeSource
+    return { documentId, documentScore, name, slug }
+  })
 }

package/src/utils/programming-languages.ts

@@ -1,3 +1,5 @@
+export const defaultLanguage = 'python'
+
 export const languages = [
   {
     'value': 'abap',

package/src/utils/string.ts

@@ -0,0 +1,6 @@
+// gets the size of a string removing control characters and spaces
+export function getSizeOfString(str: string): number {
+  // eslint-disable-next-line no-control-regex
+  const withoutSpacesAndControls = str.replace(/[\u0000-\u001F\u007F-\u009F\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069\s]/g, '')
+  return withoutSpacesAndControls.length
+}

package/src/utils/url.ts

@@ -0,0 +1,8 @@
+const stkAIDomain = /^https:\/\/ai(\.\w+)?\.stackspot\.com$/
+const localhostDomain = /^http:\/\/localhost:\d+$/
+const aiPrd = 'https://ai.stackspot.com'
+
+export function getUrlToStackSpotAI() {
+  const current = location.origin
+  return stkAIDomain.test(current) || localhostDomain.test(current) ? current : aiPrd
+}

package/src/views/Chat/ChatMessage.tsx

@@ -1,26 +1,49 @@
 import { Button, IconBox, Text } from '@citric/core'
 import { Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Avatar, IconButton } from '@citric/ui'
+import { Avatar, Badge, IconButton } from '@citric/ui'
 import { aiClient } from '@stack-spot/portal-network'
+import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry, useWidget } from '../../context/hooks'
-import { ChatEntry, TextChatEntry } from '../../state/ChatEntry'
+import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
+import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
+import { ChatState } from '../../state/ChatState'
+import { buildConversationContext } from '../../utils/chat'
 import { useDateFormatter } from '../../utils/date'
+import { getSizeOfString } from '../../utils/string'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 
-export const ChatMessage = ({ message, username }: { message: ChatEntry, username: string }) => {
+async function onCopyCode(code: string, messageId: string, chat: ChatState) {
+  try {
+    await aiClient.createEvent.mutate({
+      body: [{
+        type: 'code_copied',
+        code,
+        context: buildConversationContext(chat),
+        size: getSizeOfString(code),
+        generated_at: new Date().getTime(),
+        message_id: messageId,
+      }],
+    })
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('Failed to register event: code copied.')
+  }
+}
+
+export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry, username: string, isLast: boolean }) => {
   const t = useTranslate(dictionary)
   const [liked, setLiked] = useState<boolean | undefined>()
   const entry = useChatEntry(message)
   const dateFormatter = useDateFormatter()
   const userInfo = entry.agentType === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agent={entry.agent} />
   const date = new Date(entry.updated ?? '')
-  const shouldShowDate = entry.updated && !isNaN(date.getTime())
+  const shouldShowFooter = entry.updated && !isNaN(date.getTime())
   const ref = useRef<HTMLLIElement>(null)
   const widget = useWidget()
+  const chat = useCurrentChat()
   useChatScrollToBottomEffect(ref, [entry])
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
@@ -28,6 +51,14 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
     widget.set('panel', 'ks-details')
   }, [])
 
+  const runAction = useCallback((action: SerializableAction) => {
+    if (action.type === 'link') {
+      window.open(action.exec, '_blank')
+    } else {
+      chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+    }
+  }, [])
+
   const { like, dislike } = useMemo(() => {
     async function feedback(like: boolean) {
       if (!entry.messageId || like === liked) return
@@ -58,8 +89,29 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
     <li className={entry.agentType} ref={ref}>
       <div className="chat-message">
         <div className="user-info">{userInfo}</div>
-        {entry.content && <div className="message-content">
-          {entry.type === 'md' ? <Markdown>{entry.content}</Markdown> : <p className="plain-text">{entry.content}</p>}
+        {entry.content && <div className={listToClass(['message-content', entry.card && 'card'])}>
+          {entry.badges?.length && <div className="badges">
+            {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
+          </div>}
+          {entry.type === 'md'
+            ? <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
+            : <p className="plain-text">{entry.content}</p>
+          }
+          {entry.actions?.length && <div className="actions">
+            {entry.actions.map(
+              (a, index) => (
+                <Button
+                  key={index}
+                  appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
+                  colorScheme="inverse"
+                  onClick={() => runAction(a)}
+                  disabled={!isLast}
+                >
+                  {a.title}
+                </Button>
+              ),
+            )}
+          </div>}
         </div>}
       </div>
       {entry.error && (
@@ -76,11 +128,13 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
           </li>
         ))}</ul>
       </div>}
-      <div className="message-footer">
+      {shouldShowFooter && <div className="message-footer">
         {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
-          <IconButton title={t.copy} aria-label={t.copy} onClick={() => navigator.clipboard.writeText(entry.content)}>
-            <Copy />
-          </IconButton>
+          {entry.type === 'md' && (
+            <IconButton title={t.copy} aria-label={t.copy} onClick={() => navigator.clipboard.writeText(entry.content)}>
+              <Copy />
+            </IconButton>
+          )}
           {entry.messageId && (
             <>
               <IconButton title={t.like} aria-label={t.like} onClick={like}>
@@ -92,8 +146,8 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
             </>
           )}
         </div>}
-        {shouldShowDate && <Text appearance="microtext1" className="chat-date">{dateFormatter.formatForChatMessage(date)}</Text>}
-      </div>
+        <Text appearance="microtext1" className="chat-date">{dateFormatter.formatForChatMessage(date)}</Text>
+      </div>}
     </li>
   )
 }

package/src/views/Chat/ChatMessages.tsx

@@ -10,7 +10,10 @@ interface Props {
 
 export const ChatMessages = ({ chatId, username }: Props) => {
   const messages = useChatMessages(chatId)
-  const items = useMemo(() => messages.map(m => <ChatMessage key={m.id} message={m} username={username} />), [messages])
+  const items = useMemo(
+    () => messages.map((m, index) => <ChatMessage key={m.id} message={m} username={username} isLast={index === messages.length - 1} />),
+    [messages],
+  )
   const ref = useRef<HTMLUListElement>(null)
   return <ChatList ref={ref}>{items}</ChatList>
 }

package/src/views/Chat/styled.ts

@@ -99,6 +99,37 @@ export const ChatList = styled.ul`
       }
     }
 
+    .message-content {
+      > .badges, > .actions {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+      }
+      > .badges {
+        margin-bottom: 20px;
+      }
+      > .actions {
+        margin-top: 20px;
+      }
+      &.card {
+        margin-top: 5px;
+        position: relative;
+        padding: 16px;
+        border: 2px solid ${theme.color.light[500]};
+        border-radius: 4px;
+        overflow: hidden;
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: 2px;
+          background: linear-gradient(180deg, ${theme.color.blue[500]} 0%, ${theme.color.indigo[500]} 100%);
+        }
+      }
+    }
+
     &.user {
       align-items: end;
 

package/src/views/ChatHistory/ChatHistoryPanel.tsx

@@ -1,5 +1,6 @@
 import { aiClient } from '@stack-spot/portal-network'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import { AutoFocus } from '../../components/AutoFocus'
 import { HistoryList } from '../../components/HistoryList'
 import { MessageInterceptor } from '../../state/ChatState'
 import { HistoryItem } from './HistoryItem'
@@ -7,7 +8,7 @@ import { HistoryItem } from './HistoryItem'
 export const ChatHistoryPanel = ({ interceptors }: { interceptors: MessageInterceptor[] }) => {
   const [chats, { fetchNextPage, hasNextPage }] = aiClient.chats.useInfiniteQuery({ size: 40 })
   return (
-    <div id="chatHistoryList" style={{ height: '100%', overflow: 'auto' }}>
+    <AutoFocus id="chatHistoryList" style={{ height: '100%', overflow: 'auto' }}>
       <InfiniteScroll
         scrollableTarget="chatHistoryList"
         dataLength={chats.length}
@@ -23,6 +24,6 @@ export const ChatHistoryPanel = ({ interceptors }: { interceptors: MessageInterc
           style={{ marginRight: '6px' }}
         />
       </InfiniteScroll>
-    </div>
+    </AutoFocus>
   )
 }

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/Editor.tsx

@@ -10,9 +10,8 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { styled } from 'styled-components'
 import { useCurrentChat, useCurrentChatState, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
-import { languages } from '../utils/programming-languages'
+import { defaultLanguage, languages } from '../utils/programming-languages'
 
-const DEFAULT_LANGUAGE = 'python'
 const MIN_SELECTION_UPDATE_MS = 200
 
 const EditorBox = styled.div`
@@ -65,7 +64,7 @@ export const Editor = () => {
 }
 
 const Title = () => {
-  const languageValue = useCurrentChatState('codeLanguage') || DEFAULT_LANGUAGE
+  const languageValue = useCurrentChatState('codeLanguage') || defaultLanguage
   const language = useMemo(() => languages.find(l => l.value === languageValue), [languageValue])
   const chat = useCurrentChat()
   return (
@@ -86,7 +85,7 @@ const Title = () => {
 const EditorPanel = () => {
   const themeKind = useThemeKind()
   const value = useCurrentChatState('code')
-  const language = useCurrentChatState('codeLanguage') || DEFAULT_LANGUAGE
+  const language = useCurrentChatState('codeLanguage') || defaultLanguage
   const chat = useCurrentChat()
   const selectionObserver = useRef<IDisposable | undefined>()
 

package/src/views/MessageInput/ButtonGroup.tsx

@@ -13,7 +13,7 @@ interface ButtonGroupProps {
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>,
   isLoading: boolean,
   onSend: () => void,
-  onCancel?: () => void,
+  onCancel: () => void,
 }
 
 export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {

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