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

package/src/views/Chat/chat-scroll.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 
 /**
  * Scrolls the closest chat (upwards in the tree) to its bottom.
- * @param ref the reference element.
+ * @param ref the reference to the element contained the chat we want to scroll.
  * @param deps when the deps changes, the chat is scrolled.
  */
 export function useChatScrollToBottomEffect(ref: React.RefObject<HTMLElement>, deps: any[]) {

package/src/views/Chat/events.ts

@@ -0,0 +1,69 @@
+import { aiClient } from '@stack-spot/portal-network'
+import { TextChatEntry } from '../../state/ChatEntry'
+import { ChatState } from '../../state/ChatState'
+import { buildConversationContext } from '../../utils/chat'
+import { getSizeOfString } from '../../utils/string'
+
+/**
+ * Creates the event of copying a code.
+ * @param code the code copied.
+ * @param messageId the id of the message containing the code.
+ * @param chat the chat state.
+ */
+export 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.')
+  }
+}
+
+/**
+ * Creates the event of copying a whole message.
+ * @param entry the message copied.
+ * @param chat the chat state.
+ */
+export function onCopyAll(entry: TextChatEntry, chat: ChatState) {
+  navigator.clipboard.writeText(entry.content)
+  return aiClient.createEvent.mutate({
+    body: [
+      {
+        code: entry.content,
+        size: getSizeOfString(entry.content),
+        generated_at: new Date().getTime(),
+        type: 'copied_all',
+        knowledge_sources: entry.knowledgeSources?.map(ks => ({ slug: ks.slug, type: 'knowledge_source', name: ks.name })),
+        context: buildConversationContext(chat),
+        message_id: entry.messageId,
+      },
+    ],
+  })
+}
+
+/**
+ * Creates an event of like or dislike for a message.
+ * @param messageId the id of the message.
+ * @param like true if it's a like, false if it's a dislike.
+ */
+export function onLikeOrDislike(messageId: string, like: boolean) {
+  return aiClient.createEvent.mutate({
+    body: [{
+      feedback: like ? 'LIKE' : 'DISLIKE',
+      message_id: messageId,
+      type: 'user_feedback_provided',
+      code: '',
+      generated_at: Math.floor(new Date().getTime() / 1000),
+      size: 0,
+    }],
+  })
+}

package/src/views/Chat/index.tsx

@@ -2,9 +2,15 @@ import { useChatTabs } from '../../context/hooks'
 import { ChatMessages } from './ChatMessages'
 
 interface Props {
+  /**
+   * The name of the user currently logged in.
+   */
   username: string,
 }
 
