@stack-spot/ai-chat-widget 1.38.2-beta.1 → 2.0.0-beta.1

package/src/views/Chat/styled.ts

@@ -15,22 +15,15 @@ export const ChatList: IStyledComponentBase<
   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;
     }
   }
 
@@ -78,6 +71,12 @@ export const ChatList: IStyledComponentBase<
       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 {
@@ -240,13 +239,9 @@ export const ChatList: IStyledComponentBase<
           margin-left: 0px;
         }
       }
-      
-
     }
   }
 
-  
-
   .steps {
     ul {
       list-style: none;

package/src/views/ChatHistory/HistoryItem.tsx

@@ -1,23 +1,14 @@
-import { IconBox, Input } from '@citric/core'
-import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
-import { IconButton, LoadingCircular } from '@citric/ui'
-import { focusNextIgnoringChildren } from '@stack-spot/portal-components'
-import { agentToolsClient, aiClient } from '@stack-spot/portal-network'
+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 } from '../../state/ChatState'
-import { LabeledAgent } from '../../state/types'
-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 } from './utils'
+import { loadChat } from './utils'
 
 /**
  * Renders an item of the list of conversations (history).
@@ -31,7 +22,6 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   const [isDeleted, setDeleted] = useState(false)
   const renameInput = useRef<HTMLInputElement>(null)
   const widget = useWidget()
-  const overlayRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (isRenaming) renameInput.current?.focus() 
@@ -58,7 +48,6 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   }
 
   const onDownload = useCallback(async () => {
-    setTimeout(() => focusNextIgnoringChildren(overlayRef.current), 10)
     setLoading(true)
     try {
       const content = await aiClient.downloadChat.mutate({ conversationId: item.id })
@@ -72,7 +61,6 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
 
   const onDelete = useCallback(async () => {
     setDeleted(true)
-    setTimeout(() => overlayRef.current?.focus(), 10)
     try {
       await aiClient.deleteChat.mutate({ conversationId: item.id })
       aiClient.chats.invalidate()
@@ -88,34 +76,7 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
     if (tab) return widget.chatTabs.select(item.id)
     setLoading(true)
     try {
-      const chat = await aiClient.chat.query({ conversationId: item.id })
-      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: chat.history?.map(item => 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,
-        })),
-      }))
-      widget.chatTabs.select(chat.id)
+      await loadChat(widget, item.id)
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)
@@ -123,10 +84,10 @@ export const HistoryItem = ({ item }: { 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 : (
@@ -136,22 +97,22 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
           <Input
             ref={renameInput}
             value={renamed}
-            onChange={e => setRenamed(e.target.value)}
+            onChange={setRenamed}
+            style={{ flex: 1 }}
             onKeyDown={(e) => {
               if (['Enter', 'Escape'].includes(e.key)) {
                 e.key === 'Enter' ? onSubmitRename() : setRenaming(false)
-                setTimeout(() => overlayRef.current?.focus(), 10)
               }
             }}
           />
-          <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" ref={overlayRef}>
-            <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,5 +1,5 @@
+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 { ChatHistoryPanel } from './ChatHistoryPanel'

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,5 +1,10 @@
-import { aiClient, workspaceClient } from '@stack-spot/portal-network'
-import { ChatProperties } from '../../state/ChatState'
+import { agentToolsClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
+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.
@@ -35,3 +40,39 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
     return { id, label: id }
   }
 }
+
+/**
+ * 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: chat.history?.map(item => 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,
+    })),
+  }))
+  widget.chatTabs.select(chat.id)
+}

package/src/views/ChatTabSelection.tsx

@@ -1,4 +1,3 @@
-import { Clock, Plus } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { TabManager } from '../components/TabManager'
@@ -7,6 +6,10 @@ import { useRightPanel } from '../right-panel/hooks'
 import { ChatState } from '../state/ChatState'
 import { ButtonAction } from '../types'
 
+interface Props {
+  buttons?: ButtonAction[],
+}
+
 const TabLabel = ({ id }: { id: string }) => {
   const label = useChatState(id, 'label')
   return <div title={label}>{label}</div>
@@ -15,7 +18,7 @@ const TabLabel = ({ id }: { id: string }) => {
 /**
  * This renders the top-most part of the layout, which includes the chat selection through tabs.
  */
