@stack-spot/ai-chat-widget 0.3.0 → 0.5.0

package/dist/views/ChatHistory/HistoryItem.js

@@ -4,6 +4,7 @@ import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icon
 import { IconButton, LoadingCircular } from '@citric/ui';
 import { aiClient } from '@stack-spot/portal-network';
 import { theme } from '@stack-spot/portal-theme';
+import { last } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { OverlayMenu } from '../../components/OverlayMenu.js';
 import { useWidget } from '../../context/hooks.js';
@@ -13,7 +14,7 @@ import { download } from '../../utils/download.js';
 import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source.js';
 import { useHistoryDictionary } from './dictionary.js';
 import { HistoryItemBox } from './styled.js';
-import { findStack, findWorkspace } from './utils.js';
+import { findStack, findWorkspace, getAllAgents } from './utils.js';
 export const HistoryItem = ({ item, interceptors }) => {
     const t = useHistoryDictionary();
     const [isLoading, setLoading] = useState(false);
@@ -31,17 +32,19 @@ export const HistoryItem = ({ item, interceptors }) => {
         setRenaming(true);
     }, []);
     async function onSubmitRename() {
+        const prev = title;
         setRenaming(false);
+        setTitle(renamed);
         if (!renamed || renamed === item.title)
             return;
         try {
             await aiClient.renameChat.mutate({ conversationId: item.id, conversationUpdateTitleRequest: { title: renamed } });
-            setTitle(renamed);
             aiClient.chats.invalidate();
         }
         catch (error) {
             // eslint-disable-next-line no-console
             console.error(error);
+            setTitle(prev);
             setRenaming(true);
         }
     }
@@ -76,18 +79,22 @@ export const HistoryItem = ({ item, interceptors }) => {
         setLoading(true);
         try {
             const chat = await aiClient.chat.query({ conversationId: item.id });
-            const [stack, workspace] = await Promise.all([findStack(chat.ai_stack_id), findWorkspace(chat.workspace_id)]);
+            const [stack, workspace, agents] = await Promise.all([
+                findStack(chat.ai_stack_id),
+                findWorkspace(chat.workspace_id),
+                getAllAgents(),
+            ]);
             widget.chatTabs.add(new ChatState({
                 id: chat.id,
-                initial: { label: chat.title, stack, workspace },
+                initial: { label: chat.title, stack, workspace, agent: agents.find(a => a.id === last(chat.history)?.custom_agent?.id) },
                 interceptors,
                 entries: chat.history?.map(item => new ChatEntry({
-                    agent: item.agent === 'USER' ? 'user' : 'bot',
+                    agentType: item.agent === 'USER' ? 'user' : 'bot',
                     content: item.content,
                     type: item.agent === 'USER' ? 'text' : 'md',
-                    agentId: item.custom_agent?.id,
+                    agent: agents.find(a => a.id === item.custom_agent?.id),
                     messageId: item.message_id,
-                    knowledgeSources: genericSourcesToKnowledgeSources(item.sources),
+                    knowledgeSources: item.agent === 'USER' ? undefined : genericSourcesToKnowledgeSources(item.sources),
                     updated: item.updated,
                 })),
             }));
@@ -104,6 +111,6 @@ export const HistoryItem = ({ item, interceptors }) => {
         { label: t.download, onClick: onDownload, icon: _jsx(Download, {}) },
         { label: t.delete, onClick: onDelete, icon: _jsx(Trash, {}), color: theme.color.danger[500] },
     ];
-    return isDeleted ? null : (_jsx(HistoryItemBox, { className: isLoading ? 'loading' : '', children: isRenaming ? (_jsxs(_Fragment, { children: [_jsx(Input, { ref: renameInput, value: renamed, onChange: e => setRenamed(e.target.value) }), _jsx(IconButton, { onClick: onSubmitRename, children: _jsx(Check, {}) })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { className: "label", onClick: onSelect, disabled: isLoading, children: title }), isLoading ? _jsx(LoadingCircular, { size: "xs" }) : _jsx(OverlayMenu, { actions: actions, position: "left", children: _jsx(IconBox, { children: _jsx(EllipsisHorizontal, {}) }) })] })) }));
+    return isDeleted ? null : (_jsx(HistoryItemBox, { className: isLoading ? 'loading' : '', children: isRenaming ? (_jsxs(_Fragment, { children: [_jsx(Input, { ref: renameInput, value: renamed, onChange: e => setRenamed(e.target.value), onKeyDown: e => e.key === 'Enter' && onSubmitRename() }), _jsx(IconButton, { onClick: onSubmitRename, children: _jsx(Check, {}) })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { className: "label", onClick: onSelect, disabled: isLoading, children: title }), isLoading ? _jsx(LoadingCircular, { size: "xs" }) : _jsx(OverlayMenu, { actions: actions, position: "left", children: _jsx(IconBox, { children: _jsx(EllipsisHorizontal, {}) }) })] })) }));
 };
 //# sourceMappingURL=HistoryItem.js.map

