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

package/src/components/Fading.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/display-name */
+import { WithStyle } from '@stack-spot/portal-theme'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+import { WithChildren } from '../types'
+
+interface Props extends WithChildren, WithStyle {
+  visible: boolean,
+  /**
+   * Duration of the animation in ms.
+   * @default 300
+   */
+  duration?: number,
+  onFadeIn?: () => void,
+  onFadeOut?: () => void,
+}
+
+export const Fading = forwardRef<HTMLDivElement, Props>((
+  { visible, children, duration = 300, onFadeIn, onFadeOut, className, style },
+  ref,
+) => {
+  const [isOpaque, setOpaque] = useState(visible)
+  const [isRendered, setRendered] = useState(visible)
+  const previous = useRef(visible)
+  const timeout = useRef<number[]>([])
+  const opacity: React.CSSProperties = { transition: `opacity ${duration / 1000}s`, opacity: isOpaque ? 1 : 0 }
+
+  useEffect(() => {
+    if (previous.current === visible) return
+    timeout.current.forEach(window.clearTimeout)
+    timeout.current = []
+    if (visible) {
+      setRendered(true)
+      timeout.current.push(window.setTimeout(() => setOpaque(true), 0))
+      if (onFadeIn) timeout.current.push(window.setTimeout(onFadeIn, duration))
+    } else {
+      setOpaque(false)
+      timeout.current.push(window.setTimeout(() => {
+        setRendered(false)
+        onFadeOut?.()
+      }, duration))
+    }
+    previous.current = visible
+  }, [visible])
+
+  return isRendered ? <div ref={ref} className={className} style={{ ...style, ...opacity }}>{children}</div> : null
+})

package/src/components/FallbackBoundary/ErrorBoundary.tsx

@@ -1,15 +1,29 @@
+import { IconBox, Text } from '@citric/core'
+import { TimesCircle } from '@citric/icons'
 import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/error'
 import { StackspotAPIError } from '@stack-spot/portal-network'
 import { Component } from 'react'
+import { styled } from 'styled-components'
 
 interface State extends ErrorDescription {
   hasError: boolean,
 }
 
 interface Props {
+  mini?: boolean,
+  message?: string,
   children: React.ReactNode,
 }
 
+const ErrorBox = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
 /**
  * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
  * 
@@ -40,9 +54,18 @@ export class ErrorBoundary extends Component<Props, State> {
     if (this.props.children !== prevProps.children) this.setState({ hasError: false })
   }
 
+  private renderError() {
+    return this.props.mini
+      ? (
+        <ErrorBox className="error">
+          <IconBox size="lg" colorIcon="danger.500"><TimesCircle /></IconBox>
+          <Text colorScheme="light.700">{this.props.message || this.state.message}</Text>
+        </ErrorBox>
+      )
+      : <ErrorFeedback className="error" code={this.state.code} message={this.props.message || this.state.message} />
+  }
+
   render() {
-    return this.state.hasError
-      ? <ErrorFeedback code={this.state.code} message={this.state.message} />
-      : this.props.children
+    return this.state.hasError ? this.renderError() : this.props.children
   }
 }

package/src/components/FallbackBoundary/Loading.tsx

@@ -10,5 +10,5 @@ const LoadingBox = styled.div`
 `
 
 export const Loading = () => (
-  <LoadingBox><LoadingCircular /></LoadingBox>
+  <LoadingBox className="loading"><LoadingCircular /></LoadingBox>
 )

package/src/components/FallbackBoundary/index.tsx

@@ -3,11 +3,16 @@ import { WithChildren } from '../../types'
 import { ErrorBoundary } from './ErrorBoundary'
 import { Loading } from './Loading'
 
+interface Props extends WithChildren {
+  mini?: boolean,
+  message?: string,
+}
+
 /**
  * Fallbacks for errors and loadings (suspense).
  */
