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

package/src/components/ToolBadge.tsx

@@ -0,0 +1,146 @@
+import { IconBox, Text } from '@citric/core'
+import { ChevronDown, Cog } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ColorSchemeKey, listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { get } from 'lodash'
+import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
+import { styled } from 'styled-components'
+import { FastOmit } from 'styled-components/dist/types'
+import { toPrecision } from '../views/Steps/utils'
+
+interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
+  name: string,
+  duration?: number,
+  image?: string,
+  description?: string,
+  appearance?: 'round' | 'square',
+  backgroundColor?: ColorSchemeKey,
+}
+
+const Styled = styled.div<{ $backgroundColor: ColorSchemeKey }>`
+ .tool-header-wrapper {
+    background-color: ${({ $backgroundColor }) => get(theme.color, $backgroundColor)};
+    border-radius: 8px;
+  }
+ 
+  .tool-header {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    position: relative;
+
+    .title {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      .tool-image {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+      .name {
+        flex: 1;
+      }
+    }
+
+    .btn-expand {
+      display: none;
+    }
+
+    .duration {
+      opacity: 0.7;
+      text-align: right;
+    }
+  }
+
+  &.with-description {
+    .tool-header {
+      &:before {
+        content: '';
+        top: 32px;
+        bottom: 8px;
+        left: 15px;
+        width: 1px;
+        background-color: ${theme.color.light[700]};
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      .btn-expand {
+        display: flex;
+        transition: transform 0.3s ease-in-out;
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+
+      .description {
+        padding: 0 0 10px 20px;
+        opacity: 0.7;
+      }
+    }
+  }
+
+  &.round {
+    .tool-header-wrapper {
+      border-radius: 30px;
+    }
+    &:not(.with-description) {
+      .tool-header-wrapper {
+        padding-right: 10px;
+      }
+    }
+  }
+`
+
+export const ToolBadge = (
+  { name, duration, image, description, appearance = 'square', backgroundColor = 'light.300', className, ...props }: Props,
+) => {
+  const t = useTranslate(dictionary)
+  const [showDescription, setShowDescription] = useState(false)
+  const rootClass = listToClass([className, appearance, description && 'with-description'])
+  const wrapperClass = 'tool-header-wrapper'
+
+  const content = (
+    <div className="tool-header">
+      <div className="title">
+        {image ? <img src={image} className="tool-image" /> : <IconBox className="tool-image"><Cog /></IconBox>}
+        <Text colorScheme="light.700" className="name">{name}</Text>
+        {duration !== undefined && <Text colorScheme="light.700" className="duration">
+          {toPrecision(duration)}s
+        </Text>}
+        <IconButton
+          size="xs"
+          className={listToClass(['btn-expand', showDescription && 'open'])}
+          onClick={() => setShowDescription(v => !v)}
+          aria-label={showDescription ? t.close : t.open}
+        >
+          <ChevronDown />
+        </IconButton>
+      </div>
+      {showDescription && <Text className="description" colorScheme="light.700">{description}</Text>}
+    </div>
+  )
+
+  return (
+    <Styled {...props} $backgroundColor={backgroundColor} className={rootClass}>
+      {description ? <AnimatedHeight className={wrapperClass}>{content}</AnimatedHeight> : <div className={wrapperClass}>{content}</div>}
+    </Styled>
+  )
+}
+
+const dictionary = {
+  en: {
+    open: 'Open',
+    close: 'Close',
+  },
+  pt: {
+    open: 'Abrir',
+    close: 'Fechar',
+  },
+} satisfies Dictionary

package/src/state/ChatEntry.ts

@@ -1,4 +1,5 @@
 import { OneOfColorSchemes } from '@citric/core'