package/dist/views/ChatHistory/HistoryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryItem.js","sourceRoot":"","sources":["../../../src/views/ChatHistory/HistoryItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"HistoryItem.js","sourceRoot":"","sources":["../../../src/views/ChatHistory/HistoryItem.tsx"],"names":[],"mappings":"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"}

package/dist/views/ChatHistory/utils.d.ts

@@ -1,4 +1,5 @@
 import { ChatProperties } from '../../state/ChatState.js';
 export declare function findStack(id: string | null): Promise<ChatProperties['stack'] | undefined>;
 export declare function findWorkspace(id: string | null): Promise<ChatProperties['workspace'] | undefined>;
+export declare function getAllAgents(): Promise<Required<ChatProperties>['agent'][]>;
 //# sourceMappingURL=utils.d.ts.map

package/dist/views/ChatHistory/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/ChatHistory/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,wBAAsB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,CAU/F;AAED,wBAAsB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAUvG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/ChatHistory/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,wBAAsB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,CAU/F;AAED,wBAAsB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAUvG;AAED,wBAAsB,YAAY,IAAI,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CASjF"}

package/dist/views/ChatHistory/utils.js

@@ -1,4 +1,4 @@
-import { aiClient, workspaceClient } from '@stack-spot/portal-network';
+import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network';
 export async function findStack(id) {
     if (!id)
         return;
@@ -25,4 +25,15 @@ export async function findWorkspace(id) {
         return { id, label: id };
     }
 }
+export async function getAllAgents() {
+    try {
+        const [agents, publicAgents] = await Promise.all([agentClient.agents.query({}), agentClient.publicAgents.query({})]);
+        return [...agents, ...publicAgents].map(a => ({ id: a.id, label: a.name, image: a.avatar }));
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        return [];
+    }
+}
 //# sourceMappingURL=utils.js.map

package/dist/views/ChatHistory/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/views/ChatHistory/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGtE,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,EAAiB;IAC/C,IAAI,CAAC,EAAE;QAAE,OAAM;IACf,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QAChD,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,EAAE,CAAA;IACjE,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACpB,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IAC1B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,EAAiB;IACnD,IAAI,CAAC,EAAE;QAAE,OAAM;IACf,IAAI,CAAC;QACH,MAAM,EAAE,GAAG,MAAM,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAA;QACrE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE,CAAA;IAC/B,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACpB,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IAC1B,CAAC;AACH,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/views/ChatHistory/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGnF,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,EAAiB;IAC/C,IAAI,CAAC,EAAE;QAAE,OAAM;IACf,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QAChD,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,EAAE,CAAA;IACjE,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACpB,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IAC1B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,EAAiB;IACnD,IAAI,CAAC,EAAE;QAAE,OAAM;IACf,IAAI,CAAC;QACH,MAAM,EAAE,GAAG,MAAM,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAA;QACrE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE,CAAA;IAC/B,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACpB,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IAC1B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,YAAY;IAChC,IAAI,CAAC;QACH,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QACpH,OAAO,CAAC,GAAG,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAC9F,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACpB,OAAO,EAAE,CAAA;IACX,CAAC;AACH,CAAC"}

package/dist/views/MessageInput/dictionary.d.ts