-export const FallbackBoundary = ({ children }: WithChildren) => (
-  <ErrorBoundary>
+export const FallbackBoundary = ({ children, mini, message }: Props) => (
+  <ErrorBoundary mini={mini} message={message}>
     <Suspense fallback={<Loading />}>
       {children}
     </Suspense>

package/src/components/OverlayMenu.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable react/display-name */
 /* eslint-disable no-empty-pattern */
 import { IconBox, Text } from '@citric/core'
+import { useKeyboardControls } from '@stack-spot/portal-components'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
+import { forwardRef, RefObject, useCallback, useRef } from 'react'
 import { styled } from 'styled-components'
 import { ButtonAction, WithChildren } from '../types'
 import { Tooltip } from './Tooltip'
@@ -13,6 +15,11 @@ interface Props extends WithStyle, WithChildren {
   actions: ButtonAction[],
 }
 
+interface MenuProps {
+  actions: ButtonAction[],
+  trigger: RefObject<HTMLDivElement>,
+}
+
 const MenuList = styled.ul`
   margin: 0;
   padding: 0;
@@ -37,8 +44,9 @@ const MenuList = styled.ul`
       gap: 8px;
       background-color: transparent;
       border: none;
+      outline: none;
 
-      &:hover {
+      &:hover, &:focus {
         background-color: ${theme.color.light[500]};
       }
     }
@@ -53,25 +61,57 @@ const StyledButton = styled.button<{ $color: string | undefined }>`
   }
 `
 
-export const OverlayMenu = ({ actions, children, className, position, style }: Props) => {
+const Menu = ({ actions, trigger }: MenuProps) => {
   const tooltip = useTooltip()
-  const menu = useMemo(() => {
-    const items = actions.map(({ label, onClick, className, color, icon, style }) => (
-      <li key={label} className={className} style={style}>
-        <StyledButton $color={color} onClick={() => {
-          onClick()
-          tooltip.hide()
-        }}>
-          <IconBox>{icon}</IconBox>
-          <Text>{label}</Text>
-        </StyledButton>
-      </li>
-    ))
-    return <MenuList>{items}</MenuList>
-  }, [actions])
+  const ref = useRef<HTMLUListElement>(null)
+
+  useKeyboardControls({
+    querySelectors: 'button',
+    onPressEscape: () => {
+      tooltip.hide()
+      trigger.current?.focus()
+    },
+    ref,
+  }, [])
+
   return (
-    <Tooltip content={menu} custom position={position} className={className} style={style} triggeredBy="click">
+    <MenuList ref={ref}>
+      {actions.map(({ label, onClick, className, color, icon, style }) => (
+        <li key={label} className={className} style={style}>
+          <StyledButton $color={color} onClick={() => {
+            onClick()
+            tooltip.hide()
+          }}>
+            <IconBox>{icon}</IconBox>
+            <Text>{label}</Text>
+          </StyledButton>
+        </li>
+      ))}
+    </MenuList>
+  )
+}
+
+export const OverlayMenu = forwardRef<HTMLDivElement, Props>(({ actions, children, className, position, style }, externalRef) => {
+  const localRef = useRef<HTMLDivElement>(null)
+  const ref = externalRef as RefObject<HTMLDivElement> ?? localRef
+  const tooltip = useTooltip()
+
+  const onShow = useCallback(() => {
+    tooltip.tooltipRef.current?.querySelector('button')?.focus()
+  }, [])
+
+  return (
+    <Tooltip
+      content={<Menu actions={actions} trigger={ref} />}
+      custom
+      position={position}
+      className={className}
+      style={style}
+      triggeredBy="click"
+      onShow={onShow}
+      ref={ref}
+    >
       {children}
     </Tooltip>
   )
-}
+})

package/src/components/RightPanelForm.tsx

@@ -1,6 +1,7 @@
 import { Card } from '@citric/ui'
 import { styled } from 'styled-components'
 import { PropsOf } from '../types'
+import { AutoFocus } from './AutoFocus'
 import { FallbackBoundary } from './FallbackBoundary'
 
 const Form = styled.form`
@@ -42,14 +43,16 @@ const Form = styled.form`
 
 export const RightPanelForm = ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => (
   <FallbackBoundary>
-    <Form
-      {...props}
-      onSubmit={(e) => {
-        e.preventDefault()
-        onSubmit?.(e)
-      }}
-    >
-      {children}
-    </Form>
+    <AutoFocus>
+      <Form
+        {...props}
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit?.(e)
+        }}
+      >
+        {children}
+      </Form>
+    </AutoFocus>
   </FallbackBoundary>
 )

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable react/display-name */
 import { Text } from '@citric/core'
 import { WithStyle } from '@stack-spot/portal-theme'
+import { forwardRef } from 'react'
 import { WithChildren } from '../../types'
 import { useTooltip } from './context'
 import { DefaultTooltip } from './style'
@@ -10,27 +12,44 @@ interface Props extends WithChildren, WithStyle {
   position?: TooltipPosition,
   triggeredBy?: 'click' | 'hover',
   custom?: boolean,
+  onShow?: () => void,
+  onHide?: () => void,
 }
 
