@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/ChatTabSelection.tsx

@@ -1,15 +1,13 @@
-import { Clock, Plus } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { TabManager } from '../components/TabManager'
-import { useChatState, useChatTabs, useWidget } from '../context/hooks'
-import { MessageInterceptor } from '../state/ChatState'
+import { useChatState, useChatTabs, useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { ChatState } from '../state/ChatState'
 import { ButtonAction } from '../types'
-import { createNewChat } from '../utils/chat'
 
 interface Props {
-  history?: boolean,
-  interceptors: MessageInterceptor[],
+  buttons?: ButtonAction[],
 }
 
 const TabLabel = ({ id }: { id: string }) => {
@@ -17,48 +15,77 @@ const TabLabel = ({ id }: { id: string }) => {
   return <div title={label}>{label}</div>
 }
 
-export const ChatTabSelection = ({ history, interceptors }: Props) => {
+/**
+ * This renders the top-most part of the layout, which includes the chat selection through tabs.
+ */
+export const ChatTabSelection = ({ buttons: extraButtons = [] }: Props) => {
   const t = useTranslate(dictionary)
   const widget = useWidget()
+  const { chatHistory } = useWidgetState('features') ?? {}
   const { active, chats } = useChatTabs()
+  const { close: closeRightPanel } = useRightPanel()
+
+  function create() {
+    widget.createChat()
+    closeRightPanel()
+  }
+
+  function select({ id }: ChatState) {
+    widget.chatTabs.select(id)
+    closeRightPanel()
+  }
+
+  function remove({ id }: ChatState) {
+    widget.chatTabs.remove(id)
+    closeRightPanel()
+  }
 
   const buttons = useMemo<ButtonAction[]>(
     () => {
-      const actions: ButtonAction[] = [{
-        icon: <Plus />,
-        label: t.newChat,
-        onClick: () => createNewChat(widget, interceptors),
-      }]
-      if (history) {
+      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 />,
-          label: t.openHistory,
+          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
     },
-    [history],
+    [chatHistory, extraButtons],
   )
+
   return <TabManager
     tabs={chats}
-    active={active}
+    active={active.id}
     renderLabel={({ id }) => <TabLabel id={id} />}
     keygen={({ id }) => id}
-    onRemove={({ id }) => widget.chatTabs.remove(id)}
-    onSelect={({ id }) => widget.chatTabs.select(id)}
+    onRemove={remove}
+    onSelect={select}
     buttons={buttons}
   />
 }
 
 const dictionary = {
   en: {
+    history: 'History',
     openHistory: 'Open chat history',
     newChat: 'New chat',
   },
   pt: {
+    history: 'Histórico',
     openHistory: 'Abrir histórico da conversa',
     newChat: 'Novo chat',
   },

package/src/views/Editor.tsx

@@ -1,7 +1,6 @@
-import { Text } from '@citric/core'
-import { LoadingCircular } from '@citric/ui'
 import MonacoEditor, { OnMount } from '@monaco-editor/react'
-import { Select } from '@stack-spot/portal-components/Select'
+import { ProgressCircular, Select, Text } from '@stack-spot/citric-react'
+import { delay } from '@stack-spot/portal-components'
 import { useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { debounce } from 'lodash'
@@ -9,6 +8,7 @@ import { IDisposable } from 'monaco-editor'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { styled } from 'styled-components'
 import { useCurrentChat, useCurrentChatState, useWidget, useWidgetState } from '../context/hooks'
+import { panelAnimationTime } from '../right-panel/constants'
 import { useRightPanel } from '../right-panel/hooks'
 import { defaultLanguage, languages } from '../utils/programming-languages'
 
@@ -27,21 +27,20 @@ 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;
     }
   }
 `
 
+/**
+ * Renders the Editor in the Right Panel if this is the panel that is currently opened.
+ */
 export const Editor = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -67,16 +66,18 @@ const Title = () => {
   const languageValue = useCurrentChatState('codeLanguage') || defaultLanguage
   const language = useMemo(() => languages.find(l => l.value === languageValue), [languageValue])
   const chat = useCurrentChat()
+
   return (
     <TitleBox>
       <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>
   )
@@ -89,16 +90,25 @@ const EditorPanel = () => {
   const chat = useCurrentChat()
   const selectionObserver = useRef<IDisposable | undefined>()
 
-  const setup: OnMount = useCallback((editor) => {
+  const setup: OnMount = useCallback(async (editor) => {
     selectionObserver.current = editor.onDidChangeCursorSelection(debounce((e) => {
       const selectedText = editor.getModel()?.getValueInRange(e.selection)
       chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
     }, MIN_SELECTION_UPDATE_MS))
+    await delay(panelAnimationTime)
+    editor.focus()
   }, [])
 
-  useEffect(() => () => {
-    chat.set('codeSelection', undefined)
-    selectionObserver.current?.dispose()
+  useEffect(() => {
+    if (chat.get('codeLanguage') === undefined) {
+      chat.set('codeLanguage', language)
+    }
+
+    return () => {
+      chat.set('codeSelection', undefined)
+      chat.set('codeLanguage', undefined)
+      selectionObserver.current?.dispose()
+    }
   }, [])
   
   return (
@@ -110,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

@@ -0,0 +1,67 @@
+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'
+import { ChatEntry } from '../../state/ChatEntry'
+import { HomeBox } from './styled'
+import { HomeProps } from './types'
+
+/**
+ * This is the home rendered when the agent is built-in.
+ */
+export const BuiltInAgent = ({ username }: HomeProps) => {
+  const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+
+  function send(message: string) {
+    chat.pushMessage(ChatEntry.createUserEntry(message))
+  }
+
+  return (
+    <HomeBox className="home-page">
+      <Text appearance="h2" className="title">{t.hello}, {username}</Text>
+      <Text appearance="h3" className="subtitle">{t.subtitle}</Text>
+      <Row className="shortcuts">
+        <QuickStartButton
+          label={t['question.meta']}
+          onClick={() => send(t['question.meta'])}
+          icon="StackSpot"
+        />
+        <QuickStartButton
+          label={t['question.ks']}
+          onClick={() => send(t['question.ks'])}
+          icon="KnowledgeSource"
+        />
+        <QuickStartButton
+          label={t['question.agents']}
+          onClick={() => send(t['question.agents'])}
+          icon="FaceSmile"
+        />
+        <QuickStartButton
+          label={t['question.qc']}
+          onClick={() => send(t['question.qc'])}
+          icon="QuickCommand"
+        />
+      </Row>
+    </HomeBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    hello: 'Hello',
+    subtitle: 'What really matters takes time, let us help you with the rest.',
+    'question.meta': 'What is StackSpot AI?',
+    'question.ks': 'What are Knowledge Sources?',
+    'question.agents': 'How do Agents work?',
+    'question.qc': 'What is a Quick Command?',
+  },
+  pt: {
+    hello: 'Olá',
+    subtitle: 'Foque no que realmente importa. Deixe o resto com a gente.',
+    'question.meta': 'O que é a StackSpot AI?',
+    'question.ks': 'O que são Knowledge Sources?',
+    'question.agents': 'Como funcionam os agentes?',
+    'question.qc': 'O que é um Quick Command?',
+  },
+} satisfies Dictionary

package/src/views/Home/CustomAgent.tsx

@@ -0,0 +1,36 @@
+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'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { HomeBox } from './styled'
+
+/**
+ * This is the home rendered when the agent is custom.
+ */
+export const CustomAgent = () => {
+  const { id, label, image } = useCurrentChatState('agent') ?? {}
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: id! })
+  const chat = useCurrentChat()
+  const suggestions = useMemo(() => agent?.conversation_starter?.map((prompt, index) => (
+    <QuickStartButton
+      key={index}
+      label={prompt}
+      onClick={() => send(prompt)}
+    />
+  )), [agent?.conversation_starter])
+
+  function send(message: string) {
+    chat.pushMessage(ChatEntry.createUserEntry(message))
+  }
+
+  return (
+    <HomeBox className="home-page custom-agent">
+      {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

@@ -0,0 +1,48 @@
+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 { useCurrentChatState } from '../../context/hooks'
+import { BuiltInAgent } from './BuiltInAgent'
+import { CustomAgent } from './CustomAgent'
+import { HomeProps } from './types'
+
+const AgentList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 14px;
+  
+  li {
+    flex-shrink: 0;
+    display: flex;
+  }
+`
+
+/**
+ * Renders the default home page for the chat. This shows up when no message has been sent yet.
+ * 
+ * The home page can be replaced by providing children to the component `StackspotAIWidget`.
+ */
+export const Home = ({ initialAgents, urlCreateAgent, ...props }: HomeProps) => {
+  const agent = useCurrentChatState('agent')
+  const isAgentEnabled = useCurrentChatState('features').agent
+  const [canCreateAgent] = agentToolsClient.createAgent.useAllowed()
+    
+  return (
+    <FallbackBoundary>
+      {agent && !agent.builtIn ? <CustomAgent /> : <BuiltInAgent {...props} />}
+      {!!initialAgents && isAgentEnabled && (
+        <FadingOverflow enableHorizontalScrollWithVerticalWheel sides={['left', 'right']} scroll="arrows">
+          <AgentList className="agent-list">
+            {canCreateAgent && urlCreateAgent && <li><AgentCardCreate urlCreateAgent={urlCreateAgent} /></li>}
+            {initialAgents.map((agent) => <li key={agent.id}><AgentCard agent={agent} /></li>)}
+          </AgentList>
+        </FadingOverflow>
+      )}
+    </FallbackBoundary>
+  )
+}

package/src/views/Home/styled.ts

@@ -0,0 +1,74 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const HomeBox = styled.div`
+  margin: auto 0;
+
+  .title, .subtitle {
+    margin: 0;
+  }
+
+  .title {
+    display: inline-block;
+    background: linear-gradient(72.81deg, #FF9900 0.96%, #FF6633 100%);
+    background-clip: text;
+    color: transparent;
+  }
+
+  .subtitle {
+    color: #A0A0A0;
+    margin-bottom: 24px;
+  }
+
+  .shortcuts {
+    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;
+      }
+      &:hover, &:visited, &:active, &:focus {
+        background-color: ${theme.color.light[600]} !important;
+      }
+    }
+  }
+
+  .avatar {
+    width: 74px;
+    height: 74px;
+    border-radius: 50%;
+    font-size: 74px;
+  }
+
+  &.custom-agent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+
+    .shortcuts {
+      display: inline-block;
+      text-align: center;
+      button {
+        margin-bottom: 10px;
+        margin-left: 4px;
+        margin-right: 4px;
+        p {
+          overflow: hidden;
+        }
+        
+      }
+    }
+  }
+`

package/src/views/Home/types.ts

@@ -0,0 +1,16 @@
+import { LabeledAgent } from '../../state/types'
+
+export interface HomeProps {
+  /**
+   * The name of the user currently logged in.
+   */
+  username: string,
+  /**
+   * Initial agents to show in home.
+   */
+  initialAgents?: LabeledAgent[],
+  /**
+   * URL to redirect to the "Create Agent" page on the portal
+   */
+  urlCreateAgent?: string,
+}

package/src/views/KSDocument.tsx

@@ -1,5 +1,5 @@
-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'
@@ -8,6 +8,9 @@ import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { extractCodeFromKSDocument } from '../utils/knowledge-source'
 
+/**
+ * Renders the KS document in the Right Panel if this is the panel that is currently opened.
+ */
 export const KSDocument = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -17,16 +20,16 @@ export const KSDocument = () => {
 
   useEffect(() => {
     if (panel === 'ks-details' && ks) open(
-      <KSDocumentPanel documentId={ks.documentId} slug={ks.slug} />,
+      <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),