@@ -1,2 +1,2 @@
-export declare const useMessageInputDictionary: () => Record<"agent" | "stack" | "workspace" | "cancel" | "placeholder" | "send" | "collapse" | "knowledgeSource" | "expand" | "removeConfig" | "removeStack" | "removeWorkspace" | "removeKS", string>;
+export declare const useMessageInputDictionary: () => Record<"stack" | "workspace" | "agent" | "cancel" | "placeholder" | "send" | "collapse" | "knowledgeSource" | "expand" | "removeConfig" | "removeStack" | "removeWorkspace" | "removeKS", string>;
 //# sourceMappingURL=dictionary.d.ts.map

package/package.json

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

package/src/StackspotAIWidget.tsx

@@ -63,7 +63,7 @@ export const StackspotAIWidget = (
           <KSDocument />
           <Agents />
           <ChatHistory interceptors={interceptors} />
-          {!isMinimized && <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>}
+          <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
         </div>
       </RightPanelProvider>
     </TooltipProvider>

package/src/chat-interceptors/quick-commands.ts

@@ -3,8 +3,8 @@ import { ChatState } from '../state/ChatState'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function quickCommandInterceptor(entry: ChatEntry, _chat: ChatState) {
-  const { agent, content } = entry.getValue()
-  if (agent !== 'user') return
+  const { agentType, content } = entry.getValue()
+  if (agentType !== 'user') return
   if (content.startsWith('/')) {
     alert('Quick commands are not yet supported!') /* todo */
     return false // by returning false, the next interceptor are not run. i.e. the message is not sent to the AI agent.

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

@@ -5,8 +5,8 @@ import { buildConversationContext } from '../utils/chat'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
 
 export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState) {
-  const { agent, content } = entry.getValue()
-  if (agent !== 'user') return
+  const { agentType, content } = entry.getValue()
+  if (agentType !== 'user') return
   const context = buildConversationContext(chat)
   chat.set('isLoading', true)
   // if this is the first message, let's rename the chat.
@@ -22,12 +22,13 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState)
       knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
     }
     botEntry.setValue({
-      agent: 'bot',
+      agentType: 'bot',
       type: 'md',
       content: value.answer ?? '',
       messageId: value.message_id ?? undefined,
       knowledgeSources,
       updated: new Date().toISOString(),
+      agent: chat.get('agent'),
     })
   })
   try {

package/src/components/Tooltip/TooltipAPI.ts

@@ -3,17 +3,30 @@ import { ShowOptions } from './types'
 
 const MARGIN_TO_CORNERS_PX = 10
 
+function isRelative(element: HTMLElement) {
+  return ['relative', 'absolute', 'fixed'].includes(element.computedStyleMap().get('position')?.toString() ?? '')
+}
+
 export class TooltipAPI {
   private tooltipRef: React.RefObject<HTMLDivElement>
   private setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>
   private hideTimeoutId: number | undefined
   private clickListener: ((e: MouseEvent) => void) | undefined
+  private relativeTo: HTMLElement | undefined
 
   constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>) {
     this.tooltipRef = tooltipRef
     this.setContent = setContent
   }
 
+  private computeRelativeTo() {
+    if (this.relativeTo) return
+    this.relativeTo = this.tooltipRef.current?.parentElement as HTMLElement
+    while (this.relativeTo && this.relativeTo !== document.body && !isRelative(this.relativeTo)) {
+      this.relativeTo = this.relativeTo.parentElement as HTMLElement
+    }
+  }
+
   show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions): void {
     window.clearTimeout(this.hideTimeoutId)
     this.hideTimeoutId = undefined
@@ -21,21 +34,26 @@ export class TooltipAPI {
     this.setContent(content)
     setTimeout(() => {
       if (!this.tooltipRef.current) return
-      const rect = anchor.getClientRects()[0]
+      const anchorRect = anchor.getClientRects()[0]
       this.tooltipRef.current.classList.add('visible')
       const tooltipWidth = this.tooltipRef.current.clientWidth
       const tooltipHeight = this.tooltipRef.current.clientHeight
       let top = 0
       let left = 0
       if (position === 'left' || position === 'right') {
-        top = rect.top + rect.height / 2 - tooltipHeight / 2
-        if (position === 'left') left = rect.left - tooltipWidth
-        else left = rect.left + rect.width
+        top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2
+        if (position === 'left') left = anchorRect.left - tooltipWidth
+        else left = anchorRect.left + anchorRect.width
       } else {
-        left = rect.left + rect.width / 2 - tooltipWidth / 2
-        if (position === 'top') top = rect.top - tooltipHeight
-        else top = rect.top + rect.height
+        left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2
+        if (position === 'top') top = anchorRect.top - tooltipHeight
+        else top = anchorRect.top + anchorRect.height
       }
+      // takes the parent the tooltip is positioned relative to into consideration
+      this.computeRelativeTo()
+      const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 }
+      top -= relativeRect.top
+      left -= relativeRect.left
       // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
       if (top <= 0) top += MARGIN_TO_CORNERS_PX
       else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {

package/src/components/Tooltip/context.tsx

@@ -12,7 +12,7 @@ export const TooltipProvider = ({ children }: Required<WithChildren>) => {
   return (
     <Context.Provider value={api}>
       {children}
-      <TooltipBox ref={ref} aria-hidden>{content}</TooltipBox>
+      <TooltipBox ref={ref}>{content}</TooltipBox>
     </Context.Provider>
   )
 }

package/src/layout.css

@@ -44,6 +44,12 @@
       padding: 0 10px;
       width: calc(100% - 20px);
     }
+    .chat-window.narrow {
+      width: auto;
+    }
+    .chat-right-panel {
+      display: none;
+    }
     .home-page {
       .title {
         margin-top: 40px;

package/src/state/ChatEntry.ts

@@ -1,4 +1,5 @@
 import { pull } from 'lodash'
+import { LabeledWithImage } from './types'
 
 export interface SerializableAction {
   title: string,
@@ -25,14 +26,14 @@ export interface KnowledgeSource {
 
 export interface TextChatEntry {
   type: 'text' | 'md',
-  agent: 'bot' | 'user' | 'system',
+  agentType: 'bot' | 'user' | 'system',
   // image?: string,
   actions?: ChatAction[],
   subtitle?: string,
   content: string,
   knowledgeSources?: KnowledgeSource[],
   updated?: string,
-  agentId?: string,
+  agent?: LabeledWithImage,
   messageId?: string,
   error?: string,
   // customInput?: CustomInputResponse,
@@ -63,7 +64,7 @@ export class ChatEntry {
 
   static createUserEntry(content: string) {
     return new ChatEntry({
-      agent: 'user',
+      agentType: 'user',
       type: 'text',
       content,
       updated: new Date().toISOString(),
@@ -71,7 +72,7 @@ export class ChatEntry {
   }
 
   static createStreamedBotEntry(abort: () => void) {
-    return new ChatEntry({ agent: 'bot', type: 'md', content: '' }, true, abort)
+    return new ChatEntry({ agentType: 'bot', type: 'md', content: '' }, true, abort)
   }
 
   setValue(value: TextChatEntry) {

package/src/state/ChatState.ts

@@ -1,15 +1,7 @@
 import { dropRight, last, pull } from 'lodash'
 import { ChatEntry } from './ChatEntry'
 import { ObservableState } from './ObservableState'
-
-interface Labeled {
-  id: string,
-  label: string,
-}
-
-interface LabeledWithImage extends Labeled {
-  image?: string,
-}
+import { Labeled, LabeledWithImage } from './types'
 
 export interface ChatProperties {
   label: string,

package/src/state/types.ts

@@ -0,0 +1,8 @@
+export interface Labeled {
+  id: string,
+  label: string,
+}
+
+export interface LabeledWithImage extends Labeled {
+  image?: string,
+}

package/src/views/Agents.tsx

@@ -2,6 +2,7 @@ import { Button, Text } from '@citric/core'
 import { Search } from '@citric/icons'
 import { Badge } from '@citric/ui'
 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 { theme } from '@stack-spot/portal-theme'
@@ -20,7 +21,7 @@ const AgentLabel = styled.div`
   align-items: center;
   gap: 6px;
 
-  img {
+  img, svg {
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -86,8 +87,8 @@ const AgentsPanel = () => {
   const chat = useCurrentChat()
   
   return <RightPanelTabs key={chat.id} tabs={[
-    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" /> },
     { 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" /> },
   ]} />
@@ -98,15 +99,23 @@ const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' })
   const { close } = useRightPanel()
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
+  const defaultAgent = useMemo(() => ({
+    name: t.defaultAgentName,
+    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>(agents.find(a => a.id === chat.get('agent')?.id))
+  const [value, setValue] = useState<AgentResponse | undefined>(agents.find(a => a.id === chat.get('agent')?.id) ?? defaultAgent)
   const filtered = useMemo(
-    () => filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : agents,
+    () => {
+      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', { id: value.id, label: value.name, image: value.avatar })
+    if (value) chat.set('agent', value.id ? { id: value.id, label: value.name, image: value.avatar } : undefined)
     close()
   }
 
@@ -119,9 +128,9 @@ const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' })
           keygen={a => a.id}
           value={value}
           onChange={setValue}
-          renderLabel={({ name, avatar }) => (
+          renderLabel={({ name, avatar, id }) => (
             <AgentLabel>
-              {avatar && <img src={avatar} />}
+              {id ? (avatar && <img src={avatar} />) : <MiniLogo />}
               <Text>{name}</Text>
             </AgentLabel>
           )}
@@ -170,6 +179,8 @@ const dictionary = {
     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.',
+    defaultAgentName: 'Stackspot AI (default)',
+    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.',
   },
   pt: {
     title: 'Agentes',
@@ -183,5 +194,7 @@ const dictionary = {
     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.',
+    defaultAgentName: 'Stackspot AI (padrão)',
+    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.',
   },
 } satisfies Dictionary

package/src/views/Chat/AgentInfo.tsx

@@ -1,17 +1,17 @@
 import { Text } from '@citric/core'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { LabeledWithImage } from '../../state/types'
 
 interface Props {
-  agentId?: string,
+  agent?: LabeledWithImage,
 }
 
-// todo: retrieve agent data and render accordingly
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const AgentInfo = ({ agentId: _agentId }: Props) => (
+export const AgentInfo = ({ agent }: Props) => (
   <>
-    <div className="agent-image-wrapper">
-      <MiniLogo className="agent-image" />
-    </div>
-    <Text appearance="body2">Stackspot AI</Text>
+    {agent?.image
+      ? <img src={agent.image} className="custom-agent-image" />
+      : <div className="default-image-wrapper"><MiniLogo className="agent-image" /></div>
+    }
+    <Text appearance="body2">{agent?.label || 'Stackspot AI'}</Text>
   </>
 )

package/src/views/Chat/ChatMessage.tsx

@@ -16,7 +16,7 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
   const [liked, setLiked] = useState<boolean | undefined>()
   const entry = useChatEntry(message)
   const dateFormatter = useDateFormatter()
-  const userInfo = entry.agent === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agentId={entry.agentId} />
+  const userInfo = entry.agentType === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agent={entry.agent} />
   const date = new Date(entry.updated ?? '')
   const shouldShowDate = entry.updated && !isNaN(date.getTime())
   const ref = useRef<HTMLLIElement>(null)
@@ -55,7 +55,7 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
   }, [entry.messageId, liked])
   
   return (entry.content || entry.error) && (
-    <li className={entry.agent} ref={ref}>
+    <li className={entry.agentType} ref={ref}>
       <div className="chat-message">
         <div className="user-info">{userInfo}</div>
         {entry.content && <div className="message-content">
@@ -77,7 +77,7 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
         ))}</ul>
       </div>}
       <div className="message-footer">
-        {entry.agent === 'bot' && entry.messageId && !entry.error && <div className="message-actions">
+        {entry.agentType === 'bot' && entry.messageId && !entry.error && <div className="message-actions">
           <IconButton title={t.like} aria-label={t.like} onClick={like}>
             {liked === true ? <LikeFill /> : <Like />}
           </IconButton>

package/src/views/Chat/styled.ts

@@ -76,7 +76,7 @@ export const ChatList = styled.ul`
         flex-direction: column;
         gap: 4px;
     
-        .agent-image-wrapper {
+        .default-image-wrapper {
           width: 24px;
           height: 24px;
           border-radius: 4px;
@@ -90,6 +90,12 @@ export const ChatList = styled.ul`
             height: 18px;
           }
         }
+
+        .custom-agent-image {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+        }
       }
     }
 
@@ -100,6 +106,7 @@ export const ChatList = styled.ul`
         display: flex;
         flex-direction: row;
         gap: 8px;
+        align-items: center;
         
         .message-content {
           padding: 10px;

package/src/views/ChatHistory/HistoryItem.tsx

@@ -4,6 +4,7 @@ import { IconButton, LoadingCircular } from '@citric/ui'
 import { aiClient } from '@stack-spot/portal-network'
 import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
 import { theme } from '@stack-spot/portal-theme'
+import { last } from 'lodash'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { OverlayMenu } from '../../components/OverlayMenu'
 import { useWidget } from '../../context/hooks'
@@ -14,7 +15,7 @@ import { download } from '../../utils/download'
 import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
 import { useHistoryDictionary } from './dictionary'
 import { HistoryItemBox } from './styled'
-import { findStack, findWorkspace } from './utils'
+import { findStack, findWorkspace, getAllAgents } from './utils'
 
 export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse, interceptors: MessageInterceptor[] }) => {
   const t = useHistoryDictionary()
@@ -35,15 +36,17 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
   }, [])
 
   async function onSubmitRename() {
+    const prev = title
     setRenaming(false)
+    setTitle(renamed)
     if (!renamed || renamed === item.title) return
     try {
       await aiClient.renameChat.mutate({ conversationId: item.id, conversationUpdateTitleRequest: { title: renamed } })
-      setTitle(renamed)
       aiClient.chats.invalidate()
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)
+      setTitle(prev)
       setRenaming(true)
     }
   }
@@ -78,18 +81,22 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
     setLoading(true)
     try {
       const chat = await aiClient.chat.query({ conversationId: item.id })
-      const [stack, workspace] = await Promise.all([findStack(chat.ai_stack_id), findWorkspace(chat.workspace_id)])
+      const [stack, workspace, agents] = await Promise.all([
+        findStack(chat.ai_stack_id),
+        findWorkspace(chat.workspace_id),
+        getAllAgents(),
+      ])
       widget.chatTabs.add(new ChatState({
         id: chat.id,
-        initial: { label: chat.title, stack, workspace },
+        initial: { label: chat.title, stack, workspace, agent: agents.find(a => a.id === last(chat.history)?.custom_agent?.id) },
         interceptors,
         entries: chat.history?.map(item => new ChatEntry({
-          agent: item.agent === 'USER' ? 'user' : 'bot',
+          agentType: item.agent === 'USER' ? 'user' : 'bot',
           content: item.content,
           type: item.agent === 'USER' ? 'text' : 'md',
-          agentId: item.custom_agent?.id,
+          agent: agents.find(a => a.id === item.custom_agent?.id),
           messageId: item.message_id,
-          knowledgeSources: genericSourcesToKnowledgeSources(item.sources),
+          knowledgeSources: item.agent === 'USER' ? undefined : genericSourcesToKnowledgeSources(item.sources),
           updated: item.updated,
         })),
       }))
@@ -111,7 +118,12 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
     <HistoryItemBox className={isLoading ? 'loading' : ''}>
       {isRenaming ? (
         <>
-          <Input ref={renameInput} value={renamed} onChange={e => setRenamed(e.target.value)} />
+          <Input
+            ref={renameInput}
+            value={renamed}
+            onChange={e => setRenamed(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && onSubmitRename()}
+          />
           <IconButton onClick={onSubmitRename}><Check /></IconButton>
         </>
       ) : (

package/src/views/ChatHistory/utils.ts

@@ -1,4 +1,4 @@
-import { aiClient, workspaceClient } from '@stack-spot/portal-network'
+import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
 import { ChatProperties } from '../../state/ChatState'
 
 export async function findStack(id: string | null): Promise<ChatProperties['stack'] | undefined> {
@@ -24,3 +24,14 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
     return { id, label: id }
   }
 }
+
+export async function getAllAgents(): Promise<Required<ChatProperties>['agent'][]> {
+  try {
+    const [agents, publicAgents] = await Promise.all([agentClient.agents.query({}), agentClient.publicAgents.query({})])
+    return [...agents, ...publicAgents].map(a => ({ id: a.id, label: a.name, image: a.avatar }))
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    return []
+  }
+}