-export const Tooltip = ({ content, custom, position, triggeredBy = 'hover', children, className, style }: Props) => {
+export const Tooltip = forwardRef<HTMLDivElement, Props>((
+  { content, custom, position, triggeredBy = 'hover', onHide, onShow, children, className, style },
+  ref,
+) => {
   const api = useTooltip()
 
-  function show(e: React.MouseEvent<HTMLDivElement, MouseEvent>, hideOnClickOutside?: boolean) {
-    api.show({
+  async function show(e: React.UIEvent, hideOnClickOutside?: boolean) {
+    await api.show({
       content: custom ? content : <DefaultTooltip><Text appearance="microtext1">{content}</Text></DefaultTooltip>,
       anchor: e.target as HTMLElement,
       position,
       hideOnClickOutside,
     })
+    onShow?.()
   }
+
+  function hide() {
+    api.hide()
+    onHide?.()
+  }
+
   return (
     <div
-      {...(triggeredBy === 'hover' ? { onMouseEnter: show, onMouseLeave: () => api.hide() } : { onClick: (e) => show(e, true) })}
+      {...(triggeredBy === 'hover'
+        ? { onMouseEnter: show, onMouseLeave: hide }
+        : { onClick: (e) => show(e, true), onKeyDown: (e) => e.key === 'Enter' && show(e, true) }
+      )}
       className={className}
       style={style}
       tabIndex={triggeredBy === 'click' ? 0 : undefined}
+      role={triggeredBy === 'click' ? 'button' : undefined}
+      ref={ref}
     >
       {children}
     </div>
   )
-}
+})

package/src/components/Tooltip/TooltipAPI.ts

@@ -1,3 +1,4 @@
+import { delay } from '@stack-spot/portal-components'
 import { animationTimeMS } from './style'
 import { ShowOptions } from './types'
 
@@ -8,7 +9,7 @@ function isRelative(element: HTMLElement) {
 }
 
 export class TooltipAPI {
-  private tooltipRef: React.RefObject<HTMLDivElement>
+  tooltipRef: React.RefObject<HTMLDivElement>
   private setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>
   private hideTimeoutId: number | undefined
   private clickListener: ((e: MouseEvent) => void) | undefined
@@ -27,52 +28,51 @@ export class TooltipAPI {
     }
   }
 
-  show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions): void {
+  async show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions) {
     window.clearTimeout(this.hideTimeoutId)
     this.hideTimeoutId = undefined
     if (this.clickListener) document.removeEventListener('click', this.clickListener)
     this.setContent(content)
-    setTimeout(() => {
-      if (!this.tooltipRef.current) return
-      const anchorRect = anchor.getClientRects()[0]
-      this.tooltipRef.current.classList.add('visible')
-      const tooltipWidth = this.tooltipRef.current.clientWidth
-      const tooltipHeight = this.tooltipRef.current.clientHeight
-      let top = 0
-      let left = 0
-      if (position === 'left' || position === 'right') {
-        top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2
-        if (position === 'left') left = anchorRect.left - tooltipWidth
-        else left = anchorRect.left + anchorRect.width
-      } else {
-        left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2
-        if (position === 'top') top = anchorRect.top - tooltipHeight
-        else top = anchorRect.top + anchorRect.height
-      }
-      // takes the parent the tooltip is positioned relative to into consideration
-      this.computeRelativeTo()
-      const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 }
-      top -= relativeRect.top
-      left -= relativeRect.left
-      // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
-      if (top <= 0) top += MARGIN_TO_CORNERS_PX
-      else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
-        top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight
-      }
-      if (left <= 0) left += MARGIN_TO_CORNERS_PX
-      else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
-        left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth
-      }
-      this.tooltipRef.current.style.top = `${top}px`
-      this.tooltipRef.current.style.left = `${left}px`
-      if (hideOnClickOutside) {
-        this.clickListener = (e: MouseEvent) => {
-          if (this.tooltipRef.current?.contains(e.target as HTMLElement)) return
-          this.hide()
-        }
-        document.addEventListener('click', this.clickListener)
+    await delay(10)
+    if (!this.tooltipRef.current) return
+    const anchorRect = anchor.getClientRects()[0]
+    this.tooltipRef.current.classList.add('visible')
+    const tooltipWidth = this.tooltipRef.current.clientWidth
+    const tooltipHeight = this.tooltipRef.current.clientHeight
+    let top = 0
+    let left = 0
+    if (position === 'left' || position === 'right') {
+      top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2
+      if (position === 'left') left = anchorRect.left - tooltipWidth
+      else left = anchorRect.left + anchorRect.width
+    } else {
+      left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2
+      if (position === 'top') top = anchorRect.top - tooltipHeight
+      else top = anchorRect.top + anchorRect.height
+    }
+    // takes the parent the tooltip is positioned relative to into consideration
+    this.computeRelativeTo()
+    const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 }
+    top -= relativeRect.top
+    left -= relativeRect.left
+    // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
+    if (top <= 0) top += MARGIN_TO_CORNERS_PX
+    else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
+      top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight
+    }
+    if (left <= 0) left += MARGIN_TO_CORNERS_PX
+    else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
+      left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth
+    }
+    this.tooltipRef.current.style.top = `${top}px`
+    this.tooltipRef.current.style.left = `${left}px`
+    if (hideOnClickOutside) {
+      this.clickListener = (e: MouseEvent) => {
+        if (this.tooltipRef.current?.contains(e.target as HTMLElement)) return
+        this.hide()
       }
-    }, 10)
+      document.addEventListener('click', this.clickListener)
+    }
   }
 
   hide(): void {

package/src/layout.css

@@ -73,6 +73,11 @@
         display: none;
       }
     }
