@stack-spot/ai-chat-widget 1.1.1 → 1.3.0

package/src/state/ChatTabsController.ts

@@ -1,7 +1,7 @@
-import { last, pull } from 'lodash'
+import { groupBy, last, pull } from 'lodash'
 import { ChatState } from './ChatState'
 
-type TabChangeListener = (chats: ChatState[], activeId: string) => void
+type TabChangeListener = (chats: ChatState[], active: ChatState) => void
 
 /**
  * Controls the chat tabs.
@@ -12,7 +12,7 @@ export class ChatTabsController {
   private listeners: TabChangeListener[] = []
 
   private runListeners() {
-    this.listeners.forEach(l => l(this.chats, this.activeChatId))
+    this.listeners.forEach(l => l(this.chats, this.getActiveChat()))
   }
 
   /**
@@ -26,20 +26,50 @@ export class ChatTabsController {
   }
 
   /**
-   * Removes chats from the tab view.
-   * @param ids the ids of the chats to remove.
+   * If the active chat is deleted, this selects a new chat based on the position of the chat that has been removed.
+   * 
+   * @param previous the previous tabs.
+   * @param deleted the ids of the chats that have been deleted.
    */
-  remove(...ids: string[]) {
-    if (this.chats.length <= 1 || !ids.length) return
-    const currentActiveIndex = this.chats.findIndex(c => c.id === this.activeChatId)
-    this.chats = this.chats.filter(c => !ids.includes(c.id))
-    if (ids.includes(this.activeChatId)) {
+  private reselect(previous: ChatState[], deleted: string[]) {
+    if (deleted.includes(this.activeChatId)) {
+      const currentActiveIndex = previous.findIndex(c => c.id === this.activeChatId)
       if (currentActiveIndex === -1) this.activeChatId = this.chats[0]?.id
       this.activeChatId = currentActiveIndex < this.chats.length ? this.chats[currentActiveIndex].id : last(this.chats)?.id ?? ''
     }
+  }
+
+  /**
+   * Removes chats from the tab view. This will never remove a chat if this chat is the last one.
+   * 
+   * @param ids the ids of the chats to remove.
+   */
+  remove(...ids: string[]) {
+    ids.splice(this.chats.length - 1, ids.length - this.chats.length)
+    if (!ids.length) return
+    const previous = this.chats
+    this.chats = this.chats.filter(c => !ids.includes(c.id))
+    this.reselect(previous, ids)
     this.runListeners()
   }
 
+  /**
+   * Removes all empty chats. The last chat will be kept if it's empty, but the only chat remaining.
+   * 
+   * @param exceptions ids of chats that shouldn't be removed even if empty.
+   */
+  removeEmptyChats(...exceptions: string[]) {
+    const lastChat = last(this.chats)
+    const previous = this.chats
+    const { true: removed, false: kept = [] } = groupBy(this.chats, c => c.getMessages().length === 0 && !exceptions.includes(c.id))
+    if (removed) {
+      this.chats = kept
+      if (lastChat && this.chats.length === 0) this.chats.push(lastChat)
+      this.reselect(previous, removed.map(c => c.id))
+      this.runListeners()
+    }
+  }
+
   /**
    * @param id the id of the chat to retrieve.
    * @returns a ChatState corresponding to the id.
@@ -49,12 +79,21 @@ export class ChatTabsController {
   }
 
   /**
-   * @returns the if of the chat corresponding to the tab that is currently active.
+   * @returns the id of the chat corresponding to the tab that is currently active.
    */
   getActiveChatId() {
     return this.activeChatId
   }
 
+  /**
+   * @returns the chat corresponding to the tab that is currently active.
+   */
+  getActiveChat() {
+    const chat = this.chats.find(c => c.id === this.activeChatId)
+    if (!chat) throw new Error('Chat state error, the active chat id corresponds to none chat in the tabs.')
+    return chat
+  }
+
   /**
    * @returns all chats in tab view.
    */

package/src/state/WidgetState.ts

@@ -1,3 +1,11 @@
+import { loader } from '@monaco-editor/react'
+import { ulid } from 'ulid'
+import { quickCommandQuestionsInterceptor } from '../chat-interceptors/quick-command-questions'
+import { createQuickCommandInterceptor } from '../chat-interceptors/quick-commands'
+import { sendMessageInterceptor } from '../chat-interceptors/send-message'
+import { AIWidgetFeatures, ChatFeatures, getFeaturesWithDefaults, GlobalFeatures } from '../features'
+import { ChatEntry } from './ChatEntry'
+import { ChatPropertiesWithOptionalFeatures, ChatState, MessageInterceptor } from './ChatState'
 import { ChatTabsController } from './ChatTabsController'
 import { ObservableState } from './ObservableState'
 
@@ -14,8 +22,40 @@ export interface WidgetProperties {
    * Whether or not the widget is in its minimized version.
    */
   isMinimized?: boolean,
+  /**
+   * Global features of the chat widget. These features don't depend on the chat currently selected.
+   */
+  features: GlobalFeatures,
+}
+
+interface Options {
+  /**
+   * Chat interceptors allows you to intercept chat messages, interpret them, modify them and even change the chat flow. See
+   * {@link ChatState} for more details.
+   * 
+   * These interceptors, in addition to the default interceptors, will be used when creating a new chat via `WidgetState#createChat`.
+   */
+  interceptors?: MessageInterceptor[],
+  /**
+   * Features to enable in the widget. If a feature is not set explicitly to false, it's interpreted as enabled.
+   * 
+   * These features will be used when creating a new chat via `WidgetState#createChat`. Updating chat features only influence new chats.
+   */
+  features?: Partial<AIWidgetFeatures>,
+  /**
+   * The initial values for the widget state.
+   * 
+   * The default value for each feature under `initial.features` is true.
+   */
+  initial?: Omit<WidgetProperties, 'features'>,
+  /**
+   * The initial tabs for the chat window.
+   */
+  chatTabs?: ChatTabsController,
 }
 
+const untitledChatPrefix = 'Chat '
+
 /**
  * Holds the full state of the AI Chat Widget.
  * 
@@ -23,9 +63,55 @@ export interface WidgetProperties {
  */
 export class WidgetState extends ObservableState<WidgetProperties> {
   readonly chatTabs: ChatTabsController
+  /**
+   * Chat interceptors to be used by default when creating a new chat.
+   */
+  interceptors: MessageInterceptor[] = []
+  /**
+   * Chat features to be used by default when creating a new chat.
+   */
+  chatFeatures: ChatFeatures
 
-  constructor(initial: WidgetProperties = {}, chatTabs?: ChatTabsController) {
-    super(initial)
+  constructor({ chatTabs, initial, interceptors = [], features }: Options = {}) {
+    const featuresWithDefaults = getFeaturesWithDefaults(features)
+    super({ ...initial, features: featuresWithDefaults })
+    this.chatFeatures = featuresWithDefaults
     this.chatTabs = chatTabs ?? new ChatTabsController()
+    this.interceptors = [
+      ...interceptors,
+      quickCommandQuestionsInterceptor,
+      createQuickCommandInterceptor(this, () => loader.__getMonacoInstance()?.editor),
+      sendMessageInterceptor,
+    ]
+    this.createChat()
+  }
+
+  private getNextUntitledChatIndex() {
+    let max = 0
+    for (const chat of this.chatTabs.getAll()) {
+      const [, match] = chat.get('label').match(`${untitledChatPrefix}(\\d+)`) ?? []
+      const index = parseInt(match)
+      if (index > max) max = index
+    }
+    return max + 1
+  }
+
+  /**
+   * Utility function for adding a new chat to the chat tabs. This also selects the new tab.
+   * @param properties the chat properties (initial state).
+   * @param entries the entries for the chat to start with.
+   * @returns the chat created.
+   */
+  createChat({ label, ...properties }: Partial<ChatPropertiesWithOptionalFeatures> = {}, entries: ChatEntry[] = []) {
+    const chat = new ChatState({
+      id: ulid(),
+      initial: { label: label || `${untitledChatPrefix}${this.getNextUntitledChatIndex()}`, features: this.chatFeatures, ...properties },
+      entries,
+      interceptors: this.interceptors,
+      untitled: !label,
+    })
+    this.chatTabs.add(chat)
+    this.chatTabs.select(chat.id)
+    return chat
   }
 }

package/src/utils/chat.ts

@@ -1,25 +1,8 @@
 import { FixedChatRequest } from '@stack-spot/portal-network'
-import { ulid } from 'ulid'
 import appData from '../app-metadata.json'
-import { ChatState, MessageInterceptor } from '../state/ChatState'
-import { WidgetState } from '../state/WidgetState'
+import { ChatState } from '../state/ChatState'
 import { defaultLanguage } from './programming-languages'
 
-// helps with naming new chats
-let next = 1
-
-/**
- * Utility for creating a new chat in the chat tabs.
- * @param widget the widget state.
- * @param interceptors the interceptors to add the chat.
- */
-export function createNewChat(widget: WidgetState, interceptors: MessageInterceptor[]) {
-  const id = ulid()
-  widget.chatTabs.add(new ChatState({ id, initial: { label: `Chat ${next}` }, interceptors }))
-  widget.chatTabs.select(id)
-  next++
-}
-
 /**
  * Builds a conversation context from a ChatState.
  * 

package/src/views/Agents/AgentDescription.tsx

@@ -0,0 +1,48 @@
+import { Text } from '@citric/core'
+import { Badge, Skeleton } from '@citric/ui'
+import { agentClient } from '@stack-spot/portal-network'
+import { useMemo } from 'react'
+import { useAgentsDictionary } from './dictionary'
+import { AgentDescriptionBox } from './styled'
+
+interface Props {
+  agentId?: string,
+  llm?: string,
+  description?: string,
+  numberOfKnowledgeSources: number,
+}
+
+export const AgentDescription = ({ agentId, llm, description, numberOfKnowledgeSources }: Props) => {
+  const t = useAgentsDictionary()
+  const [agent,,, { isLoading }] = agentClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
+  const knowledgeSources = useMemo(
+    () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
+      <li key={index}><Badge palette="teal" appearance="square">{ks.name}</Badge></li>
+    )),
+    [agent],
+  )
+  const skeleton = useMemo(() => {
+    const loadingKS: React.ReactElement[] = []
+    for (let i = 0; i < numberOfKnowledgeSources; i++) {
+      loadingKS.push(<li key={i}><Badge palette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
+    }
+    return loadingKS
+  }, [numberOfKnowledgeSources])
+
+  return (
+    <AgentDescriptionBox>
+      {description && <section>
+        <Text appearance="microtext1" className="title">{t.description}</Text>
+        <Text>{description}</Text>
+      </section>}
+      {(!!numberOfKnowledgeSources || !!knowledgeSources?.length) && <section>
+        <Text appearance="microtext1" className="title">Knowledge sources</Text>
+        <ul>{isLoading ? skeleton : knowledgeSources}</ul>
+      </section>}
+      {llm && <section>
+        <Text appearance="microtext1" className="title">LLM</Text>
+        <Badge palette="orange" appearance="square">{llm}</Badge>
+      </section>}
+    </AgentDescriptionBox>
+  )
+}

package/src/views/Agents/AgentsPanel.tsx

@@ -0,0 +1,19 @@
+import { RightPanelTabs } from '../../components/RightPanelTabs'
+import { useCurrentChat } from '../../context/hooks'
+import { AgentsTab } from './AgentsTab'
+import { useAgentsDictionary } from './dictionary'
+
+/**
+ * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
+ */
+export const AgentsPanel = () => {
+  const t = useAgentsDictionary()
+  const chat = useCurrentChat()
+  
+  return <RightPanelTabs key={chat.id} tabs={[
+    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" /> },
+    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" /> },
+    { title: t.shared, content: <AgentsTab key="shared" visibility="SHARED" /> },
+    { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" /> },
+  ]} />
+}

package/src/views/Agents/AgentsTab.tsx

@@ -0,0 +1,80 @@
+import { Button, Text } from '@citric/core'
+import { Search } from '@citric/icons'
+import { Placeholder } from '@stack-spot/portal-components/Placeholder'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { agentClient } from '@stack-spot/portal-network'
+import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/agent'
+import { useMemo, useState } from 'react'
+import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
+import { IconInput } from '../../components/IconInput'
+import { useCurrentChat } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { AgentDescription } from './AgentDescription'
+import { useAgentsDictionary } from './dictionary'
+import { AgentLabel } from './styled'
+
+export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' }) => {
+  const t = useAgentsDictionary()
+  const { close } = useRightPanel()
+  const chat = useCurrentChat()
+  const [filter, setFilter] = useState('')
+  const defaultAgent = useMemo(() => ({
+    id: '',
+    name: 'Stackspot AI',
+    description: t.defaultAgentDescription,
+    llm_config: { model_slug: 'gpt4o' },
+  } as AgentResponse), [])
+  const agents = visibility === 'BUILT-IN' ? agentClient.publicAgents.useQuery({}) : agentClient.agents.useQuery({ visibility })
+  const [value, setValue] = useState<AgentResponse | undefined>(
+    chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : defaultAgent,
+  )
+  const filtered = useMemo(
+    () => {
+      const ags = visibility === 'BUILT-IN' ? [defaultAgent as AgentResponse, ...agents] : agents
+      return filter ? ags.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : ags
+    },
+    [agents, filter, value],
+  )
+
+  function submit() {
+    if (value) {
+      chat.set('agent', value.id ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN' } : undefined)
+    }
+    close()
+  }
+
+  return (
+    <>
+      <div className="content">
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+        {!!filtered.length && <DescribedRadioGroup
+          options={filtered}
+          keygen={a => a.id}
+          value={value}
+          onChange={setValue}
+          renderLabel={({ name, avatar, id }) => (
+            <AgentLabel>
+              {id ? (avatar && <img src={avatar} />) : <MiniLogo />}
+              <Text>{name}</Text>
+            </AgentLabel>
+          )}
+          renderDescription={a => <AgentDescription
+            agentId={a.id}
+            description={a.description}
+            llm={a.llm_config?.model_slug}
+            numberOfKnowledgeSources={a.knowledge_sources_config?.knowledge_sources?.length ?? 0}
+          />}
+          optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+            ? 'filtered-out'
+            : ''
+          }
+          className="option-list"
+        />}
+        {!!agents.length && !filtered.length &&
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
+        {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+      </div>
+      {!!filtered.length && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
+    </>
+  )
+}

package/src/views/Agents/dictionary.ts

@@ -0,0 +1,36 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    title: 'Agents',
+    subtitle: 'By selecting an Agent, it will be consulted to generate the answers.',
+    personal: 'Personal',
+    builtin: 'Built-in',
+    shared: 'Shared',
+    account: 'Account',
+    apply: 'Apply',
+    noSearchResults: "Your search didn't yield results.",
+    noSearchResultsDescription: 'Please, try another search term.',
+    noData: 'There are no agents in this category yet.',
+    noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
+    defaultAgentDescription: 'The StackSpot CodeGen is an advanced artificial intelligence agent designed to optimize and accelerate software development. Integrated directly into your integrated development environment, StackSpot CodeGen offers real-time code suggestions, helping developers write high-quality code more efficiently. With robust features such as creating Stacks AI, customized knowledge sources, and quick commands, StackSpot CodeGen contextualizes your development needs to provide the best answers and code suggestions.',
+    description: 'Description',
+  },
+  pt: {
+    title: 'Agentes',
+    subtitle: 'Ao selecionar um Agente, ele será consultado para gerar as respostas.',
+    personal: 'Pessoal',
+    builtin: 'Embutido',
+    shared: 'Compartilhado',
+    account: 'Conta',
+    apply: 'Aplicar',
+    noSearchResults: 'Sua busca não produziu resultados.',
+    noSearchResultsDescription: 'Por favor, tente outra busca.',
+    noData: 'Ainda não há agentes nesta categoria.',
+    noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
+    defaultAgentDescription: 'O StackSpot CodeGen é um agente de inteligência artificial avançado projetado para otimizar e acelerar o desenvolvimento de software. Integrado diretamente ao seu ambiente de desenvolvimento, o StackSpot CodeGen oferece sugestões de código em tempo real, ajudando os desenvolvedores a escreverem código de alta qualidade de forma mais eficiente. Com recursos robustos, como a criação de Stacks AI, Knowledge Sources personalizadas e comandos rápidos, o StackSpot CodeGen contextualiza suas necessidades de desenvolvimento para fornecer as melhores respostas e sugestões de código.',
+    description: 'Descrição',
+  },
+} satisfies Dictionary
+
+export const useAgentsDictionary = () => useTranslate(dictionary)

package/src/views/Agents/index.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { useWidget, useWidgetState } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { AgentsPanel } from './AgentsPanel'
+import { useAgentsDictionary } from './dictionary'
+
+/**
+ * Renders the panel to select an agent of this panel is opened.
+ */
+export const Agents = () => {
+  const t = useAgentsDictionary()
+  const panel = useWidgetState('panel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'agent') open(
+      <AgentsPanel />,
+      { title: t.title, description: t.subtitle, onClose: () => widget.set('panel', undefined) },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+

package/src/views/Agents/styled.ts

@@ -0,0 +1,59 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const AgentLabel = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+
+  img, svg {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+`
+
+export const AgentDescriptionBox = styled.div`
+  color: ${theme.color.light[700]};
+  line-height: 18px;
+
+  section {
+    border-bottom: 1px solid ${theme.color.light[600]};
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    .title {
+      display: block;
+      margin-bottom: 6px;
+    }
+  }
+  
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    gap: 6px;
+
+    li {
+      margin: 3px 0;
+    }
+  }
+
+  .ks-skeleton {
+    width: 100px;
+    height: 12px;
+    mix-blend-mode: color-dodge;
+  }
+`

package/src/views/Chat/ChatMessage.tsx

@@ -86,21 +86,23 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
             ? <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
             : <p className="plain-text">{entry.content}</p>
           }
-          {entry.actions?.length && <div className="actions">
-            {entry.actions.map(
-              (a, index) => (
-                <Button
-                  key={index}
-                  appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
-                  colorScheme="inverse"
-                  onClick={() => runAction(a)}
-                  disabled={!isLast}
-                >
-                  {a.title}
-                </Button>
-              ),
-            )}
-          </div>}
+          {entry.actions?.length && (
+            <div className="actions">
+              {entry.actions.map(
+                (a, index) => (
+                  <Button
+                    key={index}
+                    appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
+                    colorScheme="inverse"
+                    onClick={() => runAction(a)}
+                    disabled={!isLast}
+                  >
+                    {a.title}
+                  </Button>
+                ),
+              )}
+            </div>
+          )}
         </div>}
       </div>
       {entry.error && (
@@ -111,8 +113,8 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
       )}
       {!!entry.knowledgeSources?.length && <div className="ks-box">
         <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
-        <ul>{entry.knowledgeSources.map(ks => (
-          <li key={ks.slug}>
+        <ul>{entry.knowledgeSources.map((ks, index) => (
+          <li key={index}>
             <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
           </li>
         ))}</ul>

package/src/views/Chat/index.tsx

@@ -13,5 +13,5 @@ interface Props {
  */
 export const Chat = ({ username }: Props) => {
   const { active } = useChatTabs()
-  return <ChatMessages key={active} chatId={active} username={username} />
+  return <ChatMessages key={active.id} chatId={active.id} username={username} />
 }

package/src/views/Chat/styled.ts

@@ -132,12 +132,12 @@ export const ChatList = styled.ul`
 
     &.user {
       align-items: end;
+      margin-left: 15%;
 
       .chat-message {
         display: flex;
         flex-direction: row;
         gap: 8px;
-        align-items: center;
         
         .message-content {
           padding: 10px;

package/src/views/ChatHistory/ChatHistoryPanel.tsx

@@ -2,13 +2,12 @@ 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[] }) => {
+export const ChatHistoryPanel = () => {
   const [chats, { fetchNextPage, hasNextPage }] = aiClient.chats.useInfiniteQuery({ size: 40 })
   return (
     <AutoFocus id="chatHistoryList" style={{ height: '100%', overflow: 'auto' }}>
@@ -23,7 +22,7 @@ export const ChatHistoryPanel = ({ interceptors }: { interceptors: MessageInterc
           items={chats}
           getDate={c => new Date(c.updated || c.created || '')}
           keygen={c => c.id}
-          renderItem={c => <HistoryItem item={c} interceptors={interceptors} />}
+          renderItem={c => <HistoryItem item={c} />}
           style={{ marginRight: '6px' }}
         />
       </InfiniteScroll>

package/src/views/ChatHistory/HistoryItem.tsx

@@ -10,7 +10,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { OverlayMenu } from '../../components/OverlayMenu'
 import { useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
-import { ChatState, MessageInterceptor } from '../../state/ChatState'
+import { ChatState } from '../../state/ChatState'
 import { ButtonAction } from '../../types'
 import { download } from '../../utils/download'
 import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
@@ -21,7 +21,7 @@ import { findStack, findWorkspace, getAllAgents } from './utils'
 /**
  * Renders an item of the list of conversations (history).
  */
-export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse, interceptors: MessageInterceptor[] }) => {
+export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   const t = useHistoryDictionary()
   const [isLoading, setLoading] = useState(false)
   const [isRenaming, setRenaming] = useState(false)
@@ -98,7 +98,7 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
       widget.chatTabs.add(new ChatState({
         id: chat.id,
         initial: { label: chat.title, stack, workspace, agent: agent ? { ...agent, builtIn } : undefined },
-        interceptors,
+        interceptors: widget.interceptors,
         entries: chat.history?.map(item => new ChatEntry({
           agentType: item.agent === 'USER' ? 'user' : 'bot',
           content: item.content,

package/src/views/ChatHistory/index.tsx

@@ -2,21 +2,13 @@ import { useEffect } from 'react'
 import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useWidget, useWidgetState } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
-import { MessageInterceptor } from '../../state/ChatState'
 import { ChatHistoryPanel } from './ChatHistoryPanel'
 import { useHistoryDictionary } from './dictionary'
 
-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) => {
+export const ChatHistory = () => {
   const t = useHistoryDictionary()
   const panel = useWidgetState('panel')
   const { open } = useRightPanel()
@@ -24,7 +16,7 @@ export const ChatHistory = ({ interceptors }: Props) => {
 
   useEffect(() => {
     if (panel === 'history') open(
-      <FallbackBoundary><ChatHistoryPanel interceptors={interceptors} /></FallbackBoundary>,
+      <FallbackBoundary><ChatHistoryPanel /></FallbackBoundary>,
       {
         title: t.title,
         description: t.description,