@stack-spot/ai-chat-widget 1.5.2 → 1.7.0-beta.0

package/dist/views/MessageInput/styled.js

@@ -86,12 +86,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 {
@@ -148,12 +148,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%;
+        }
       }
     }
 
@@ -189,6 +193,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 {
@@ -204,141 +247,5 @@ 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;
-          }
-        }
-      }
-    }
-  }
 `;
 //# sourceMappingURL=styled.js.map

package/dist/views/MessageInput/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;kBAYvB,eAAe,GAAG,qBAAqB;;;;;;;;;;;;;;;;gBAgBzC,eAAe;;0BAEL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+BtC,UAAU;;;;;;;;;;;;;;;;;;;;;;;wBAuBI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;wBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;sBAKxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;0BAIpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;gBAoBhC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;4BAMV,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;4BAItB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;kBAKlC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmD5C,UAAU;;;;;;;;;;;cAWF,gBAAgB;;;;;;;;;;;;wBAYN,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;wBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0D7B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;8BAcT,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;mCAIjB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;mBAC9C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;8BAuBnB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;qBAgB/B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;qBAO9B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;CAQ1C,CAAA"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;kBAYvB,eAAe,GAAG,qBAAqB;;;;;;;;;;;;;;;;gBAgBzC,eAAe;;0BAEL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+BtC,UAAU;;;;;;;;;;;;;;;;;;;;;;;wBAuBI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;wBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;sBAKxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;0BAIpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;gBAoBhC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;4BAMV,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;4BAItB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;kBAKlC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuD5C,UAAU;;;;;;;;;;;;;;8BAcc,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;8BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;gCAQpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;cAoBpC,gBAAgB;;;;;;;;CAQ7B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.5.2",
+  "version": "1.7.0-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.5.2",
-  "date": "Wed Jan 08 2025 15:01:28 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.7.0-beta.0",
+  "date": "Tue Jan 21 2025 08:16:05 GMT-0300 (Brasilia Standard Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -89,15 +89,15 @@
     },
     {
       "name": "@citric/core",
-      "version": "6.2.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
+      "version": "6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
       "name": "@citric/icons",
-      "version": "5.7.7(react@18.2.0)"
+      "version": "5.9.0(react@18.2.0)"
     },
     {
       "name": "@citric/ui",
-      "version": "6.1.2(@citric/core@6.2.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.7.7(react@18.2.0))(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
+      "version": "6.5.5(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.9.0(react@18.2.0))(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
       "name": "@monaco-editor/react",
@@ -105,7 +105,7 @@
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.8.1(@citric/core@6.2.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.7.7(react@18.2.0))(@citric/ui@6.1.2(@citric/core@6.2.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.7.7(react@18.2.0))(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.2.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.8.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.9.0(react@18.2.0))(@citric/ui@6.5.5(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.9.0(react@18.2.0))(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-network",
@@ -113,7 +113,7 @@
     },
     {
       "name": "@stack-spot/portal-theme",
-      "version": "1.1.0(@citric/core@6.2.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
+      "version": "1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
       "name": "@stack-spot/portal-translate",

package/src/chat-interceptors/send-message.ts

@@ -1,4 +1,4 @@
-import { aiClient, StackspotAPIError } from '@stack-spot/portal-network'
+import { aiClient, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
@@ -63,8 +63,20 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     }
     botEntry.setValue(createEntryValueFromChatResponse(value, knowledgeSources, chat.get('agent')))
   })
+  let finalValue: Partial<ChatResponse3> | undefined
   try {
-    const finalValue = await stream.getValue()
+    finalValue = await stream.getValue()
+  } catch (error: any) {
+    if (error instanceof StreamCanceledError) {
+      finalValue = stream.getPartialValue()
+    } else {
+      botEntry.setValue({
+        ...botEntry.getValue(),
+        error: error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+      })
+    }
+  }
+  if (finalValue?.answer) {
     botEntry.setValue(createEntryValueFromChatResponse(finalValue, knowledgeSources, chat.get('agent'), true))
     aiClient.chat.invalidate({ conversationId: chat.id })
     if (isFirstMessage) {
@@ -84,11 +96,6 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       // this makes sure to update the chat history
       aiClient.chats.invalidate()
     }
-  } catch (error: any) {
-    botEntry.setValue({
-      ...botEntry.getValue(),
-      error: error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
-    })
   }
   chat.set('isLoading', false)
 }

package/src/components/AdaptiveTextArea.tsx

@@ -28,6 +28,13 @@ export const AdaptiveTextArea = forwardRef<HTMLTextAreaElement, Props>((
   const localRef = useRef<HTMLTextAreaElement>(null)
   const ref = externalRef as React.RefObject<HTMLTextAreaElement> ?? localRef
 
+  const handleIncreaseSize = (newHeight: number) => {
+    onIncreaseSize?.()
+    if (maxHeight && newHeight > maxHeight && ref.current) {
+      ref.current.style.overflowY = 'auto'
+    }
+  }
+
   useEffect(() => {
     if (!ref.current) return
     const height = ref.current.clientHeight
@@ -36,7 +43,7 @@ export const AdaptiveTextArea = forwardRef<HTMLTextAreaElement, Props>((
       ref.current.style.overflowY = 'hidden'
       if (height < scroll) {
         ref.current.style.height = `${scroll}px`
-        onIncreaseSize?.()
+        handleIncreaseSize(scroll)
       }
     } else if (maxHeight) {
       ref.current.style.overflowY = 'auto'

package/src/components/Selector/index.tsx

@@ -0,0 +1,245 @@
+import { IconBox, Image, Text } from '@citric/core'
+import { Agent, ExternalLink } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { useKeyboardControls } from '@stack-spot/portal-components'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCurrentChatState } from '../../context/hooks'
+import { getUrlToStackSpotAI } from '../../utils/url'
+import { Fading } from '../Fading'
+import { FallbackBoundary } from '../FallbackBoundary'
+import { SelectorBox } from './styled'
+
+const sections = [undefined, 'personal', 'workspace', 'account', 'shared'] as const
+
+type SelectorShortcut = '/' | '@'
+
+interface Item {
+  id: string,
+  slug: string,
+  description: string,
+  visibility_level: VisibilityLevelEnum,
+}
+
+interface ListProps<T> {
+  filter?: string,
+  visibility?: VisibilityLevelEnum,
+  selectorConfig: SelectorConfig<T>,
+  onSelect: (item: T) => void,
+}
+
+interface ListItemProps<T> extends ListProps<T> {
+  item: T,
+}
+
+interface ContentProps<T> {
+  filter?: string,
+  onClose: () => void,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+  selectorConfig: SelectorConfig<T>,
+}
+
+interface SelectorConfig<T> {
+  resourceName: string,
+  shortcut: SelectorShortcut,
+  icon: React.ReactElement,
+  regex: RegExp,
+  url: string,
+  imageProp?: keyof T,
+  data: () => T[],
+  isEnabled: boolean,
+  onSelect: (item: T) => void,
+}
+
+interface SelectorProps<T> {
+  selectorConfig: SelectorConfig<T>,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+}
+
+const ListItem = <T extends Item>({ item, selectorConfig, onSelect }: ListItemProps<T>) => {
+  const t = useTranslate(dictionary)
+  const { shortcut, url } = selectorConfig
+  const hasImage = !!selectorConfig.imageProp
+  const image = item[selectorConfig.imageProp!] as string
+  const linkTitle = t.open.replace('%s', item.slug)
+
+  return (
+    <li>
+      {!!hasImage && image ? <Image width="32" height="32" radius="full" src={image} /> : <IconBox size="md"><Agent /></IconBox>}
+      <button
+        className="selector"
+        onClick={() => onSelect(item)}
+        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="selector-title">{!hasImage ? shortcut : ''}{item.slug}</p>
+        <p className="selector-description">{item.description}</p>
+      </button>
+      <IconButton as="a" title={linkTitle} aria-label={linkTitle} href={`${getUrlToStackSpotAI()}${url}${item.slug}`} target="_blank">
+        <ExternalLink />
+      </IconButton>
+    </li>
+  )
+}
+
+const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect }: ListProps<T>) => {
+  const t = useTranslate(dictionary)
+  const items = selectorConfig.data()
+  const filtered = useMemo(() => {
+    if (!filter && !visibility) return items
+    const lowerFilter = filter?.toLowerCase() ?? ''
+
+    return items.filter(item =>
+      item.slug.toLocaleLowerCase().startsWith(lowerFilter) && (!visibility || item?.visibility_level?.toLowerCase() === visibility),
+    )
+  }, [filter, items, visibility])
+
+  if (!items.length) return <Text className="empty" colorScheme="light.700">{t.noData.replace('%', selectorConfig.resourceName)}</Text>
+  if (!filtered.length)
+    <Text className="empty" colorScheme="light.700">{t.noResults.replace('%', selectorConfig.resourceName)}</Text>
+
+  return (
+    <ul className="selector-list">
+      {filtered.map((item) => (
+        <ListItem key={item.id} item={item} selectorConfig={selectorConfig} onSelect={onSelect} />
+      ))}
+    </ul>
+  )
+}
+
+const SelectorContent = ({ filter, onClose, selectorConfig }: ContentProps<any>) => {
+  const t = useTranslate(dictionary)
+  const ref = useRef<HTMLDivElement>(null)
+  const [visibility, setVisibility] = useState<VisibilityLevelEnum | undefined>()
+  const { resourceName, icon, onSelect } = selectorConfig
+  const onSelectItem = useCallback((slug: string) => {
+    onSelect(slug)
+    onClose()
+  }, [])
+
+  useKeyboardControls({
+    querySelectors: '.tabs button, button.selector',
+    disableTabBehavior: true,
+    onPressEscape: onClose,
+    onPressArrowLeft: () => (ref.current?.querySelector('.tabs button.active') as HTMLElement)?.focus(),
+    onPressArrowRight: () => (ref.current?.querySelector('button.selector') 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>{icon}</IconBox>
+        <Text as="h3" className="uppercase"> {resourceName} </Text>
+      </header>
+      <div className="body">
+        <ul className="tabs">{sections.map(createSectionItem)}</ul>
+        <FallbackBoundary message={t.error.replace('%s', selectorConfig.resourceName)} mini>
+          <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} />
+        </FallbackBoundary>
+      </div>
+    </div>
+  )
+}
+
+export const Selector = <T, >({ inputRef, selectorConfig }: SelectorProps<T>) => {
+  const { shortcut, regex, isEnabled } = selectorConfig
+  const [isClosed, setClosed] = useState(false)
+  const selectorRef = useRef<HTMLDivElement>(null)
+  const value = useCurrentChatState('nextMessage') ?? ''
+
+  const filter = useMemo(() => value === shortcut || regex.test(value) ? value.substring(1) : undefined, [value])
+  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 resource panel on press up or down; and close the resource panel on esc.
+  useEffect(() => {
+    function getFirst() {
+      return selectorRef.current?.querySelector('.selector') 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 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 (
+    <SelectorBox>
+      <Fading visible={shouldRender} ref={selectorRef} className="box-selector">
+        <SelectorContent
+          selectorConfig={selectorConfig}
+          filter={filter}
+          onClose={() => setClosed(true)}
+          inputRef={inputRef}
+        />
+      </Fading>
+    </SelectorBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    all: 'All',
+    personal: 'Personal',
+    account: 'Account',
+    shared: 'Shared',
+    workspace: 'Workspace',
+    error: 'Could not load the %ss.',
+    noData: 'You don\'t have any %s yet.',
+    noResults: 'There are no %ss to show here.',
+    open: 'Open this %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 %ss.',
+    noData: 'Você ainda não possui %ss.',
+    noResults: 'Não há %ss para mostrar aqui.',
+    open: 'Abra as configurações deste %s em uma nova aba.',
+  },
+} satisfies Dictionary