@stack-spot/ai-chat-widget 0.10.0 → 1.0.0-dev.1768314799914

package/src/views/Chat/styled.ts

@@ -1,31 +1,29 @@
 import { theme } from '@stack-spot/portal-theme'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
+import { FastOmit, IStyledComponentBase } from 'styled-components/dist/types'
 
-export const ChatList = styled.ul`
+export const ChatList: IStyledComponentBase<
+  'web',
+  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>
+> = styled.ul`
   display: flex;
   flex-direction: column;
   justify-content: end;
   gap: 20px;
-  margin: 0 5px;
+  margin: 0;
   padding: 0;
   flex: 1;
 
-  .error {
-    display: flex;
-    flex-direction: row;
+  [data-citric="alert"].error {
     gap: 8px;
     padding: 8px 10px;
-    background-color: ${theme.color.danger[500]};
-    color: ${theme.color.danger.contrastText};
     border-radius: 8px;
     align-self: start;
-
-    svg {
-      fill: ${theme.color.danger.contrastText};
-    }
-
-    small {
-      margin-top: 1px;
+    font: ${theme.font.microtext1};
+    line-height: 1;
+    &:before {
+      font-size: 14px;
     }
   }
 
@@ -33,6 +31,10 @@ export const ChatList = styled.ul`
     display: flex;
     flex-direction: row;
     gap: 10px;
+
+    &.bot, &.system {
+      align-items: center;
+    }
   }
 
   .chat-message {
@@ -52,17 +54,29 @@ export const ChatList = styled.ul`
   .message-footer {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
 
     .message-actions {
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: 4px;
+      height: 26px;
     }
 
     .chat-date {
+      display: inline-block;
+      align-content: flex-end;
       opacity: 0.6;
       margin-left: auto;
     }
+
+    // prevents the feedback from being cut by the overflow rules of the parent elements. 
+    .copy-btn:after {
+      left: 0;
+      margin-top: -20px;
+    }
   }
 
   > li {
@@ -77,47 +91,98 @@ export const ChatList = styled.ul`
         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%;
         }
       }
     }
 
+    .message-content {
+      > .badges, > .actions {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+      }
+      > .badges {
+        margin-bottom: 20px;
+      }
+      > .actions {
+        margin-top: 20px;
+      }
+      &.card {
+        margin-top: 5px;
+        position: relative;
+        padding: 16px;
+        border: 2px solid ${theme.color.light[500]};
+        border-radius: 4px;
+        overflow: hidden;
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: 2px;
+          background: linear-gradient(180deg, ${theme.color.blue[500]} 0%, ${theme.color.indigo[500]} 100%);
+        }
+      }
+      .image-uploads, .document-uploads {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
+        list-style: none;
+        margin: 0 0 4px 0;
+        padding: 0;
+
+        img {
+          max-width: 240px;
+          max-height: 240px;
+        }
+      }
+    }
+
     &.user {
       align-items: end;
+      margin-left: 40px;
+
+      .chat-message-container {
+        display: flex;
+        flex-direction: column;
+        max-width: 100%; 
+        align-items: end;
+      }
 
       .chat-message {
         display: flex;
         flex-direction: row;
-        gap: 8px;
-        align-items: center;
+        line-break: anywhere;
+        max-width: 100%;
         
         .message-content {
-          padding: 10px;
+          padding: 16px;
+          border-radius: 24px;
+          border-top-right-radius: 0;
           background-color: ${theme.color.light[500]};
-          border-radius: 4px;
-
-          > p:first-child {
+          width: 100%;
+          box-sizing: border-box;
+          .markdown > p:first-child {
             margin-top: 0;
           }
 
-          > p:last-child {
+          .markdown > p:last-child {
             margin-bottom: 0;
           }
         }
@@ -152,4 +217,96 @@ export const ChatList = styled.ul`
       }
     }
   }