+    .quick-command-selector {
+      width: auto;
+      left: 10px;
+      right: 10px;
+    }
   }
 }
 

package/src/regex.ts

@@ -0,0 +1 @@
+export const quickCommandRegex = /^\/[\w\d-_]+$/

package/src/right-panel/DefaultPanel.tsx

@@ -3,7 +3,9 @@ import { Times } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
+import { AutoFocus } from '../components/AutoFocus'
 import { WithChildren } from '../types'
+import { panelAnimationTime } from './constants'
 
 interface Props extends WithChildren {
   title: React.ReactNode,
@@ -42,17 +44,20 @@ const PanelBox = styled.div`
 
 export const DefaultPanel = ({ description, onClose, title, children }: Props) => {
   const t = useTranslate(dictionary)
+
   return (
     <PanelBox>
-      <header>
-        <div className="title">
-          {typeof title === 'string' ? <Text appearance="h5">{title}</Text> : title}
-          {typeof description === 'string' ? <Text colorScheme="light.700">{description}</Text> : description}
-        </div>
-        <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
-          <Times />
-        </IconButton>
-      </header>
+      <AutoFocus delay={panelAnimationTime}>
+        <header>
+          <div className="title">
+            {typeof title === 'string' ? <Text appearance="h5">{title}</Text> : title}
+            {typeof description === 'string' ? <Text colorScheme="light.700">{description}</Text> : description}
+          </div>
+          <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
+            <Times />
+          </IconButton>
+        </header>
+      </AutoFocus>
       <article>{children}</article>
     </PanelBox>
   )

package/src/right-panel/constants.ts

@@ -0,0 +1 @@
+export const panelAnimationTime = 300

package/src/right-panel/hooks.tsx

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from 'react'
 import { DefaultPanel } from './DefaultPanel'
 import { RightPanelContext } from './RightPanelProvider'
+import { panelAnimationTime } from './constants'
 
 interface RightPanelOptions {
   title: React.ReactNode,
@@ -35,7 +36,7 @@ export function useRightPanel() {
       ctx.onCloseNext.current?.()
       setTimeout(() => {
         setContent(null)
-      }, 300)
+      }, panelAnimationTime)
     }
 
     function isOpen() {

package/src/utils/chat.ts

@@ -25,6 +25,6 @@ export function buildConversationContext(state: ChatState): FixedChatRequest['co
     os: navigator.userAgent,
     platform: 'web-widget',
     platform_version: navigator.userAgent,
-    stackspot_ai_version: 'alpha',
+    stackspot_ai_version: '1.0.0',
   }
 }

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

@@ -8,10 +8,31 @@ import { useCallback, useMemo, useRef, useState } from 'react'
 import { Markdown } from '../../components/Markdown'
 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'
 
+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>()
@@ -19,7 +40,7 @@ export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry,
   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()
@@ -72,7 +93,10 @@ export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry,
           {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>{entry.content}</Markdown> : <p className="plain-text">{entry.content}</p>}
+          {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) => (
@@ -104,7 +128,7 @@ export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry,
           </li>
         ))}</ul>
       </div>}
-      <div className="message-footer">
+      {shouldShowFooter && <div className="message-footer">
         {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
           {entry.type === 'md' && (
             <IconButton title={t.copy} aria-label={t.copy} onClick={() => navigator.clipboard.writeText(entry.content)}>
@@ -122,8 +146,8 @@ export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry,
             </>
           )}
         </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/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>
   )
 }