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

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

@@ -46,8 +46,12 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
   if (agentType !== 'user') return
   const context = buildConversationContext(chat)
   chat.set('isLoading', true)
+  const untitled = chat.untitled
   const isFirstMessage = chat.getMessages().length === 1
-  if (isFirstMessage) chat.set('label', content)
+  if (untitled) {
+    chat.set('label', content)
+    chat.untitled = false
+  }
   const stream = aiClient.sendChatMessage({ context, user_prompt: content.replace(/^\s*\\(\\|\/)/, '$1') })
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
@@ -63,7 +67,23 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     const finalValue = await stream.getValue()
     botEntry.setValue(createEntryValueFromChatResponse(finalValue, knowledgeSources, chat.get('agent'), true))
     aiClient.chat.invalidate({ conversationId: chat.id })
-    if (isFirstMessage) aiClient.chats.invalidate()
+    if (isFirstMessage) {
+      // if the chat has a title and this was its first message, we need to rename it according to the title, otherwise, the backend will
+      // keep the name generated by default.
+      if (!untitled) {
+        try {
+          await aiClient.renameChat.mutate({
+            conversationId: chat.id,
+            conversationUpdateTitleRequest: { title: chat.get('label') },
+          })
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.warn('Failed to rename chat:', chat.get('label'), error)
+        }
+      }
+      // this makes sure to update the chat history
+      aiClient.chats.invalidate()
+    }
   } catch (error: any) {
     botEntry.setValue({
       ...botEntry.getValue(),

package/src/components/AutoFocus.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import { focusFirstChild, TagPriorityElement } from '@stack-spot/portal-components'
 import { forwardRef, RefObject, useEffect, useRef } from 'react'
+import { styled } from 'styled-components'
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -19,6 +20,13 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   ignore?: string,
 }
 
+const FlexibleDiv = styled.div`
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`
+
 /**
  * Focus the first focusable child as soon as the component mounts.
  */
@@ -30,5 +38,5 @@ export const AutoFocus = forwardRef<HTMLDivElement, Props>(({ children, delay =
     setTimeout(() => focusFirstChild(ref.current, { priority, ignore }), delay)
   }, [])
 
-  return <div ref={ref} {...props}>{children}</div>
+  return <FlexibleDiv ref={ref} {...props}>{children}</FlexibleDiv>
 })

package/src/components/FadingOverflow.tsx

@@ -45,8 +45,8 @@ const SCROLL_PX = 4
 const masks = {
   right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
   left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  top: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  bottom: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
   horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
   vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
 }

package/src/components/QuickStartButton.tsx

@@ -2,9 +2,15 @@ import { IconBox, Text } from '@citric/core'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 import { ButtonAction } from '../types'
+import { FadingOverflow } from './FadingOverflow'
 
 interface Props extends ButtonAction, WithStyle {
   background?: string,
+  /**
+   * Whether or not the vertical overflow of this button should be managed by the component {@link FadingOverflow}.
+   * @default false
+   */
+  manageOverflow?: boolean,
 }
 
 /**
@@ -46,9 +52,15 @@ const QuickButton = styled.button<{ $color?: string, $bg?: string }>`
   }
 `
 
-export const QuickStartButton = ({ label, onClick, background, className, color, icon, style }: Props) => (
-  <QuickButton className={className} style={style} onClick={onClick} $color={color} $bg={background}>
-    <IconBox aria-hidden>{icon}</IconBox>
+export const QuickStartButton = ({ label, onClick, background, className, color, icon, style, manageOverflow }: Props) => {
+  const content = <>
+    {icon && <IconBox aria-hidden>{icon}</IconBox>}
     <Text>{label}</Text>
-  </QuickButton>
-)
+  </>
+
+  return (
+    <QuickButton className={className} style={style} onClick={onClick} $color={color} $bg={background}>
+      {manageOverflow ? <FadingOverflow sides={['top', 'bottom']} scroll="wheel">{content}</FadingOverflow> : content}
+    </QuickButton>
+  )
+}

package/src/components/RightPanelForm.tsx

@@ -1,5 +1,6 @@
 import { Card } from '@citric/ui'
 import { styled } from 'styled-components'
+import { panelAnimationTime } from '../right-panel/constants'
 import { PropsOf } from '../types'
 import { AutoFocus } from './AutoFocus'
 import { FallbackBoundary } from './FallbackBoundary'
@@ -46,7 +47,7 @@ const Form = styled.form`
  */
 export const RightPanelForm = ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => (
   <FallbackBoundary>
-    <AutoFocus>
+    <AutoFocus delay={panelAnimationTime}>
       <Form
         {...props}
         onSubmit={(e) => {

package/src/context/hooks.ts

@@ -39,11 +39,11 @@ export function useWidgetState<K extends keyof WidgetProperties>(key: K): Widget
 /**
  * Watches the tabs of a ChatState. The value is updated whenever a tab is added, removed or selected.
  */
-export function useChatTabs(): { chats: ChatState[], active: string } {
+export function useChatTabs(): { chats: ChatState[], active: ChatState } {
   const widget = useWidget()
-  const [tabs, setTabs] = useState<{ chats: ChatState[], active: string }>({
-    chats: widget.chatTabs.getAll(), 
-    active: widget.chatTabs.getActiveChatId(),
+  const [tabs, setTabs] = useState<{ chats: ChatState[], active: ChatState }>({
+    chats: widget.chatTabs.getAll(),
+    active: widget.chatTabs.getActiveChat(),
   })
   useEffect(() => widget.chatTabs.onChange((chats, active) => setTabs({ chats, active })), [])
   return tabs
@@ -59,7 +59,7 @@ export function useChatTabs(): { chats: ChatState[], active: string } {
 export function useChat(chatId: string): ChatState {
   const widget = useWidget()
   const chat = widget.chatTabs.get(chatId)
-  if (!chat) throw new Error(`No chat with id ${chatId} was found. Maybe there are no chats opened, try to call useFirstChat first.`)
+  if (!chat) throw new Error(`No chat with id ${chatId} was found. Maybe there are no chats opened.`)
   return chat
 }
 
@@ -71,8 +71,7 @@ export function useChat(chatId: string): ChatState {
  * @returns the currently active chat. 
  */
 export function useCurrentChat(): ChatState {
-  const { active } = useChatTabs()
-  return useChat(active)
+  return useChatTabs().active
 }
 
 /**
@@ -118,7 +117,7 @@ export function useChatMessages(chatId: string): ChatEntry[] {
  */
 export function useCurrentChatMessages(): ChatEntry[] {
   const { active } = useChatTabs()
-  return useChatMessages(active)
+  return useChatMessages(active.id)
 }
 
 /**

package/src/features.ts

@@ -1,50 +1,53 @@
-export interface MessageInputFeatures {
+export interface ChatFeatures {
   /**
    * Enables stack selection.
-   * @default true
    */
-  stack?: boolean,
+  stack: boolean,
   /**
    * Enables workspace selection.
-   * @default true
    */
-  workspace?: boolean,
+  workspace: boolean,
   /**
    * Enables knowledge source selection.
-   * @default true
    */
-  knowledgeSource?: boolean,
+  knowledgeSource: boolean,
   /**
    * Enables agent selection.
-   * @default true
    */
-  agent?: boolean,
+  agent: boolean,
   /**
    * Enables quick commands.
-   * @default true
    */
-  quickCommands?: boolean,
+  quickCommands: boolean,
   /**
    * Enables the editor.
-   * @default true
    */
-  editor?: boolean,
+  editor: boolean,
 }
 
-export interface AIWidgetFeatures extends MessageInputFeatures {
+export interface GlobalFeatures {
   /**
    * Enables the chat history.
-   * @default true
    */
-  chatHistory?: boolean,
+  chatHistory: boolean,
 }
 
-export const defaultFeatures: AIWidgetFeatures = {
-  stack: true,
-  workspace: true,
-  knowledgeSource: true,
-  agent: true,
-  chatHistory: true,
-  editor: true,
-  quickCommands: true,
+export type AIWidgetFeatures = ChatFeatures & GlobalFeatures
+
+/**
+ * Receives a partial feature object and returns a full feature object, setting to true any missing property.
+ * @param features the partial features object.
+ * @returns a full features object.
+ */
+export function getFeaturesWithDefaults(features?: Partial<AIWidgetFeatures>): AIWidgetFeatures {
+  return {
+    agent: true,
+    editor: true,
+    knowledgeSource: true,
+    quickCommands: true,
+    stack: true,
+    workspace: true,
+    chatHistory: true,
+    ...features,
+  }
 }

package/src/index.ts

@@ -1,8 +1,14 @@
+/* Attention: in order for the package "page" to work without linking the lib, we must export types separately, using the "type" keyword */
+
+export { QuickStartButton } from './components/QuickStartButton'
 export { AIWidgetProvider } from './context/AIWidgetProvider'
 export * from './context/hooks'
+export { getFeaturesWithDefaults } from './features'
+export type { AIWidgetFeatures, ChatFeatures } from './features'
 export { StackspotAIWidget } from './StackspotAIWidget'
 export { ChatEntry } from './state/ChatEntry'
 export { ChatState } from './state/ChatState'
 export { ChatTabsController } from './state/ChatTabsController'
 export { ObservableState } from './state/ObservableState'
+export type { Labeled, LabeledWithImage } from './state/types'
 export { WidgetState } from './state/WidgetState'

package/src/layout.css

@@ -128,3 +128,10 @@
     left: 50%;
   }
 }
+
+/* fixes placeholder description */
+.no-data-placeholder {
+  > div > p {
+    text-align: center;
+  }
+}

package/src/state/ChatState.ts

@@ -1,11 +1,12 @@
 import { dropRight, last, pull } from 'lodash'
 import { ulid } from 'ulid'
 import { AbortedError } from '../AbortedError'
+import { ChatFeatures, getFeaturesWithDefaults } from '../features'
 import { ChatEntry } from './ChatEntry'
 import { ObservableState } from './ObservableState'
 import { Labeled, LabeledWithImage } from './types'
 
-export interface ChatProperties {
+export interface ChatPropertiesWithOptionalFeatures {
   /**
    * The name of the chat.
    */
@@ -46,6 +47,19 @@ export interface ChatProperties {
    * The current selection in the editor.
    */
   codeSelection?: string,
+  /**
+   * The features enabled for this chat.
+   * 
+   * If a feature is marked as false, it's disabled, otherwise it's enabled.
+   */
+  features?: Partial<ChatFeatures>,
+}
+
+export interface ChatProperties extends ChatPropertiesWithOptionalFeatures {
+  /**
+   * The features enabled for this chat.
+   */
+  features: ChatFeatures,
 }
 
 type ChatMessagesListener = (chat: ChatEntry[]) => void
@@ -62,7 +76,7 @@ interface Options {
   /**
    * The initial value for the state of this chat.
    */
-  initial: ChatProperties,
+  initial: ChatPropertiesWithOptionalFeatures,
   /**
    * The interceptors to use for the messages pushed to this chat.
    * 
@@ -86,6 +100,12 @@ interface Options {
    * The content of this chat, i.e. its messages.
    */
   entries?: ChatEntry[],
+  /**
+   * Whether or not the label for this chat is real (persisted in the backend) or just a mock.
+   * 
+   * This should be true if the label is just a mock.
+   */
+  untitled?: boolean,
 }
 
 /**
@@ -104,12 +124,14 @@ export class ChatState extends ObservableState<ChatProperties> {
    * Abort signals currently active.
    */
   private abortions: AbortController[] = []
+  untitled: boolean
 
-  constructor({ id, initial, entries = [], interceptors = [] }: Options) {
-    super(initial)
+  constructor({ id, initial, entries = [], interceptors = [], untitled = false }: Options) {
+    super({ ...initial, features: getFeaturesWithDefaults(initial.features) })
     this.id = id
     this.interceptors = interceptors
     this.entries = entries
+    this.untitled = untitled
   }
 
   private runMessagesListeners() {

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

@@ -3,8 +3,9 @@ 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 { ChatProperties, ChatState, MessageInterceptor } from './ChatState'
+import { ChatPropertiesWithOptionalFeatures, ChatState, MessageInterceptor } from './ChatState'
 import { ChatTabsController } from './ChatTabsController'
 import { ObservableState } from './ObservableState'
 
@@ -22,27 +23,39 @@ export interface WidgetProperties {
    */
   isMinimized?: boolean,
   /**
-   * Whether or not the execution of quick commands is enabled.
+   * Global features of the chat widget. These features don't depend on the chat currently selected.
    */
-  areQuickCommandsEnabled?: boolean,
+  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?: WidgetProperties,
+  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.
  * 
@@ -55,12 +68,14 @@ export class WidgetState extends ObservableState<WidgetProperties> {
    */
   interceptors: MessageInterceptor[] = []
   /**
-   * helps with naming new chats
+   * Chat features to be used by default when creating a new chat.
    */
-  private next = 1
+  chatFeatures: ChatFeatures
 
-  constructor({ chatTabs, initial = {}, interceptors = [] }: Options = {}) {
-    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,
@@ -71,21 +86,32 @@ export class WidgetState extends ObservableState<WidgetProperties> {
     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.
+   * 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 a function that, when called, removes the chat tab.
+   * @returns the chat created.
    */
-  createChat(properties?: ChatProperties, entries: ChatEntry[] = []) {
+  createChat({ label, ...properties }: Partial<ChatPropertiesWithOptionalFeatures> = {}, entries: ChatEntry[] = []) {
     const chat = new ChatState({
       id: ulid(),
-      initial: { label: `Chat ${this.next++}`, ...properties },
+      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 () => this.chatTabs.remove(chat.id)
+    return chat
   }
 }

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" /> },
+  ]} />
+}