+
+  .tools-box {
+    
+    > button {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      white-space: nowrap;
+      margin: 0;
+      margin-top: 8px;
+      padding: 0;
+      list-style: none;
+      gap: 0px;
+      
+      &:hover{
+        transition: gap 0.3s ease-in;
+        gap: 6px;
+      }
+    }
+  }
+
+  .steps {
+    .steps-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .tools-list {
+      list-style: disc;
+      margin: 0;
+      padding-left: 24px;
+      display: block;
+      ::marker {
+        color: ${theme.color.light.contrastText};
+      }
+    }
+
+    ul {
+      li {
+        &[role="button"] {
+          cursor: pointer;
+        }
+
+        .loading {
+          width: 12px;
+          height: 12px;
+        }
+
+        .step-status-icon {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .step-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical; 
+        }
+      }
+    }
+
+  }
+
+  .step-actions {
+      margin-top: 16px;
+      display: flex;
+      gap: 6px;
+
+      .icon-button {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+      }
+    }
+
+  .markdown img {
+    max-width: 70%;
+  }
+
+  .tools-badge {
+    align-self: start;
+    cursor: pointer;
+  }
 `

package/src/views/ChatHistory/ChatHistoryPanel.tsx

@@ -1,13 +1,16 @@
 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'
 
-export const ChatHistoryPanel = ({ interceptors }: { interceptors: MessageInterceptor[] }) => {
+/**
+ * Renders the list of conversations (history).
+ */
+export const ChatHistoryPanel = () => {
   const [chats, { fetchNextPage, hasNextPage }] = aiClient.chats.useInfiniteQuery({ size: 40 })
   return (
-    <div id="chatHistoryList" style={{ height: '100%', overflow: 'auto' }}>
+    <AutoFocus id="chatHistoryList" style={{ height: '100%', overflow: 'auto' }}>
       <InfiniteScroll
         scrollableTarget="chatHistoryList"
         dataLength={chats.length}
@@ -19,10 +22,10 @@ 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>
-    </div>
+    </AutoFocus>
   )
 }

package/src/views/ChatHistory/HistoryItem.tsx

@@ -1,23 +1,19 @@
-import { IconBox, Input } from '@citric/core'
-import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
-import { IconButton, LoadingCircular } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { IconButton, Input, MenuItem, MenuOverlay, ProgressCircular } from '@stack-spot/citric-react'
 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'
-import { ChatEntry } from '../../state/ChatEntry'
-import { ChatState, MessageInterceptor } from '../../state/ChatState'
-import { ButtonAction } from '../../types'
 import { download } from '../../utils/download'
-import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
 import { useHistoryDictionary } from './dictionary'
 import { HistoryItemBox } from './styled'
-import { findStack, findWorkspace, getAllAgents } from './utils'
+import { loadChat } from './utils'
 
-export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse, interceptors: MessageInterceptor[] }) => {
+/**
+ * Renders an item of the list of conversations (history).
+ */
+export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   const t = useHistoryDictionary()
   const [isLoading, setLoading] = useState(false)
   const [isRenaming, setRenaming] = useState(false)
@@ -80,29 +76,7 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
     if (tab) return widget.chatTabs.select(item.id)
     setLoading(true)
     try {
-      const chat = await aiClient.chat.query({ conversationId: item.id })
-      const [stack, workspace, agents] = await Promise.all([
-        findStack(chat.ai_stack_id),
-        findWorkspace(chat.workspace_id),
-        getAllAgents(),
-      ])
-      const agent = agents.find(a => a.id === last(chat.history)?.custom_agent?.id)
-      const builtIn = !!last(chat.history ?? [])?.custom_agent?.built_in
-      widget.chatTabs.add(new ChatState({
-        id: chat.id,
-        initial: { label: chat.title, stack, workspace, agent: agent ? { ...agent, builtIn } : undefined },
-        interceptors,
-        entries: chat.history?.map(item => new ChatEntry({
-          agentType: item.agent === 'USER' ? 'user' : 'bot',
-          content: item.content,
-          type: 'md',
-          agent: agents.find(a => a.id === item.custom_agent?.id),
-          messageId: item.message_id,
-          knowledgeSources: item.agent === 'USER' ? undefined : genericSourcesToKnowledgeSources(item.sources),
-          updated: item.updated,
-        })),
-      }))
-      widget.chatTabs.select(chat.id)
+      await loadChat(widget, item.id)
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)
@@ -110,10 +84,10 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
     setLoading(false)
   }, [])
 
-  const actions: ButtonAction[] = [
-    { label: t.rename, onClick: onRename, icon: <Pencil /> },
-    { label: t.download, onClick: onDownload, icon: <Download /> },
-    { label: t.delete, onClick: onDelete, icon: <Trash />, color: theme.color.danger[500] },
+  const actions: MenuItem[] = [
+    { label: t.rename, onClick: onRename, icon: <Icon icon="Pencil" /> },
+    { label: t.download, onClick: onDownload, icon: <Icon icon="Download" /> },
+    { label: t.delete, onClick: onDelete, icon: <Icon icon="Trash" />, style: { color: theme.color.danger[500] } },
   ]
 
   return isDeleted ? null : (
@@ -123,17 +97,22 @@ export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse
           <Input
             ref={renameInput}
             value={renamed}
-            onChange={e => setRenamed(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && onSubmitRename()}
+            onChange={setRenamed}
+            style={{ flex: 1 }}
+            onKeyDown={(e) => {
+              if (['Enter', 'Escape'].includes(e.key)) {
+                e.key === 'Enter' ? onSubmitRename() : setRenaming(false)
+              }
+            }}
           />
-          <IconButton onClick={onSubmitRename}><Check /></IconButton>
+          <IconButton icon="Check" onClick={onSubmitRename} />
         </>
       ) : (
         <>
           <button className="label" onClick={onSelect} disabled={isLoading}>{title}</button>
-          {isLoading ? <LoadingCircular size="xs" /> : <OverlayMenu actions={actions} position="left">
-            <IconBox><EllipsisHorizontal /></IconBox>
-          </OverlayMenu>}
+          {isLoading ? <ProgressCircular size="xs" /> : <MenuOverlay items={actions} position="left">
+            <Icon icon="EllipsisHorizontal" size="xs" />
+          </MenuOverlay>}
         </>
       )}
     </HistoryItemBox>

package/src/views/ChatHistory/index.tsx

@@ -1,12 +1,14 @@
+import { FallbackBoundary } from '@stack-spot/citric-react'
 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'
 
-export const ChatHistory = ({ interceptors }: { interceptors: MessageInterceptor[] }) => {
+/**
+ * Renders the Chat History in the Right Panel if this is the panel that is currently opened.
+ */
+export const ChatHistory = () => {
   const t = useHistoryDictionary()
   const panel = useWidgetState('panel')
   const { open } = useRightPanel()
@@ -14,7 +16,7 @@ export const ChatHistory = ({ interceptors }: { interceptors: MessageInterceptor
 
   useEffect(() => {
     if (panel === 'history') open(
-      <FallbackBoundary><ChatHistoryPanel interceptors={interceptors} /></FallbackBoundary>,
+      <FallbackBoundary><ChatHistoryPanel /></FallbackBoundary>,
       {
         title: t.title,
         description: t.description,

package/src/views/ChatHistory/styled.ts

@@ -1,5 +1,3 @@
-import { IconBox } from '@citric/core'
-import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -42,7 +40,7 @@ export const HistoryItemBox = styled.div`
     }
   }
 