-export const ChatTabSelection = () => {
+export const ChatTabSelection = ({ buttons: extraButtons = [] }: Props) => {
   const t = useTranslate(dictionary)
   const widget = useWidget()
   const { chatHistory } = useWidgetState('features') ?? {}
@@ -39,24 +42,29 @@ export const ChatTabSelection = () => {
 
   const buttons = useMemo<ButtonAction[]>(
     () => {
-      const actions: ButtonAction[] = [{
-        icon: <Plus />,
-        ariaLabel: t.newChat,
-        onClick: create,
-      }]
+      if (extraButtons.length) extraButtons[0].style = { ...extraButtons[0].style, marginLeft: 'auto' }
+      const actions: ButtonAction[] = [
+        {
+          icon: 'Plus',
+          ariaLabel: t.newChat,
+          onClick: create,
+          appearance: 'text',
+        },
+        ...extraButtons,
+      ]
       if (chatHistory) {
         actions.push({
-          icon: <Clock />,
+          icon: 'Clock',
           label: t.history,
           ariaLabel: t.openHistory,
           className: 'test',
-          style: { marginLeft: 'auto' },
+          style: extraButtons.length ? undefined : { marginLeft: 'auto' },
           onClick: () => widget.set('panel', 'history'),
         })
       }
       return actions
     },
-    [chatHistory],
+    [chatHistory, extraButtons],
   )
 
   return <TabManager

package/src/views/Editor.tsx

@@ -1,8 +1,6 @@
-import { Text } from '@citric/core'
-import { LoadingCircular } from '@citric/ui'
 import MonacoEditor, { OnMount } from '@monaco-editor/react'
+import { ProgressCircular, Select, Text } from '@stack-spot/citric-react'
 import { delay } from '@stack-spot/portal-components'
-import { Select } from '@stack-spot/portal-components/Select'
 import { useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { debounce } from 'lodash'
@@ -29,17 +27,13 @@ const TitleBox = styled.div`
   position: relative;
   
   .language-selector {
-    width: 150px;
+    height: 28px;
     position: absolute;
     top: -4px;
     right: 0;
 
-    .options {
-      max-height: 250px;
-    }
-
-    .current-value {
-      padding: 2px 8px;
+    .search-bar {
+      display: none;
     }
   }
 `
@@ -78,11 +72,12 @@ const Title = () => {
       <Text appearance="h5">Editor</Text>
       <Select
         options={languages}
-        renderLabel={l => l.label}
-        renderValue={l => l.value}
+        renderLabel={l => l?.label ?? defaultLanguage}
+        renderKey={l => l?.value}
         value={language}
-        onChange={l => chat.set('codeLanguage', l.value)}
+        onChange={l => chat.set('codeLanguage', l?.value ?? defaultLanguage)}
         className="language-selector"
+        searchable
       />
     </TitleBox>
   )
@@ -125,7 +120,7 @@ const EditorPanel = () => {
         options={{ minimap: { enabled: false } }}
         value={value}
         onChange={v => chat.set('code', v)}
-        loading={<LoadingCircular />}
+        loading={<ProgressCircular />}
         onMount={setup}
       />
     </EditorBox>

package/src/views/Home/BuiltInAgent.tsx

@@ -1,5 +1,4 @@
-import { Text } from '@citric/core'
-import { FaceSmile, KnowledgeSource, QuickCommand, StackSpot } from '@citric/icons'
+import { Row, Text } from '@stack-spot/citric-react'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { QuickStartButton } from '../../components/QuickStartButton'
 import { useCurrentChat } from '../../context/hooks'
@@ -22,28 +21,28 @@ export const BuiltInAgent = ({ username }: HomeProps) => {
     <HomeBox className="home-page">
       <Text appearance="h2" className="title">{t.hello}, {username}</Text>
       <Text appearance="h3" className="subtitle">{t.subtitle}</Text>
-      <div className="shortcuts">
+      <Row className="shortcuts">
         <QuickStartButton
           label={t['question.meta']}
           onClick={() => send(t['question.meta'])}
-          icon={<StackSpot />}
+          icon="StackSpot"
         />
         <QuickStartButton
           label={t['question.ks']}
           onClick={() => send(t['question.ks'])}
-          icon={<KnowledgeSource />}
+          icon="KnowledgeSource"
         />
         <QuickStartButton
           label={t['question.agents']}
           onClick={() => send(t['question.agents'])}
-          icon={<FaceSmile />}
+          icon="FaceSmile"
         />
         <QuickStartButton
           label={t['question.qc']}
           onClick={() => send(t['question.qc'])}
-          icon={<QuickCommand />}
+          icon="QuickCommand"
         />
-      </div>
+      </Row>
     </HomeBox>
   )
 }

package/src/views/Home/CustomAgent.tsx

@@ -1,5 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { Agent } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { QuickStartButton } from '../../components/QuickStartButton'
@@ -28,7 +28,7 @@ export const CustomAgent = () => {
 
   return (
     <HomeBox className="home-page custom-agent">
-      {image ? <img src={image} className="avatar" /> : <IconBox className="avatar"><Agent /></IconBox>}
+      {image ? <img src={image} className="avatar" /> : <Icon icon="Agent" className="avatar" />}
       <Text appearance="h3">{label}</Text>
       <div className="shortcuts">{suggestions?.length ? suggestions : null}</div>
     </HomeBox>

package/src/views/Home/index.tsx

@@ -1,9 +1,9 @@
+import { FallbackBoundary } from '@stack-spot/citric-react'
 import { FadingOverflow } from '@stack-spot/portal-components/FadingOverflow'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { styled } from 'styled-components'
 import { AgentCard } from '../../components/AgentCard'
 import { AgentCardCreate } from '../../components/AgentCard/AgentCardCreate'
-import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useCurrentChatState } from '../../context/hooks'
 import { BuiltInAgent } from './BuiltInAgent'
 import { CustomAgent } from './CustomAgent'
@@ -14,11 +14,11 @@ const AgentList = styled.ul`
   margin: 0;
   padding: 0;
   display: flex;
-  align-items: center;
   gap: 14px;
   
   li {
     flex-shrink: 0;
+    display: flex;
   }
 `
 

package/src/views/Home/styled.ts

@@ -21,35 +21,34 @@ export const HomeBox = styled.div`
   }
 
   .shortcuts {
-    li {
-      flex: 1;
-    }
-      button {
-        margin-left: 0;
+    flex-wrap: wrap;
+    button {
+      margin-left: 0;
+      margin-right: 8px;
+      border-radius: 50px;
+      padding-inline: 16px;
+      padding-block: 8px;
+      font-weight: 400;
+      line-height: normal;
+      border: none;
+      max-width: 30vw;
+      margin-bottom: 8px;
+      i {
+        width: 16px;
+        height: 16px;
         margin-right: 8px;
-        border-radius: 50px;
-        padding-inline: 16px;
-        padding-block: 8px;
-        font-weight: 400;
-        line-height: normal;
-        border: none;
-        max-width: 30vw;
-        margin-bottom: 8px;
-        i {
-          width: 16px;
-          height: 16px;
-          margin-right: 8px;
-        }
-        &:hover, &:visited, &:active, &:focus {
-          background-color: ${theme.color.light[600]}
-        }
+      }
+      &:hover, &:visited, &:active, &:focus {
+        background-color: ${theme.color.light[600]} !important;
+      }
     }
   }
 
-  .avatar, .avatar svg {
+  .avatar {
     width: 74px;
     height: 74px;
     border-radius: 50%;
+    font-size: 74px;
   }
 
   &.custom-agent {

package/src/views/KSDocument.tsx

@@ -1,10 +1,9 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { Score } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { FallbackBoundary, Row, Text } from '@stack-spot/citric-react'
 import { aiClient } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect } from 'react'
 import { Code } from '../components/Code'
-import { FallbackBoundary } from '../components/FallbackBoundary'
 import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { extractCodeFromKSDocument } from '../utils/knowledge-source'
@@ -24,13 +23,13 @@ export const KSDocument = () => {
       <FallbackBoundary><KSDocumentPanel documentId={ks.documentId} slug={ks.slug} /></FallbackBoundary>,
       {
         title: (
-          <Flex flexDirection="row" alignItems="center" flex="1">
+          <Row flex={1}>
             <Text appearance="h5" style={{ flex: 1 }}>{ks.name}</Text>
-            <Flex flexDirection="row" alignItems="center" style={{ gap: '5px' }} title="Score" aria-label="Score">
-              <IconBox><Score /></IconBox>
+            <Row gap="5px" title="Score" aria-label="Score">
+              <Icon icon="Score" />
               <Text>{ks.score.toFixed(2)}</Text>
-            </Flex>
-          </Flex>
+            </Row>
+          </Row>
         ),
         description: t.description,
         onClose: () => widget.set('panel', undefined),