+import { ChatStep } from '@stack-spot/portal-network'
 import { ColorPaletteName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
 import { LabeledWithImage } from './types'
@@ -57,24 +58,11 @@ export interface KnowledgeSource {
   documentId: string,
 }
 
-export interface AgentTool {
+export interface ChatTool {
   id: string,
-  name: string,
-  description?: string,
   image?: string,
-  duration?: number,
-  input?: string,
-  output?: string,
-}
-
-export interface ChatEntryStep {
-  id: string,
-  type: 'planning' | 'step' | 'answer',
-  input?: string,
-  output?: string,
-  status: 'pending' | 'running' | 'success' | 'error',
-  duration?: number,
-  tools?: AgentTool[],
+  name: string,
+  description: string,
 }
 
 export interface TextChatEntry {
@@ -131,7 +119,11 @@ export interface TextChatEntry {
   /**
    * This entry may contain steps. If so, specify them in this array.
    */
-  steps?: ChatEntryStep[],
+  steps?: ChatStep[],
+  /**
+   * If any tool was used to generate the response, its id is returned in this list.
+   */
+  tools?: string[],
   /*
    * Options for radio, checkbox or button type.
    */

package/src/state/ChatState.ts

@@ -14,7 +14,7 @@ export interface ChatPropertiesWithOptionalFeatures {
   /**
    * The current AI agent.
    */
-  agent?: LabeledWithImage & { builtIn: boolean, slug?: string },
+  agent?: LabeledWithImage & { builtIn: boolean },
   /**
    * The current workspace.
    */

package/src/state/WidgetState.ts

@@ -13,15 +13,15 @@ export interface WidgetProperties {
   /**
    * Current content of the right panel. Undefined for closed right panel.
    */
-  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'tools',
+  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'steps' | 'tools',
   /**
    * KS to use when the right panel "ks-details" is open.
    */
   currentKSInPanel?: { name: string, slug: string, score: number, documentId: string },
   /**
-   * The message to show in the tools panel.
+   * The message to show in the tools panel or the steps panel.
    */
-  currentMessageInToolsPanel?: { chatId: string, messageId: number },
+  currentMessageInPanel?: { chatId: string, messageId: number },
   /**
    * Whether or not the widget is in its minimized version.
    */
@@ -58,8 +58,6 @@ interface Options {
   chatTabs?: ChatTabsController,
 }
 
-const untitledChatPrefix = 'Chat '
-
 /**
  * Holds the full state of the AI Chat Widget.
  * 
@@ -90,16 +88,6 @@ 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. This also selects the new tab.
    * @param properties the chat properties (initial state).
@@ -109,7 +97,7 @@ export class WidgetState extends ObservableState<WidgetProperties> {
   createChat({ label, ...properties }: Partial<ChatPropertiesWithOptionalFeatures> = {}, entries: ChatEntry[] = []) {
     const chat = new ChatState({
       id: ulid(),
-      initial: { label: label || `${untitledChatPrefix}${this.getNextUntitledChatIndex()}`, features: this.chatFeatures, ...properties },
+      initial: { label: label || 'Chat', features: this.chatFeatures, ...properties },
       entries,
       interceptors: this.interceptors,
       untitled: !label,

package/src/utils/check-is-trial.ts

@@ -0,0 +1,6 @@
+import { NetworkClient } from '@stack-spot/portal-network'
+
+export const checkIsTrial = () => {
+  const trialInfo = NetworkClient.sessionManager?.getSession()?.getTokenData()?.trial_account_status
+  return !!trialInfo
+}

package/src/utils/tools.ts

@@ -0,0 +1,11 @@
+import { BuiltinToolResponse, ToolkitsInAgentResponse } from '@stack-spot/portal-network/api/agent'
+
+export type ToolWithImage = BuiltinToolResponse & { id: string, image?: string }
+
+export function toolById(id: string, toolkits: ToolkitsInAgentResponse | undefined): ToolWithImage | undefined {
+  for (const toolkit of toolkits?.builtins ?? []) {
+    for (const tool of toolkit.tools ?? []) {
+      if (tool.id === id) return { ...tool, id, image: toolkit.image_url }
+    }
+  }
+}

package/src/views/Agents/AgentDescription.tsx

@@ -2,6 +2,7 @@ import { Text } from '@citric/core'
 import { Badge, Skeleton } from '@citric/ui'
 import { agentClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
+import { ToolBadge } from '../../components/ToolBadge'
 import { useAgentsDictionary } from './dictionary'
 import { AgentDescriptionBox } from './styled'
 
@@ -28,6 +29,15 @@ export const AgentDescription = ({ agentId, llm, description, numberOfKnowledgeS
     }
     return loadingKS
   }, [numberOfKnowledgeSources])
+  const tools = useMemo(() => {
+    const result: React.ReactElement[] = []
+    for (const kit of agent?.toolkits?.builtins ?? []) {
+      for (const tool of kit.tools ?? []) {
+        result.push(<li key={tool.id}><ToolBadge name={tool.name || tool.id || 'unknown'} image={kit.image_url} /></li>)
+      }
+    }
+    return result
+  }, [agent])
 
   return (
     <AgentDescriptionBox>
@@ -39,6 +49,10 @@ export const AgentDescription = ({ agentId, llm, description, numberOfKnowledgeS
         <Text appearance="microtext1" className="title">Knowledge sources</Text>
         <ul>{isLoading ? skeleton : knowledgeSources}</ul>
       </section>}
+      {!!tools.length && <section>
+        <Text appearance="microtext1" className="title">{t.tools}</Text>
+        <ul>{tools}</ul>
+      </section>}
       {llm && <section>
         <Text appearance="microtext1" className="title">LLM</Text>
         <Badge palette="orange" appearance="square">{llm}</Badge>

package/src/views/Agents/AgentsPanel.tsx

@@ -1,5 +1,7 @@
+import { useMemo } from 'react'
 import { RightPanelTabs } from '../../components/RightPanelTabs'
 import { useCurrentChat } from '../../context/hooks'
+import { checkIsTrial } from '../../utils/check-is-trial'
 import { AgentsTab } from './AgentsTab'
 import { useAgentsDictionary } from './dictionary'
 
@@ -9,11 +11,17 @@ import { useAgentsDictionary } from './dictionary'
 export const AgentsPanel = () => {
   const t = useAgentsDictionary()
   const chat = useCurrentChat()
-  
-  return <RightPanelTabs key={chat.id} tabs={[
+  const isTrial = checkIsTrial()
+
+  const tabs= useMemo(() => isTrial ? [
+    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" /> },
+    { 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" /> },
-  ]} />
+  ], [t, isTrial])
+  
+  return <RightPanelTabs key={chat.id} tabs={tabs} />
 }

package/src/views/Agents/AgentsTab.tsx

@@ -9,7 +9,6 @@ import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { IconInput } from '../../components/IconInput'
 import { useCurrentChat } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
-import { isAgentDefault } from '../../utils/agent'
 import { AgentDescription } from './AgentDescription'
 import { useAgentsDictionary } from './dictionary'
 import { AgentLabel } from './styled'
@@ -19,25 +18,27 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
   const { close } = useRightPanel()
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
-  const agentsBuiltIn = agentClient.publicAgents.useQuery({})
-  const defaultAgent = agentsBuiltIn.find((agent) => isAgentDefault(agent.slug))
-  const agents = visibility === 'BUILT-IN' ? agentsBuiltIn : agentClient.agents.useQuery({ visibility })
+  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(
-    () => {      
-      return 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',  !isAgentDefault(value.slug)
-        ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN', slug: value.slug } 
-        : undefined
-      )
+      chat.set('agent', value.id ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN' } : undefined)
     }
     close()
   }

package/src/views/Agents/dictionary.ts

@@ -15,6 +15,7 @@ const dictionary = {
     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',
+    tools: 'Tools',
   },
   pt: {
     title: 'Agentes',
@@ -30,6 +31,7 @@ const dictionary = {
     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',
+    tools: 'Ferramentas',
   },
 } satisfies Dictionary
 

package/src/views/Agents/styled.ts

@@ -30,7 +30,7 @@ export const AgentDescriptionBox = styled.div`
       border-bottom: none;
     }
 
-    .title {
+    > .title {
       display: block;
       margin-bottom: 6px;
     }

package/src/views/Chat/AgentInfo.tsx

@@ -1,5 +1,5 @@
-import { Text } from '@citric/core'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { IconBox, Text } from '@citric/core'
+import { Agent } from '@citric/icons'
 import { LabeledWithImage } from '../../state/types'
 
 interface Props {
@@ -13,8 +13,8 @@ export const AgentInfo = ({ agent }: Props) => (
   <>
     {agent?.image
       ? <img src={agent.image} className="custom-agent-image" />
-      : <div className="default-image-wrapper"><MiniLogo className="agent-image" /></div>
+      : <IconBox className="default-image-wrapper" colorIcon="light.700"><Agent className="agent-image" /></IconBox>
     }
-    <Text appearance="body2">{agent?.label || 'StackSpot AI CodeGen'}</Text>
+    <Text appearance="body2">{agent?.label || 'StackSpot AI'}</Text>
   </>
 )

package/src/views/Chat/ChatMessage.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable semi */
 import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
-import { Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
+import { Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
 import { Avatar, Badge, IconButton } from '@citric/ui'
+import { agentClient } from '@stack-spot/portal-network'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { debounce } from 'lodash'
@@ -9,9 +10,11 @@ import { Dispatch, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 import { PhoneInput } from 'react-international-phone'
 import 'react-international-phone/style.css'
 import { Markdown } from '../../components/Markdown'
+import { StackedBadge } from '../../components/StackedBadge'
 import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
+import { toolById } from '../../utils/tools'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
@@ -82,7 +85,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
             {option.hasInput && option.value && labels.findIndex((label) => label === option.value) !== -1 &&
               <Box w={4} ml={2}>
                 <Input name={entry.name} onChange={(data) => setValue([data.target.value])} 
-                  required={true} />
+                  required={true} sx={{ height: '30px' }} />
               </Box>
             }
           </Flex>
@@ -120,7 +123,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
           {option.hasInput && option.value && labels.findIndex((label) => label === option.value)!== -1 &&
             <Box w={4} ml={2}>
               <Input name={entry.name} {...entry.validations} onChange={(data) => handleChange(data)} 
-                required={true}  />
+                required={true} sx={{ height: '30px' }} />
             </Box>
           }
         </Flex>
@@ -163,6 +166,7 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
   const chatRef = useRef<HTMLDivElement>(null)
   const widget = useWidget()
   const chat = useCurrentChat()
+  const [agent] = agentClient.agent.useStatefulQuery({ agentId: entry.agent?.id ?? '' }, { enabled: !!entry.agent?.id })
   useChatScrollToBottomEffect(ref, [entry])
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
@@ -249,10 +253,15 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
     </form>
   }
 
+  function openToolsPanel() {
+    widget.set('currentMessageInPanel', { chatId: chat.id, messageId: message.id })
+    widget.set('panel', 'tools')
+  }
+
   return (entry.content || entry.error || !!entry.steps?.length) && (
     <li className={entry.agentType} ref={ref}>
       <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
-        <div className="user-info">{userInfo}</div>
+        <div className={`user-info ${entry.agentType}`}>{userInfo}</div>
         {(entry.content || entry.steps) && <div className={listToClass(['message-content', entry.card && 'card'])}>
           {!!entry.badges?.length && <div className="badges">
             {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
@@ -268,6 +277,19 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
           <Text appearance="microtext1">{entry.error}</Text>
         </div>
       )}
+      {!!entry.tools?.length && <StackedBadge
+        aria-label={t.openToolsPanel}
+        title={t.openToolsPanel}
+        tabIndex={0}
+        role="button"
+        className="tools-badge"
+        label={t.tools}
+        images={entry.tools.slice(0, 3).map((id) => {
+          const tool = toolById(id, agent?.toolkits)
+          return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
+        })}
+        onClick={openToolsPanel}
+      />}
       {!!entry.knowledgeSources?.length && <div className="ks-box">
         <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
         <ul>{entry.knowledgeSources.map((ks, index) => (
@@ -307,10 +329,14 @@ const dictionary = {
     copy: 'Copy',
     like: 'Like',
     dislike: 'Dislike',
+    tools: 'Tools',
+    openToolsPanel: 'Open the tools panel to see more details.',
   },
   pt: {
     copy: 'Copiar',
     like: 'Gostei',
     dislike: 'Não gostei',
+    tools: 'Ferramentas',
+    openToolsPanel: 'Abrir o painel de ferramentas para ver mais detalhes.',
   },
 } satisfies Dictionary

package/src/views/Chat/StepsList.tsx

@@ -2,27 +2,27 @@ import { Button, IconBox, Text } from '@citric/core'
 import { CheckCircleFill, Circle, PlayFill, TimesCircleFill } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
 import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ChatStep, StepChatStep } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { findLastIndex } from 'lodash'
 import { useState } from 'react'
 import { useWidget } from '../../context/hooks'
-import { ChatEntryStep } from '../../state/ChatEntry'
 import { PropsOf } from '../../types'
 
 interface Props {
-  steps: ChatEntryStep[],
+  steps: ChatStep[],
   messageId: number,
   chatId: string,
 }
 
 interface StepProps {
-  step: ChatEntryStep,
+  step: StepChatStep,
   index: number,
   total: number,
   onClick?: () => void,
 }
 
-function getStatusIcon(status: ChatEntryStep['status']) {
+function getStatusIcon(status: ChatStep['status']) {
   const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
   switch (status) {
     case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
@@ -53,8 +53,8 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
   const widget = useWidget()
 
   function openToolsPanel() {
-    widget.set('currentMessageInToolsPanel', { chatId, messageId })
-    widget.set('panel', 'tools')
+    widget.set('currentMessageInPanel', { chatId, messageId })
+    widget.set('panel', 'steps')
   }
   
   return (

package/src/views/Chat/styled.ts

@@ -38,6 +38,10 @@ export const ChatList: IStyledComponentBase<
     display: flex;
     flex-direction: row;
     gap: 10px;
+
+    &.bot {
+      align-items: center;
+    }
   }
 
   .chat-message {
@@ -82,23 +86,19 @@ export const ChatList: IStyledComponentBase<
         gap: 4px;
     
         .default-image-wrapper {
-          width: 24px;
-          height: 24px;
-          border-radius: 4px;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
           background-color: ${theme.color.light[300]};
           display: flex;
           align-items: center;
           justify-content: center;
-    
-          .agent-image {
-            width: 18px;
-            height: 18px;
-          }
+          border: 1px solid ${theme.color.light[600]};
         }
 
         .custom-agent-image {
-          width: 24px;
-          height: 24px;
+          width: 32px;
+          height: 32px;
           border-radius: 50%;
         }
       }
@@ -149,11 +149,11 @@ export const ChatList: IStyledComponentBase<
           background-color: ${theme.color.light[500]};
           border-radius: 4px;
 
-          > p:first-child {
+          .markdown > p:first-child {
             margin-top: 0;
           }
 
-          > p:last-child {
+          .markdown > p:last-child {
             margin-bottom: 0;
           }
         }
@@ -244,4 +244,13 @@ export const ChatList: IStyledComponentBase<
       }
     }
   }
+
+  .markdown img {
+    max-width: 70%;
+  }
+
+  .tools-badge {
+    align-self: start;
+    cursor: pointer;
+  }
 `