@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/KnowledgeSources.tsx

@@ -1,22 +1,28 @@
-import { Button } from '@citric/core'
-import { Search } from '@citric/icons'
+import { Button, Tab } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { aiClient } from '@stack-spot/portal-network'
-import { KnowledgeSourceItemResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { aiClient, dataIntegrationClient, workspaceAiClient } from '@stack-spot/portal-network'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { KnowledgeSourceItemResponse } from '@stack-spot/portal-network/api/dataIntegration'
+import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { difference, uniqBy } from 'lodash'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
-import { IconInput } from '../components/IconInput'
+import { RightPanelContentList } from '../components/RightPanelContentList'
 import { RightPanelTabs } from '../components/RightPanelTabs'
+import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
+import { Scope } from '../features'
 import { useRightPanel } from '../right-panel/hooks'
 import { ChatProperties } from '../state/ChatState'
+import { checkIsTrial } from '../utils/check-is-trial'
 
-interface TabProps {
-  visibility: VisibilityLevelEnum,
-  onSubmit: () => void,
+export interface TabProps {
+  visibility?: VisibilityLevelEnum,
   allKS: React.MutableRefObject<ChatProperties['knowledgeSources']>,
+  workspaceId?: string,
+  showSubmitButton?: boolean,
+  onSubmit?: () => void,
 }
 
 export const KnowledgeSources = () => {
@@ -35,11 +41,19 @@ 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()
   const allKS = useRef(chat.get('knowledgeSources') ?? [])
   const { close } = useRightPanel()
+  const isTrial = checkIsTrial()
+  const features = useWidgetState('features')
+  const isGroupResourcesByScope = features?.groupResourcesByScope
+  const scopes = features?.scopes ?? []
+  const spotId = features?.workspaceId
 
   const onSubmit = useCallback(() => {
     chat.set('knowledgeSources', allKS.current)
@@ -49,70 +63,160 @@ const KnowledgeSourcesPanel = () => {
   useEffect(() => {
     allKS.current = chat.get('knowledgeSources') ?? []
   }, [chat])
-  
-  return <RightPanelTabs key={chat.id} tabs={[
-    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
-  ]} />
+
+  const allTabsMap: Partial<Record<Scope, Omit<Tab, 'key'>>> = {
+    favorite: {
+      label: t.favorites,
+      content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} />,
+    },
+    personal: {
+      label: t.personal,
+      content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} />,
+    },
+    shared: { label: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
+    workspace: {
+      label: t.spots,
+      content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} />,
+    },
+    account: { label: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
+  }
+
+  const defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
+
+  const rawScopes: Scope[] = scopes?.length ? scopes : defaultScopes
+
+  const scopesToRender: Scope[] = isTrial
+    ? ['favorite', 'personal']
+    : rawScopes
+
+  const tabs = scopesToRender
+    .map(scope => scope in allTabsMap ? { key: scope, ...allTabsMap[scope] } : undefined)
+    .filter(Boolean) as Tab[]
+
+  return (isGroupResourcesByScope ? (
+    <RightPanelTabs key={chat.id} tabs={tabs} />
+  ) : (
+    <RightPanelContentList><KnowledgeSourcesTab allKS={allKS} onSubmit={onSubmit} workspaceId={spotId} /></RightPanelContentList>
+  ))
 }
 
-const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
+export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId, showSubmitButton = true }: TabProps) => {
   const t = useTranslate(dictionary)
-  const [filter, setFilter] = useState('')
-  const knowledgeSources = aiClient.knowledgeSources.useQuery({ visibility, order: 'a-to-z' })
-  const [value, setValue] = useState<KnowledgeSourceItemResponse[]>((() => {
-    const currentlySelected = allKS.current?.map(ks => ks.id)
-    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
-  })())
-  const filtered = useMemo(
-    () => filter
-      ? knowledgeSources.filter(ks => value.includes(ks) || ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-      : knowledgeSources,
-    [knowledgeSources, filter, value],
+  const [data = []] = workspaceAiClient.getKSFromWorkspaceAi.useStatefulQuery(
+    { workspaceId: workspaceId! }, { enabled: !!workspaceId })
+  const workspaceKs = data as KnowledgeSourceItemResponse[]
+
+  const [ksListPages = [], { fetchNextPage, hasNextPage }] = dataIntegrationClient.knowledgeSourcesV2.useInfiniteQuery(
+    {
+      order: 'a-to-z',
+      visibilityList: visibility ? [visibility] : [],
+      types: ['snippet', 'api', 'event', 'custom'],
+      size: 20,
+      page: 1,
+    },
+    { enabled: !workspaceId },
   )
+  const knowledgeSources = workspaceId ? workspaceKs : ksListPages
+
+  const initialValue = useMemo(() => {
+    const currentlySelected = allKS.current?.map(ks => ks.id)
+    return knowledgeSources?.filter((ks: KnowledgeSourceItemResponse) => currentlySelected?.includes(ks.slug))
+  }, [knowledgeSources])
+
+  const listFavorites = dataIntegrationClient.knowledgeSourcesV2.useQuery({ visibilityList: ['favorite'] })?.items
 
-  const onChange = useCallback((newValue: KnowledgeSourceItemResponse[]) => {
-    setValue((current) => {
-      const added = difference(newValue, current)
-      const removed = difference(current, newValue)
-      allKS.current = allKS.current?.filter(ks => !removed.some(r => r.slug === ks.id)) ?? []
-      allKS.current = uniqBy([...allKS.current, ...added.map(ks => ({ id: ks.slug, label: ks.name }))], 'id')
-      return newValue
-    })
-  }, [])
-
-  return (
-    <>
-      <div className="content">
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-        {!!filtered.length && <DescribedCheckboxGroup
-          options={filtered}
-          keygen={ks => ks.id}
-          value={value}
-          onChange={onChange}
-          renderLabel={ks => ks.name}
-          renderDescription={ks => ks.description}
-          optionClassName={ks => (filter && !ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && value.includes(ks))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />}
-        {!!knowledgeSources.length && !filtered.length && (
-          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />
-        )}
-        {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
-      </div>
-      <Button onClick={onSubmit}>{t.apply}</Button>
-    </>
+  const [addFavorite, pendingAddFav] = dataIntegrationClient.addFavoriteKnowledgeSource.useMutation()
+  const [removeFavorite, pendingRemoveFav] = dataIntegrationClient.removeFavoriteKnowledgeSource.useMutation()
+
+  const removeFavoriteKs = async (idOrSlug: string) => {
+    try {
+      await removeFavorite({ slug: idOrSlug })
+      await aiClient.knowledgeSources.invalidate()
+      await dataIntegrationClient.knowledgeSourcesV2.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onRemoveFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await removeFavoriteKs(idOrSlug)
+      if (!pendingRemoveFav) {
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  const addFavoriteKs = async (idOrSlug: string) => {
+    try {
+      await addFavorite({ slug: idOrSlug })
+      await aiClient.knowledgeSources.invalidate()
+      await dataIntegrationClient.knowledgeSourcesV2.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onAddFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await addFavoriteKs(idOrSlug)
+      if (!pendingAddFav) {
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  return (<>
+    <div className="content">
+      <DescribedCheckboxGroup
+        options={knowledgeSources}
+        initialValue={initialValue}
+        globalSelection={allKS}
+        hasNextPage={hasNextPage && !workspaceId}
+        fetchNextPage={fetchNextPage}
+        data={(ks: KnowledgeSourceItemResponse) => ({
+          idOrSlug: ks.slug, description: ks.description, name: ks.name, listFavorites,
+          onAddFavorite, onRemoveFavorite,
+        })}
+        emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
+        emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
+      />
+    </div>
+    {!!knowledgeSources?.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
+  </>
   )
 }
 
+export function KnowledgeSourcesTabWorkspace({ allKS, onSubmit }: TabProps) {
+  const workspaceTabComponents = useMemo(() => ({ ks: KnowledgeSourcesTab }), [allKS, onSubmit])
+
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
+    component: 'ks',
+    props: { visibility: 'workspace', workspaceId: workspace.id, allKS, onSubmit },
+  })
+
+  return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
+}
+
 const dictionary = {
   en: {
     title: 'Knowledge Sources',
     description: 'By selecting one or more knowledge sources, they will be consulted to generate the responses.',
+    favorites: 'Favorites',
     personal: 'Personal',
     shared: 'Shared',
     account: 'Account',
@@ -121,10 +225,12 @@ const dictionary = {
     noSearchResultsDescription: 'Please, try another search term.',
     noData: 'There are no knowledge sources in this category yet.',
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new knowledge sources.',
+    spots: 'Spots',
   },
   pt: {
     title: 'Knowledge Sources',
     description: 'Ao selecionar um ou mais knowledge sources, eles serão consultados para gerar as respostas.',
+    favorites: 'Favoritos',
     personal: 'Pessoal',
     shared: 'Compartilhado',
     account: 'Conta',
@@ -133,5 +239,6 @@ const dictionary = {
     noSearchResultsDescription: 'Por favor, tente outra busca.',
     noData: 'Ainda não há knowledge sources nesta categoria.',
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos knowledge sources.',
+    spots: 'Spots',
   },
 } satisfies Dictionary

package/src/views/MessageInput/AgentSelector.tsx

@@ -0,0 +1,92 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { IconBox, Row, Text } from '@stack-spot/citric-react'
+import { AgentResponseWithBuiltIn, agentToolsClient, AgentVisibilityLevel, workspaceAiClient } from '@stack-spot/portal-network'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/agent-tools'
+import { useCallback } from 'react'
+import { Selector } from '../../components/Selector'
+import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
+import { agentRegex } from '../../regex'
+import { useAgentFavorites } from '../Agents/useAgentFavorites'
+
+type AgentWithSpaceName = AgentResponseWithBuiltIn
+
+const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
+  const avatarComponent = avatar
+    ? <img style={{ width: '32px', height: '32px', borderRadius: '50%' }} src={avatar} />
+    : <IconBox size="md" icon="Agent" style={{ backgroundColor: 'transparent' }} />
+
+  return <Row gap="8px" style={{ flexWrap: 'nowrap' }}>
+    {avatarComponent}
+    <div>
+      <Text className="selector-description">{spaceName}</Text>
+      <Text className="selector-title">{name}</Text>
+    </div>
+  </Row>
+}
+
+export const AgentSelector = ({ inputRef, isTrial }: {
+  isTrial: boolean,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+}) => {
+  const chat = useCurrentChat()
+  const isAgentEnabled = useCurrentChatState('features').agent
+  const spotId = useWidgetState('features')?.workspaceId
+
+  const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
+
+  const onSelectItem = useCallback(async (agent: AgentResponseWithBuiltIn) => {
+    const newValue = `@${agent.slug}`
+    chat.set('nextMessage', undefined)
+    chat.set(
+      'agent',
+      {
+        id: agent.id,
+        label: agent.name,
+        image: agent.avatar, 
+        slug: agent.slug, 
+        builtIn: agent.builtIn,
+        visibility_level: agent.visibility_level,
+      },
+    )
+
+    if (!inputRef.current) return
+    inputRef.current.value = newValue
+    inputRef.current.focus()
+  }, [chat, inputRef])
+
+
+  const getAgents = ({ filter, visibility }: {filter?: string, visibility?: AgentVisibilityLevel[] | VisibilityLevelEnum[]}) => {
+    if (spotId) {
+      return { data: workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ 
+        workspaceId: spotId, name: filter }) as AgentResponseWithBuiltIn[] }
+    }
+
+    if (isTrial) {
+      return  { data: agentToolsClient.allAgents.useQuery({ visibilities: visibility as VisibilityLevelEnum[], filter }) }
+    }
+    
+    return  { data: agentToolsClient.allAgents.useQuery({
+      visibilities: visibility as VisibilityLevelEnum[], filter,
+    }) }
+  }
+
+  return <Selector
+    inputRef={inputRef}
+    favorite={{ useFavorites, onAddFavorite, onRemoveFavorite }}
+    selectorConfig={{
+      resourceName: 'Agent',
+      shortcut: '@',
+      icon: <Icon icon="Agent" />,
+      regex: agentRegex,
+      urlBuilder: (agent) => `/agents/${agent?.id}`,
+      searchProp: 'name',
+      sections: isTrial ?
+        ['favorite', 'personal', 'built_in', 'recently_used'] :
+        ['favorite', 'personal', 'workspace', 'account', 'shared', 'built_in', 'recently_used'],
+      renderComponentItem: AgentItem,
+      isEnabled: isAgentEnabled,
+      onSelect: onSelectItem,
+      useData: getAgents,
+    }}
+  />
+}

package/src/views/MessageInput/ButtonAgent.tsx

@@ -0,0 +1,73 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { Center, ImageButton, ImageWithFallback, Tooltip } from '@stack-spot/citric-react'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { agentToolsClient } from '@stack-spot/portal-network'
+import { useEffect } from 'react'
+import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+
+export const ButtonAgent = () => {
+  const t = useMessageInputDictionary()
+  const agentDefault = agentToolsClient.agentDefault.useQuery()
+  const widget = useWidget()
+  const chat = useCurrentChat()
+  const agent = useCurrentChatState('agent')
+  const features = useCurrentChatState('features')
+
+  const setAgentDefault = () => {
+    agentDefault && chat.set(
+      'agent',
+      {
+        id: agentDefault.id,
+        slug: agentDefault.slug,
+        label: agentDefault.name,
+        image: agentDefault.avatar,
+        builtIn: true,
+        visibility_level: agentDefault.visibility_level,
+      },
+    )
+  }
+  
+  useEffect(() => {
+    if (!agent && !!agentDefault) {
+      setAgentDefault()
+    }
+  }, [agentDefault, agent])
+
+  const isAgentDefault = () => agent?.id === agentDefault?.id 
+
+  return (
+    <div className="button-group">
+      {features.agent && (
+        <div className="group-agent">
+          <ImageButton
+            aria-label={t.agent}
+            title={t.agent}
+            className="agent"
+            onClick={() => widget.set('panel', 'agent')}
+          >
+            {agentDefault?.avatar ? <img src={agentDefault.avatar} className="image" /> : <MiniLogo />}
+          </ImageButton>
+          {agent?.id && !isAgentDefault() &&
+            <Tooltip content={t.remove} >
+              <ImageButton
+                aria-label={t.remove}
+                className="agent agent-selected"
+                onClick={setAgentDefault}
+              >
+                <ImageWithFallback
+                  src={agent.image ?? ''}
+                  className="image"
+                  fallback={<Icon className="image" size="xs" icon="Agent" />}
+                />
+                <Center className="icon-remove">
+                  <Icon icon="TimesMini" />
+                </Center>
+              </ImageButton>
+            </Tooltip>
+          }
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/MessageInput/ButtonBar.tsx

@@ -0,0 +1,57 @@
+import { IconButton, Row } from '@stack-spot/citric-react'
+import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+import { ModelSwitcher } from './ModelSwitcher'
+import { SelectContent } from './SelectContent'
+import { SelectionBarWrapper } from './styled'
+
+interface SelectionBarProps {
+  /**
+   * A function to run when the send button is clicked.
+   */
+  onSend: () => void,
+  /**
+   * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
+   */
+  isLoading?: boolean,
+}
+
+export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
+  const t = useMessageInputDictionary()
+  const chat = useCurrentChat()
+  const widget = useWidget()
+  const features = useCurrentChatState('features')
+
+  return (
+    <SelectionBarWrapper className="button-group">
+      <Row center={false} gap="4px">
+        <SelectContent />
+        {features.editor && (
+          <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
+        )}
+      </Row>
+      {features.showLLMSelect && <ModelSwitcher />}
+      {isLoading ? (
+        <IconButton
+          icon="Stop"
+          appearance="square"
+          colorScheme="inverse"
+          aria-label={t.cancel}
+          onClick={() => chat.abort()}
+          className="send"
+          title={t.cancel}
+        />
+      ) : (
+        <IconButton
+          icon="ArrowUp"
+          appearance="square"
+          colorScheme="inverse"
+          aria-label={t.send}
+          onClick={onSend}
+          className="send"
+          title={t.send}
+        />
+      )}
+    </SelectionBarWrapper>
+  )
+}

package/src/views/MessageInput/ContextBar.tsx

@@ -0,0 +1,117 @@
+import { loader } from '@monaco-editor/react'
+import { Badge, IconButton, Text } from '@stack-spot/citric-react'
+import { ColorPaletteName, listToClass } from '@stack-spot/portal-theme'
+import { useCallback, useMemo } from 'react'
+import { FadingOverflow } from '../../components/FadingOverflow'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+
+interface ContextBadgeProps {
+  label: string,
+  color: ColorPaletteName,
+  dismiss: string,
+  onDismiss?: () => void,
+}
+
+const ContextBadge = ({ label, color, dismiss, onDismiss }: ContextBadgeProps) => (
+  <Badge appearance="square" colorPalette={color} className="context-badge">
+    <Text nowrapEllipsis>{label}</Text>
+    {onDismiss && <IconButton
+      icon="TimesMini"
+      appearance="none"
+      onClick={onDismiss}
+      title={dismiss}
+      arial-label={dismiss}
+      style={{ padding: '2px 0 2px 2px', color: 'inherit' }}
+    />}
+  </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 ContextBar = () => {
+  const t = useMessageInputDictionary()
+  const chat = useCurrentChat()
+  const currentStack = useCurrentChatState('stack')
+  const currentWorkspace = useCurrentChatState('workspace')
+  const currentKnowledgeSources = useCurrentChatState('knowledgeSources')
+  const currentSelection = useCurrentChatState('codeSelection')
+  const features = useCurrentChatState('features')
+  const visible = !!(currentStack || currentWorkspace || currentKnowledgeSources?.length || currentSelection)
+  const ksToRender = useMemo(() => currentKnowledgeSources?.map(ks => {
+    const onDismiss = features.knowledgeSource
+      ? (() => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id)))
+      : undefined
+    return <li key={ks.id}><ContextBadge label={ks.label} dismiss={t.removeKS} color="teal" onDismiss={onDismiss} /></li>
+  }), [currentKnowledgeSources])
+  const shouldRenderRemoveAllButton = (
+    currentSelection
+    || (features.stack && currentStack)
+    || (features.workspace && currentWorkspace)
+    || (features.knowledgeSource && !!ksToRender?.length)
+  )
+
+  const removeAll = useCallback(() => {
+    if (features.knowledgeSource) chat.set('knowledgeSources', [])
+    if (features.stack) chat.set('stack', undefined)
+    if (features.workspace) chat.set('workspace', undefined)
+    removeCodeSelection()
+  }, [])
+
+  const removeCodeSelection = useCallback(() => {
+    const editor = loader.__getMonacoInstance()?.editor
+    editor?.getEditors()[0].setSelection({ startLineNumber: 0, endLineNumber: 0, endColumn: 0, startColumn: 0 })
+  }, [])
+
+  return (
+    <div className={listToClass(['info-bar', 'context-bar', visible && 'visible'])}>
+      <div className="space"></div>
+      <div className="content">
+        {shouldRenderRemoveAllButton && (
+          <IconButton 
+            icon="TimesMini"
+            aria-label={t.removeConfig}
+            title={t.removeConfig}
+            onClick={removeAll}
+            style={{ marginLeft: '8px' }}
+          />
+        )}
+        <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
+          <ul>
+            {currentSelection && (
+              <li>
+                <ContextBadge label={t.selected} dismiss={t.removeSelection} color="blue" onDismiss={removeCodeSelection} />
+              </li>
+            )}
+            {currentStack && (
+              <li>
+                <ContextBadge
+                  label={currentStack.label}
+                  dismiss={t.removeStack}
+                  color="cyan"
+                  onDismiss={features.stack ? (() => chat.set('stack', undefined)) : undefined}
+                />
+              </li>
+            )}
+            {currentWorkspace && (
+              <li>
+                <ContextBadge
+                  label={currentWorkspace.label}
+                  dismiss={t.removeWorkspace}
+                  color="pink"
+                  onDismiss={features.workspace ? (() => chat.set('workspace', undefined)) : undefined}
+                />
+              </li>
+            )}
+            {ksToRender}
+          </ul>
+        </FadingOverflow>
+      </div>
+    </div>
+  )
+}