+/**
+ * Renders the chat panel, with all of its messages.
+ */
 export const Chat = ({ username }: Props) => {
   const { active } = useChatTabs()
   return <ChatMessages key={active} chatId={active} username={username} />

package/src/views/ChatHistory/ChatHistoryPanel.tsx

@@ -1,13 +1,17 @@
 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'
 
+/**
+ * Renders the list of conversations (history).
+ */
 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 +27,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'
@@ -17,6 +18,9 @@ import { useHistoryDictionary } from './dictionary'
 import { HistoryItemBox } from './styled'
 import { findStack, findWorkspace, getAllAgents } from './utils'
 
+/**
+ * Renders an item of the list of conversations (history).
+ */
 export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse, interceptors: MessageInterceptor[] }) => {
   const t = useHistoryDictionary()
   const [isLoading, setLoading] = useState(false)
@@ -26,6 +30,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 +57,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 +71,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 +131,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/ChatHistory/index.tsx

@@ -6,7 +6,17 @@ import { MessageInterceptor } from '../../state/ChatState'
 import { ChatHistoryPanel } from './ChatHistoryPanel'
 import { useHistoryDictionary } from './dictionary'
 
-export const ChatHistory = ({ interceptors }: { interceptors: MessageInterceptor[] }) => {
+interface Props {
+  /**
+   * The chat interceptors to use when recreating a ChatState from the history.
+   */
+  interceptors: MessageInterceptor[],
+}
+
+/**
+ * Renders the Chat History in the Right Panel if this is the panel that is currently opened.
+ */
+export const ChatHistory = ({ interceptors }: Props) => {
   const t = useHistoryDictionary()
   const panel = useWidgetState('panel')
   const { open } = useRightPanel()

package/src/views/ChatHistory/utils.ts

@@ -2,6 +2,11 @@ import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-netwo
 import { ChatProperties } from '../../state/ChatState'
 import { LabeledWithImage } from '../../state/types'
 
+/**
+ * Finds a stack by its id.
+ * @param id the id of the stack.
+ * @returns the stack or undefined.
+ */
 export async function findStack(id: string | null): Promise<ChatProperties['stack'] | undefined> {
   if (!id) return
   try {
@@ -14,6 +19,11 @@ export async function findStack(id: string | null): Promise<ChatProperties['stac
   }
 }
 
+/**
+ * Finds a workspace by its id.
+ * @param id the id of the workspace.
+ * @returns the workspace or undefined.
+ */
 export async function findWorkspace(id: string | null): Promise<ChatProperties['workspace'] | undefined> {
   if (!id) return
   try {
@@ -26,6 +36,10 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
   }
 }
 
+/**
+ * Finds all the agents, including common agents and public agents.
+ * @returns an array with every agent.
+ */
 export async function getAllAgents(): Promise<LabeledWithImage[]> {
   try {
     const [agents, publicAgents] = await Promise.all([agentClient.agents.query({}), agentClient.publicAgents.query({})])

package/src/views/ChatTabSelection.tsx

@@ -17,6 +17,9 @@ const TabLabel = ({ id }: { id: string }) => {
   return <div title={label}>{label}</div>
 }
 
+/**
+ * This renders the top-most part of the layout, which includes the chat selection through tabs.
+ */
 export const ChatTabSelection = ({ history, interceptors }: Props) => {
   const t = useTranslate(dictionary)
   const widget = useWidget()

package/src/views/Editor.tsx

@@ -42,6 +42,9 @@ const TitleBox = styled.div`
   }
 `
 
+/**
+ * Renders the Editor in the Right Panel if this is the panel that is currently opened.
+ */
 export const Editor = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -94,6 +97,7 @@ const EditorPanel = () => {
       const selectedText = editor.getModel()?.getValueInRange(e.selection)
       chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
     }, MIN_SELECTION_UPDATE_MS))
+    editor.focus()
   }, [])
 
   useEffect(() => () => {

package/src/views/Home.tsx

@@ -8,6 +8,9 @@ import { useCurrentChat } from '../context/hooks'
 import { ChatEntry } from '../state/ChatEntry'
 
 interface Props {
+  /**
+   * The name of the user currently logged in.
+   */
   username: string,
 }
 
@@ -44,6 +47,11 @@ const HomeBox = styled.div`
   }
 `
 
+/**
+ * Renders the default home page for the chat. This shows up when no message has been sent yet.
+ * 
+ * The home page can be replaced by providing children to the component `StackspotAIWidget`.
+ */
 export const Home = ({ username }: Props) => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()

package/src/views/KSDocument.tsx

@@ -8,6 +8,9 @@ import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { extractCodeFromKSDocument } from '../utils/knowledge-source'
 
+/**
+ * Renders the KS document in the Right Panel if this is the panel that is currently opened.
+ */
 export const KSDocument = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')

package/src/views/KnowledgeSources.tsx

@@ -35,6 +35,9 @@ export const KnowledgeSources = () => {
   return null
 }
 
+/**
+ * Renders the KS selection form in the Right Panel if this is the panel that is currently opened.
+ */
 const KnowledgeSourcesPanel = () => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()

package/src/views/MessageInput/ButtonGroup.tsx

@@ -8,14 +8,36 @@ import { MessageInputFeatures } from '../../features'
 import { useMessageInputDictionary } from './dictionary'
 
 interface ButtonGroupProps {
+  /**
+   * The features enabled and accessible through the message input.
+   */
   features: MessageInputFeatures,
+  /**
+   * Whether or not the button group is expanded.
+   */
   expanded: boolean,
+  /**
+   * A function to set the button group as expanded or collapsed.
+   */
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>,
+  /**
+   * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
+   */
   isLoading: boolean,
+  /**
+   * A function to run when the send button is clicked.
+   */
   onSend: () => void,
+  /**
+   * A function to run when the cancel button is clicked.
+   */
   onCancel: () => void,
 }
 
+/**
+ * Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
+ * editor, change the agent, the stack, etc.
+ */
 export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
   const t = useMessageInputDictionary()
   const widget = useWidget()

package/src/views/MessageInput/InfoBar.tsx

@@ -21,6 +21,13 @@ const InfoBadge = ({ label, color, dismiss, onDismiss }: InfoBadgeProps) => (
   </Badge>
 )
 
+/**
+ * This renders the bar on top of the textarea to send the message. This tells:
+ * - if there's any code selected in the editor;
+ * - which workspace is being used;
+ * - which stack is being used;
+ * - which knowledge sources are being used.
+ */
 export const InfoBar = () => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -0,0 +1,217 @@
+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 {
+  /**
+   * 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)
+  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>
+  )
+}
+
+/**
+ * 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 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,16 +4,26 @@ 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 {
+  /**
+   * The features enabled and accessible through the message input.
+   */
   features: MessageInputFeatures,
 }
 
+/**
+ * This renders the MessageInput part of the layout which includes the progress bar, the actual textarea, the badges telling what is
+ * 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 = ({ features }: Props) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
@@ -23,14 +33,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 +54,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)}