-  ${IconBox}, ${IconButton} {
+  /* $ {IconBox}, $ {IconButton} {
     padding: 0;
     border: none;
     background-color: transparent;
@@ -54,7 +52,7 @@ export const HistoryItemBox = styled.div`
     }
   }
 
-  ${IconButton} svg {
+  $ {IconButton} svg {
     width: 16px;
-  }
+  } */
 `

package/src/views/ChatHistory/utils.ts

@@ -1,7 +1,17 @@
-import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
-import { ChatProperties } from '../../state/ChatState'
-import { LabeledWithImage } from '../../state/types'
+import { agentToolsClient, aiClient, AnswerChatStep, ChatAgentTool, ChatStep, PlanningChatStep, workspaceClient } from '@stack-spot/portal-network'
+import { AgentModel } from '@stack-spot/portal-network/api/agent-tools'
+import { last } from 'lodash'
+import { ChatEntry } from '../../state/ChatEntry'
+import { ChatProperties, ChatState } from '../../state/ChatState'
+import { WidgetState } from '../../state/WidgetState'
+import { LabeledAgent } from '../../state/types'
+import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
 
+/**
+ * Finds a stack by its id.
+ * @param id the id of the stack.
+ * @returns the stack or undefined.
+ */
 export async function findStack(id: string | null): Promise<ChatProperties['stack'] | undefined> {
   if (!id) return
   try {
@@ -14,9 +24,15 @@ export async function findStack(id: string | null): Promise<ChatProperties['stac
   }
 }
 
+/**
+ * Finds a workspace by its id.
+ * @param id the id of the workspace.
+ * @returns the workspace or undefined.
+ */
 export async function findWorkspace(id: string | null): Promise<ChatProperties['workspace'] | undefined> {
   if (!id) return
   try {
+    // const ws = await workspaceAiClient.workspaceAi.query({ id })
     const ws = await workspaceClient.workspace.query({ workspaceId: id })
     return { id, label: ws.name }
   } catch (error) {
@@ -26,13 +42,130 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
   }
 }
 
-export async function getAllAgents(): Promise<LabeledWithImage[]> {
-  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 []
+function toJSONString(data: any) {
+  if (data === undefined || data === null) return undefined
+  if (typeof data === 'object') {
+    try {
+      return JSON.stringify(data, null, 2)
+    } catch { /* empty */ }
+  } else {
+    try {
+      return JSON.stringify(JSON.parse(data), null, 2)
+    } catch { /* empty */ }
+  }
+  return `${data}`
+}
+
+function findTool(agent: AgentModel | undefined, id: string) {
+  const allToolkits = [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ]
+  for (const toolkit of allToolkits) {
+    for (const tool of toolkit.tools ?? []) {
+      if ('id' in tool && tool.id === id) return { toolkit, tool }
+    }
   }
+  return { toolkit: undefined, tool: { name: id } }
+}
+
+async function stepsFromAgentInfo(
+  agentInfo: any[] | null | undefined, agentId: string | undefined, isLastEntry: boolean,
+): Promise<ChatStep[] | undefined> {
+  const planningInfo = agentInfo?.find(i => i.type === 'planning' && !!i.data)
+  if (planningInfo) {
+    let agent: AgentModel | undefined
+    try {
+      agent = agentId ? await agentToolsClient.agent.query({ agentId }) : undefined
+    } catch { /* empty */ }
+    const planning: PlanningChatStep = {
+      type: 'planning',
+      goal: planningInfo.data.plan_goal,
+      status: planningInfo.action === 'awaiting_approval' ? 'awaiting_approval' : 'success',
+      id: `${Math.random()}`,
+      steps: planningInfo.data.steps,
+      duration: planningInfo.duration,
+      user_question: planningInfo.data.user_question,
+    }
+    const steps = planningInfo?.data?.steps?.map((s: any): ChatStep => {
+      const lastTool = agentInfo!.find(i => i.id === last(s.tools as any[])?.tool_execution_id && i.action === 'end')
+      return {
+        type: 'step',
+        id: s.id,
+        status: isLastEntry && planningInfo.action === 'awaiting_approval' ? 'pending' : 'success',
+        input: s.goal,
+        output: toJSONString(lastTool?.data?.output),
+        duration: lastTool?.duration,
+        attempts: [{
+          tools: s.tools?.map((t: any): ChatAgentTool => {
+            const { toolkit, tool } = findTool(agent, t.tool_id)
+            const start = agentInfo!.find(i => i.id === t.tool_execution_id && i.action === 'start')
+            const end = agentInfo!.find(i => i.id === t.tool_execution_id && i.action === 'end')
+            return {
+              id: t.tool_id,
+              executionId: t.tool_execution_id,
+              name: tool?.name,
+              description: 'description' in tool ? tool.description : undefined,
+              image: toolkit ? (('image_url' in toolkit ? toolkit?.image_url : toolkit?.avatar) ?? undefined) : undefined,
+              goal: t.goal,
+              duration: end?.duration,
+              input: toJSONString(start?.data?.input),
+              output: toJSONString(end?.data?.output),
+            }
+          }),
+        }],
+      }
+    })
+    const answerInfo = agentInfo?.find(i => i.type === 'chat' && i.action === 'end')
+    const answer: AnswerChatStep | undefined = answerInfo ? {
+      id: `${Math.random()}`,
+      status: 'success',
+      type: 'answer',
+      duration: answerInfo.duration,
+    } : undefined
+    return answer ? [planning, ...steps, answer] : [planning, ...steps]
+  }
+}
+
+function toolsFromAgentInfo(agentInfo: any[] | null | undefined): string[] {
+  return agentInfo?.find(i => i.type === 'chat' && i.action === 'end')?.data?.used_tools
+}
+
+/**
+ * Loads the chat identified by `conversationId` into the widget passed as parameter.
+ * @param widget
+ * @param conversationId 
+ */
+export async function loadChat(widget: WidgetState, conversationId: string) {
+  const chat = await aiClient.chat.query({ conversationId })
+  const historyAgentIds = chat.history?.map(item => item.custom_agent?.id).filter(Boolean) as string[] ?? []
+  const [stack, workspace, agents] = await Promise.all([
+    findStack(chat.ai_stack_id),
+    findWorkspace(chat.workspace_id),
+    agentToolsClient.agentsByIds.query({ searchAgentsRequest: { ids: historyAgentIds } }),
+  ])
+  const agentsAsLabeledAgents: LabeledAgent[] = agents
+    .map((a) => ({ ...a, label: a.name, image: a.avatar ?? '', builtIn: a.visibility_level === 'built_in' }))
+  
+  const agent = agentsAsLabeledAgents.find(a => a.id === last(chat.history)?.custom_agent?.id)
+  const builtIn = !!last(chat.history ?? [])?.custom_agent?.built_in
+  widget.chatTabs.add(new ChatState({
+    id: chat.id,
+    initial: { features: widget.chatFeatures, label: chat.title, stack, workspace, agent: agent ? { 
+      ...agent, builtIn } : undefined },
+    interceptors: widget.interceptors,
+    entries: await Promise.all(chat.history?.map(async (item, index) => new ChatEntry({
+      agentType: item.agent === 'USER' ? 'user' : 'bot',
+      content: item.content,
+      type: 'md',
+      agent: agentsAsLabeledAgents.find(a => a.id === item.custom_agent?.id),
+      messageId: item.message_id,
+      knowledgeSources: item.agent === 'USER' ? undefined : genericSourcesToKnowledgeSources(item.sources),
+      updated: item.updated,
+      steps: await stepsFromAgentInfo(item.agent_info, item.custom_agent?.id, index === chat.history!.length - 1),
+      tools: toolsFromAgentInfo(item.agent_info),
+    })) ?? []),
+  }))
+  widget.chatTabs.select(chat.id)
 }